==============
Simple HTML5 drag-drop zone for files with React.js.
Try it out here: http://okonet.ru/react-dropzone/
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
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
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.
/** @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);
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.
You have a third option : providing a function that returns the component's children.
<Dropzone>
{({ 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";
}}
</Dropzone>
preventDropOnDocument
[Boolean | **true**]
— When a file is dropped outside of any<Dropzone>
instance, whether to prevent the browser from navigating to it.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
.
- 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);
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);
}
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
MIT