react-dropzone-es6
Simple HTML5 drag-drop zone for files with React.js.
Try it out here: http://paramaggarwal.github.io/react-dropzone/
Installation
The easiest way to use react-dropzone-es6 is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm install --save react-dropzone-es6
Usage
Simply require('react-dropzone-es6')
and specify an onDrop
method that accepts an array of dropped files.
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-es6');
var DropzoneDemo = React.createClass({
onDrop: function (files) {
console.log('Received files: ', files);
},
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
- Clicking the<Dropzone>
brings up the browser file picker. To disable, set totrue
.multiple
- To accept only a single file, set this tofalse
.
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.
To trigger the dropzone manually (open the file prompt), call the component's open
function.
/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone-es6');
var DropzoneDemo = React.createClass({
getInitialState: function () {
return {
files: []
};
},
onDrop: function (files) {
this.setState({
files: files
});
},
onOpenClick: function () {
this.refs.dropzone.open();
},
render: function () {
return (
<div>
<Dropzone ref="dropzone" 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-es6
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(files){
var req = request.post('/upload');
files.forEach((file)=> {
req.attach(file.name, file);
});
req.end(callback);
}
License
Copyright for portions of project react-dropzone-es6 are held by Param Aggarwal 2014 as part of project react-dropzone. All other copyright for project react-dropzone-es6 are held by Dominik Nikiel 2015.
MIT