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

Installation

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

Usage

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


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


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

`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

`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