Simple HTML5 drag-drop zone in React.js.
Demo: http://paramaggarwal.github.io/react-dropzone/
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 */varReact=require('react');varDropzone=require('react-dropzone');varDropzoneDemo=React.createClass({onDrop: function(files){console.log('Received files: ',files);},render: function(){return(<div><DropzoneonDrop={this.onDrop}size={150}inputName='myFileUpload'><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){varreq=request.post('/upload');files.forEach((file)=>{req.attach(file.name,file);});req.end(callback);}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:
The inputName attribute sets the file input name. This maybe useful for some other plugins for file upload. By default its fileInput.
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.
MIT