Package Exports

react-dropzone

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dropzone) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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