![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png) # react-dropzone [![Build Status](https://travis-ci.org/react-dropzone/react-dropzone.svg?branch=master)](https://travis-ci.org/react-dropzone/react-dropzone) [![npm version](https://badge.fury.io/js/react-dropzone.svg)](https://badge.fury.io/js/react-dropzone) [![codecov](https://codecov.io/gh/react-dropzone/react-dropzone/branch/master/graph/badge.svg)](https://codecov.io/gh/react-dropzone/react-dropzone) [![OpenCollective](https://opencollective.com/react-dropzone/backers/badge.svg)](#backers) [![OpenCollective](https://opencollective.com/react-dropzone/sponsors/badge.svg)](#sponsors) Simple HTML5-compliant drag'n'drop zone for files built with React.js. Documentation and examples: https://react-dropzone.js.org Source code: https://github.com/react-dropzone/react-dropzone/ --- **Looking for maintainers: https://github.com/react-dropzone/react-dropzone/issues/479** --- ## Installation Install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc). ```bash npm install --save react-dropzone ``` or: ```bash yarn add react-dropzone ``` ## Usage Import `Dropzone` in your React component: ```javascript static import Dropzone from 'react-dropzone' ``` and specify the `onDrop` method that accepts two arguments. The first argument represents the accepted files and the second argument the rejected files. ```javascript static function onDrop(acceptedFiles, rejectedFiles) { // do stuff with files... } ``` Files accepted or rejected based on `accept` prop. This must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file). Please note that `onDrop` method will always be called regardless if dropped file was accepted or rejected. The `onDropAccepted` method will be called if all dropped files were accepted and the `onDropRejected` method will be called if any of the dropped files was rejected. 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](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library: ```javascript static onDrop: acceptedFiles => { const req = request.post('/upload'); acceptedFiles.forEach(file => { req.attach(file.name, file); }); req.end(callback); } ``` **Warning**: On most recent browsers versions, the files given by `onDrop` won't have properties `path` or `fullPath`, see [this SO question](https://stackoverflow.com/a/23005925/2275818) and [this issue](https://github.com/react-dropzone/react-dropzone/issues/477). If you want to access file content you have to use the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader). ```javascript static onDrop: acceptedFiles => { acceptedFiles.forEach(file => { const reader = new FileReader(); reader.onload = () => { const fileAsBinaryString = reader.result; // do whatever you want with the file content }; reader.onabort = () => console.log('file reading was aborted'); reader.onerror = () => console.log('file reading has failed'); reader.readAsBinaryString(file); }); } ``` ## PropTypes See https://react-dropzone.netlify.com/#proptypes ### Word of caution when working with previews *Important*: `react-dropzone` doesn't manage dropped files. You need to destroy the object URL yourself whenever you don't need the `preview` by calling `window.URL.revokeObjectURL(file.preview);` to avoid memory leaks. ## Support ### Backers Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-dropzone#backer)]

### Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-dropzone#sponsor)]

## License MIT

react-dropzone-demisto

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past