# react-dropzone **Repository Path**: mirrors_stevemao/react-dropzone ## Basic Information - **Project Name**: react-dropzone - **Description**: Simple HTML5 drag-drop zone with React.js. - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-09-26 - **Last Updated**: 2025-09-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README react-dropzone [![Build Status](https://travis-ci.org/okonet/react-dropzone.svg?branch=master)](https://travis-ci.org/okonet/react-dropzone) [![npm version](https://badge.fury.io/js/react-dropzone.svg)](https://badge.fury.io/js/react-dropzone) [![codecov](https://codecov.io/gh/okonet/react-dropzone/branch/master/graph/badge.svg)](https://codecov.io/gh/okonet/react-dropzone) [![OpenCollective](https://opencollective.com/react-dropzone/backers/badge.svg)](#backers) [![OpenCollective](https://opencollective.com/react-dropzone/sponsors/badge.svg)](#sponsors) ============== Simple HTML5 drag-drop zone for files with React.js. Try it out here: http://okonet.ru/react-dropzone/ Installation ============ The easiest way to use react-dropzone is to install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc). ``` npm install --save react-dropzone ``` Create a standalone module using *WebPack*: ``` > npm install > webpack ``` React 0.13 users ===== Vesion 3.x is not compatible with React 0.13. If you can't upgrade to React 0.14 right now, you should use v 2.x of this package. ``` npm install --save react-dropzone@2.x ``` Usage ===== Simply `require('react-dropzone')` and specify an `onDrop` method which accepts two arguments. The first argument represents the accepted files and the second argument the rejected files. The `onDrop` method gets always called if a file was uploaded, regardless if it was accepted or rejected. The library provides two additional methods named `onDropAccepted` and `onDropRejected`. The `onDropAccepted` method will be called if all dropped files were accepted and the `onDropRejected` method will be called if any of the dropped files was rejected. Example ===== ```jsx /** @jsx React.DOM */ var React = require('react'); var Dropzone = require('react-dropzone'); var DropzoneDemo = React.createClass({ onDrop: function (acceptedFiles, rejectedFiles) { console.log('Accepted files: ', acceptedFiles); console.log('Rejected files: ', rejectedFiles); }, render: function () { return (
Try dropping some files here, or click to select files to upload.
); } }); React.render(, document.body); ``` Reacting to user input ===== By default, the component picks up some default styling to get you started. You can customize `` by specifying a `style`, `activeStyle` or `rejectStyle` which is applied when a file is dragged over the zone. You can also specify `className`, `activeClassName` or `rejectClassName` if you would rather style using CSS. You have a third option : providing a function that returns the component's children. ``` {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => { if (isDragActive) { return "This file is authorized"; } if (isDragReject) { return "This file is not authorized"; } return acceptedFiles.length || rejectedFiles.length ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files` : "Try dropping some files"; }} ``` Features ======== - `preventDropOnDocument` `[Boolean | **true**]` — When a file is dropped outside of any `` instance, whether to prevent the browser from navigating to it. - `disableClick` `[Boolean | **false**]` — Clicking the `` brings up the browser file picker. - `multiple` `[Boolean | **true**]` — Accept multiple files - `minSize` `[Number | **0**]` — Only accept file(s) larger than `minSize` bytes. - `maxSize` `[Number | **Infinity**]` — Only accept file(s) smaller than `maxSize` bytes. - `accept` - Accept only specified mime types. Must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file), for example `application/pdf`, `image/*`, `audio/aiff,audio/midi` To show a preview of the dropped file while it uploads, use the `file.preview` property. Use `` to display a preview of the image dropped. You can disable the creation of the preview (for example if you drop big files) by setting the `disablePreview` prop to `true`. #### Manual Upload * To trigger the dropzone manually (open the file prompt), call the component's `open` function. * The completion handler for the `open` function is also the `onDrop` function. ```jsx /** @jsx React.DOM */ var React = require('react'); var Dropzone = require('react-dropzone'); var DropzoneDemo = React.createClass({ getInitialState: function () { return { files: [] }; }, onDrop: function (acceptedFiles) { this.setState({ files: acceptedFiles }); }, onOpenClick: function () { this.dropzone.open(); }, render: function () { return (
{ this.dropzone = node; }} onDrop={this.onDrop}>
Try dropping some files here, or click to select files to upload.
 {this.state.files.length > 0 ?

Uploading {this.state.files.length} files...

{this.state.files.map((file) => )}
: null}
); } }); React.render(, document.body); ``` Uploads ======= Using `react-dropzone` is similar to using a file form field, but instead of getting the `files` property from the field, you listen to the `onDrop` callback to handle the files. Simple explanation here: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax Specifying the `onDrop` method, provides you with an array of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library: ```javascript onDrop: function(acceptedFiles){ var req = request.post('/upload'); acceptedFiles.forEach((file)=> { req.attach(file.name, file); }); req.end(callback); } ``` Support ======= ### Backers Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-dropzone#backer)] ### Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-dropzone#sponsor)] License ======= MIT