react-dropzone
Simple HTML5 drag-drop zone for files with React.js.
Try it out here: http://okonet.ru/react-dropzone/
Installation
The easiest way to use react-dropzone is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).
npm install --save react-dropzone
Create a standalone module using WebPack:
> npm install
> webpack
React 0.13 users
Vesion 3.x is not compatible with React 0.13. If you can't upgrade to React 0.14 right now, you should use v 2.x of this package.
npm install --save react-dropzone@2.x
Usage
Simply require('react-dropzone')
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 = ;var Dropzone = ; var DropzoneDemo = React; React;
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
.accept
- Filters the file types that are valid. It should have a valid MIME type according to input element, for example:application/pdf
image/*
audio/aiff,audio/midi
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.
You can disable the creation of the preview (for example if you drop big files) by setting the disablePreview
prop to true
.
Manual Upload
- To trigger the dropzone manually (open the file prompt), call the component's
open
function. - The completion handler for the
open
function is also theonDrop
function.
/** @jsx React.DOM */var React = ;var Dropzone = ; var DropzoneDemo = React; React;
Uploads
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
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:
{ var req = request; files; req; }
License
MIT