Github url

react-dropzone

by react-dropzone

react-dropzone /react-dropzone

Simple HTML5 drag-drop zone with React.js.

7.2K Stars 644 Forks Last release: 2 months ago (v11.0.1) MIT License 529 Commits 135 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-dropzone logo

react-dropzone

npm Build StatuscodecovOpen CollectiveOpen Collective

Simple React hook to create a HTML5-compliant drag'n'drop zone for files.

Documentation and examples at https://react-dropzone.js.org. Source code at https://github.com/react-dropzone/react-dropzone/.

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-dropzone

or:

bash yarn add react-dropzone

Usage

You can either use the hook:


function MyDropzone() { const onDrop = useCallback(acceptedFiles =\> { // Do something with the files }, []) const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

return (

<input> { isDragActive ? 

Drop the files here ...

 : 

Drag 'n' drop some files here, or click to select files

 } 
 ) } ```

**IMPORTANT**: Under the hood, this lib makes use of [hooks](https://reactjs.org/docs/hooks-intro.html), therefore, using it requires React

>= 16.8

.

Or the wrapper component for the hook: ```jsx static import React from 'react' import Dropzone from 'react-dropzone'

<dropzone ondrop="{acceptedFiles"> console.log(acceptedFiles)}&gt;
  {({getRootProps, getInputProps}) =&gt; (
    <section>
      <div>
        <input>
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</dropzone>```

**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).

Furthermore, if you want to access file contents you have to use the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader):

```jsx static import React, {useCallback} from 'react' import {useDropzone} from 'react-dropzone'

function MyDropzone() { const onDrop = useCallback((acceptedFiles) =\> { acceptedFiles.forEach((file) =\> { const reader = new FileReader()

reader.onabort = () => console.log('file reading was aborted') reader.onerror = () => console.log('file reading has failed') reader.onload = () => { // Do whatever you want with the file contents const binaryStr = reader.result console.log(binaryStr) } reader.readAsArrayBuffer(file) })


}, []) const {getRootProps, getInputProps} = useDropzone({onDrop})

return (

<input>

Drag 'n' drop some files here, or click to select files

 ) } ```
## Dropzone Props Getters

The dropzone property getters are just two functions that return objects with properties which you need to use to create the drag 'n' drop zone. The root properties can be applied to whatever element you want, whereas the input properties must be applied to an
``` : ```jsx static import React from 'react' import {useDropzone} from 'react-dropzone'

function MyDropzone() { const {getRootProps, getInputProps} = useDropzone()

return (

Drag 'n' drop some files here, or click to select files

) } ```

Note that whatever other props you want to add to the element where the props from

getRootProps()

are set, you should always pass them through that function rather than applying them on the element itself. This is in order to avoid your props being overridden (or overriding the props returned by

getRootProps()

):

jsx static
 console.log(event) })} /\>

In the example above, the provided

{onClick}

 handler will be invoked before the internal one, therefore, internal callbacks can be prevented by simply using [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation). See [Events](https://react-dropzone.js.org#events) for more examples.

_Important_: if you ommit rendering an
``` and/or binding the props from ``` getInputProps() ``` , opening a file dialog will not be possible. ## Refs

Both

getRootProps

and

getInputProps

accept a custom

refKey

(defaults to

ref

) as one of the attributes passed down in the parameter.

This can be useful when the element you're trying to apply the props from either one of those fns does not expose a reference to the element, e.g.:


const StyledDiv = styled.div

// Some styling here

function Example() { const {getRootProps, getInputProps} = useDropzone() <styleddiv refkey:>
    <input>
    <p>Drag 'n' drop some files here, or click to select files</p>
  </styleddiv>} ```

If you're working with [Material UI](https://material-ui.com) and would like to apply the root props on some component that does not expose a ref, use [RootRef](https://material-ui.com/api/root-ref):

```jsx static import React from 'react' import {useDropzone} from 'react-dropzone' import RootRef from '@material-ui/core/RootRef'

function PaperDropzone() { const {getRootProps, getInputProps} = useDropzone() const {ref, ...rootProps} = getRootProps()

<rootref rootref="{ref}">
    <paper>
      <input>
      <p>Drag 'n' drop some files here, or click to select files</p>
    </paper>
  </rootref>} ```

_Important_: do not set the

ref

 prop on the elements where 

getRootProps()

/

getInputProps()

 props are set, instead, get the refs from the hook itself:

```jsx static import React from 'react' import {useDropzone} from 'react-dropzone'

function Refs() { const { getRootProps, getInputProps, rootRef, // Ref to the

inputRef // Ref to the

<input>

} = useDropzone()

Drag 'n' drop some files here, or click to select files

} ```

If you're using the

<dropzone></dropzone>

component, though, you can set the

ref

prop on the component itself which will expose the

{open}

prop that can be used to open the file dialog programmatically:


const dropzoneRef = createRef()

<dropzone ref="{dropzoneRef}">
  {({getRootProps, getInputProps}) =&gt; (
    <div>
      <input>
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  )}
</dropzone>

dropzoneRef.open() ```

## Testing

_Important_:

react-dropzone

 makes some of its drag 'n' drop callbacks asynchronous to enable promise based 

getFilesFromEvent()

 functions. In order to properly test this, you may want to utilize a helper function to run all promises like this:

js static const flushPromises = () => new Promise(resolve => setImmediate(resolve))


Example with [react-testing-library](https://github.com/kentcdodds/react-testing-library): ```js static import React from 'react' import Dropzone from 'react-dropzone' import { fireEvent, render } from 'react-testing-library'

test('invoke onDragEnter when dragenter event occurs', async () =\> { const file = new File([JSON.stringify({ping: true})], 'ping.json', { type: 'application/json' }) const data = mockData([file]) const onDragEnter = jest.fn()

const ui = ( <dropzone ondragenter="{onDragEnter}">
      {({ getRootProps, getInputProps }) =&gt; (
        <div>
          <input>
        </div>
      )}
    </dropzone> ) const { container } = render(ui) const dropzone = container.querySelector('div')

dispatchEvt(dropzone, 'dragenter', data) await flushPromises(ui, container)

expect(onDragEnter).toHaveBeenCalled() })

function flushPromises(ui, container) { return new Promise(resolve =\> setImmediate(() =\> { render(ui, { container }) resolve(container) }) ) }

function dispatchEvt(node, type, data) { const event = new Event(type, { bubbles: true }) Object.assign(event, data) fireEvent(node, event) }

function mockData(files) { return { dataTransfer: { files, items: files.map(file =\> ({ kind: 'file', type: file.type, getAsFile: () =\> file })), types: ['Files'] } } } ```

_Note_: using [Enzyme](https://airbnb.io/enzyme) for testing is not supported at the moment, see [#2011](https://github.com/airbnb/enzyme/issues/2011).

More examples for this can be found in

react-dropzone

s own [test suites](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.spec.js).
## Support

### Backers

Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-dropzone#backer)]

[![](https://opencollective.com/react-dropzone/backer/0/avatar.svg)](https://opencollective.com/react-dropzone/backer/0/website)[![](https://opencollective.com/react-dropzone/backer/1/avatar.svg)](https://opencollective.com/react-dropzone/backer/1/website)[![](https://opencollective.com/react-dropzone/backer/2/avatar.svg)](https://opencollective.com/react-dropzone/backer/2/website)[![](https://opencollective.com/react-dropzone/backer/3/avatar.svg)](https://opencollective.com/react-dropzone/backer/3/website)[![](https://opencollective.com/react-dropzone/backer/4/avatar.svg)](https://opencollective.com/react-dropzone/backer/4/website)[![](https://opencollective.com/react-dropzone/backer/5/avatar.svg)](https://opencollective.com/react-dropzone/backer/5/website)[![](https://opencollective.com/react-dropzone/backer/6/avatar.svg)](https://opencollective.com/react-dropzone/backer/6/website)[![](https://opencollective.com/react-dropzone/backer/7/avatar.svg)](https://opencollective.com/react-dropzone/backer/7/website)[![](https://opencollective.com/react-dropzone/backer/8/avatar.svg)](https://opencollective.com/react-dropzone/backer/8/website)[![](https://opencollective.com/react-dropzone/backer/9/avatar.svg)](https://opencollective.com/react-dropzone/backer/9/website)[![](https://opencollective.com/react-dropzone/backer/10/avatar.svg)](https://opencollective.com/react-dropzone/backer/10/website)[![](https://opencollective.com/react-dropzone/backer/11/avatar.svg)](https://opencollective.com/react-dropzone/backer/11/website)[![](https://opencollective.com/react-dropzone/backer/12/avatar.svg)](https://opencollective.com/react-dropzone/backer/12/website)[![](https://opencollective.com/react-dropzone/backer/13/avatar.svg)](https://opencollective.com/react-dropzone/backer/13/website)[![](https://opencollective.com/react-dropzone/backer/14/avatar.svg)](https://opencollective.com/react-dropzone/backer/14/website)[![](https://opencollective.com/react-dropzone/backer/15/avatar.svg)](https://opencollective.com/react-dropzone/backer/15/website)[![](https://opencollective.com/react-dropzone/backer/16/avatar.svg)](https://opencollective.com/react-dropzone/backer/16/website)[![](https://opencollective.com/react-dropzone/backer/17/avatar.svg)](https://opencollective.com/react-dropzone/backer/17/website)[![](https://opencollective.com/react-dropzone/backer/18/avatar.svg)](https://opencollective.com/react-dropzone/backer/18/website)[![](https://opencollective.com/react-dropzone/backer/19/avatar.svg)](https://opencollective.com/react-dropzone/backer/19/website)[![](https://opencollective.com/react-dropzone/backer/20/avatar.svg)](https://opencollective.com/react-dropzone/backer/20/website)[![](https://opencollective.com/react-dropzone/backer/21/avatar.svg)](https://opencollective.com/react-dropzone/backer/21/website)[![](https://opencollective.com/react-dropzone/backer/22/avatar.svg)](https://opencollective.com/react-dropzone/backer/22/website)[![](https://opencollective.com/react-dropzone/backer/23/avatar.svg)](https://opencollective.com/react-dropzone/backer/23/website)[![](https://opencollective.com/react-dropzone/backer/24/avatar.svg)](https://opencollective.com/react-dropzone/backer/24/website)[![](https://opencollective.com/react-dropzone/backer/25/avatar.svg)](https://opencollective.com/react-dropzone/backer/25/website)[![](https://opencollective.com/react-dropzone/backer/26/avatar.svg)](https://opencollective.com/react-dropzone/backer/26/website)[![](https://opencollective.com/react-dropzone/backer/27/avatar.svg)](https://opencollective.com/react-dropzone/backer/27/website)[![](https://opencollective.com/react-dropzone/backer/28/avatar.svg)](https://opencollective.com/react-dropzone/backer/28/website)[![](https://opencollective.com/react-dropzone/backer/29/avatar.svg)](https://opencollective.com/react-dropzone/backer/29/website)

### 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)]

[![](https://opencollective.com/react-dropzone/sponsor/0/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/0/website)[![](https://opencollective.com/react-dropzone/sponsor/1/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/1/website)[![](https://opencollective.com/react-dropzone/sponsor/2/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/2/website)[![](https://opencollective.com/react-dropzone/sponsor/3/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/3/website)[![](https://opencollective.com/react-dropzone/sponsor/4/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/4/website)[![](https://opencollective.com/react-dropzone/sponsor/5/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/5/website)[![](https://opencollective.com/react-dropzone/sponsor/6/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/6/website)[![](https://opencollective.com/react-dropzone/sponsor/7/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/7/website)[![](https://opencollective.com/react-dropzone/sponsor/8/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/8/website)[![](https://opencollective.com/react-dropzone/sponsor/9/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/9/website)[![](https://opencollective.com/react-dropzone/sponsor/10/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/10/website)[![](https://opencollective.com/react-dropzone/sponsor/11/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/11/website)[![](https://opencollective.com/react-dropzone/sponsor/12/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/12/website)[![](https://opencollective.com/react-dropzone/sponsor/13/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/13/website)[![](https://opencollective.com/react-dropzone/sponsor/14/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/14/website)[![](https://opencollective.com/react-dropzone/sponsor/15/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/15/website)[![](https://opencollective.com/react-dropzone/sponsor/16/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/16/website)[![](https://opencollective.com/react-dropzone/sponsor/17/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/17/website)[![](https://opencollective.com/react-dropzone/sponsor/18/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/18/website)[![](https://opencollective.com/react-dropzone/sponsor/19/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/19/website)[![](https://opencollective.com/react-dropzone/sponsor/20/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/20/website)[![](https://opencollective.com/react-dropzone/sponsor/21/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/21/website)[![](https://opencollective.com/react-dropzone/sponsor/22/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/22/website)[![](https://opencollective.com/react-dropzone/sponsor/23/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/23/website)[![](https://opencollective.com/react-dropzone/sponsor/24/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/24/website)[![](https://opencollective.com/react-dropzone/sponsor/25/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/25/website)[![](https://opencollective.com/react-dropzone/sponsor/26/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/26/website)[![](https://opencollective.com/react-dropzone/sponsor/27/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/27/website)[![](https://opencollective.com/react-dropzone/sponsor/28/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/28/website)[![](https://opencollective.com/react-dropzone/sponsor/29/avatar.svg)](https://opencollective.com/react-dropzone/sponsor/29/website)

## License

MIT

```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.