!react-dropzone logo

react-dropzone


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/.

Fork notes

This fork adds support for async validation functions. Please note that the noDragEventsBubbling parameter does _not_ work.

Installation

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

``bash
npm install --save react-dropzone
`
or:
`bash
yarn add react-dropzone
`




Usage

You can either use the hook:

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

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

return (



)
}
`

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

console.log(acceptedFiles)}>
{({getRootProps, getInputProps}) => (


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


)}

`

If you want to access file contents you have to use the FileReader API:

`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 (



)
}
`

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
{...getRootProps({
onClick: event => console.log(event),
role: 'button',
'aria-label': 'drag and drop area',
...
})}
/>
`

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.
See Events for more examples.

Important: if you omit 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:

`jsx static
import React from 'react'
import {useDropzone} from 'react-dropzone'
// NOTE: After v4.0.0, styled components exposes a ref using forwardRef,
// therefore, no need for using innerRef as refKey
import styled from 'styled-components'

const StyledDiv = styled.div
// Some styling here

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




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



}
`

If you're working with Material UI v4 and would like to apply the root props on some component that does not expose a ref, use RootRef:

`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()






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




}
`

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