react-dropzone
Simple HTML5 drag-drop zone in React.js.
Demo: http://paramaggarwal.github.io/react-dropzone/
Usage
Simply require('react-dropzone')
and specify an onDrop
method that accepts an array of dropped files. You can customize the content of the Dropzone by specifying children to the component.
You can also specify a style
object to apply to the Dropzone
component. Optionally pass in a size
property to configure the size of the Dropzone.
/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');
var DropzoneDemo = React.createClass({
onDrop: function (files) {
console.log('Received files: ', files);
},
render: function () {
return (
<div>
<Dropzone onDrop={this.onDrop} size={150} >
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
</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
The onDrop
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(files){
var req = request.post('/upload');
files.forEach((file)=> {
req.attach(file.name, file);
});
req.end(callback);
}
Starting v1.1
, you can now immediately show a preview of the dropped file while it uploads. The file.preview
property can be specified as the image source: <img src={file.preview} />
to display a preview of the image dropped.
Triggers
It may be useful to trigger the dropzone manually (opening the file prompt), to do that, you can call the component's open
function.
For example:
/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');
var DropzoneDemo = React.createClass({
onDrop: function (files) {
console.log('Received files: ', files);
},
onOpenClick: function () {
this.refs.dropzone.open();
},
render: function () {
return (
<div>
<Dropzone ref="dropzone" onDrop={this.onDrop} size={150} >
<div>Try dropping some files here, or click to select files to upload.</div>
</Dropzone>
<button type="button" onClick={this.onOpenClick}>
Open Dropzone
</button>
</div>
);
}
});
React.render(<DropzoneDemo />, document.body);
License
MIT