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, Browserify, 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.
By default, the component picks up some default styling to get you started. You can customize <Dropzone>
by specifying a style
and activeStyle
which is applied when a file is dragged over the zone. You can also specify className
and activeClassName
if you would rather style using CSS.
Example
/** @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 (
<div>
<Dropzone onDrop={this.onDrop}>
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
</div>
);
}
});
React.render(<DropzoneDemo />, document.body);
Features
disableClick
[Boolean | **false**]
— Clicking the<Dropzone>
brings up the browser file picker.multiple
[Boolean | **true**]
— Accept multiple filesminSize
[Number | **0**]
— Only accept file(s) larger thanminSize
bytes.maxSize
[Number | **Infinity**]
— Only accept file(s) smaller thanmaxSize
bytes.accept
- Accept only specified mime types. Must be a valid MIME type according to input element specification, for exampleapplication/pdf
,image/*
,audio/aiff,audio/midi
To show a preview of the dropped file while it uploads, use the file.preview
property. Use <img src={file.preview} />
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 theonDrop
function.
/** @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 (
<div>
<Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop}>
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
<button type="button" onClick={this.onOpenClick}>
Open Dropzone
</button>
{this.state.files.length > 0 ? <div>
<h2>Uploading {this.state.files.length} files...</h2>
<div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>
</div> : null}
</div>
);
}
});
React.render(<DropzoneDemo />, 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 which you can then send to a server. For example, with SuperAgent as a http/ajax library:
onDrop: function(acceptedFiles){
var req = request.post('/upload');
acceptedFiles.forEach((file)=> {
req.attach(file.name, file);
});
req.end(callback);
}
License
MIT