react-dropzone

Simple HTML5 drag-drop zone in React.js.

Usage

Simply require() the module and specify a handler property as a function that accepts the dropped file.

Optionally pass in a CSS size for the dropzone using the size property and a message to be shown inside the dropzone using the message property.

varDropzone=require('react-dropzone');varcomponent=React.createClass({fileHandler: function(file){uploadScript(file,uploadURL,function(err,res){if(res.code==200){console.log("Upload success.")}});}},render: function(){return(<div><Dropzonehandler={this.fileHandler}size=200message="Drag and drop a file here"/></div>);}});

If you'd like more customizability, you can specify children for the component and all the default styling will be overridden.

varDropzone=require('react-dropzone');varcomponent=React.createClass({fileHandler: function(file){this.setState({uploading: true});uploadScript(file,uploadURL,function(err,res){if(res.code==200){console.log("Upload success.")}});}},render: function(){return(<div><Dropzonehandler={this.fileHandler}><span>{this.state.uploading ? "Uploading... " : "Drop an image here."}</span></Dropzone></div>);}});

Author

Param Aggarwal (paramaggarwal@gmail.com)

License

MIT