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.

Screenshot of dropzone

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.

var Dropzone = require('react-dropzone');

var component = React.createClass({

  fileHandler: function(file) {
      uploadScript(file, uploadURL, function(err, res) {
        if (res.code == 200) {console.log("Upload success.")}
      });
    }
  },

  render: function() {
    return (
      <div>
        <Dropzone handler={this.fileHandler} size=200 message="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.

var Dropzone = require('react-dropzone');

var component = 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>
        <Dropzone handler={this.fileHandler}>
          <span>{this.state.uploading ? "Uploading... " : "Drop an image here."}</span>
        </Dropzone>
      </div>
    );
  }
});

Author

Param Aggarwal (paramaggarwal@gmail.com)

License

MIT