Nincompoops Producing Methane
    Have ideas to improve npm?Join in the discussion! »

    react-dropzone
    TypeScript icon, indicating that this package has built-in type declarations

    11.3.2 • Public • Published

    react-dropzone logo

    react-dropzone

    npm GitHub Workflow Status codecov Open Collective Open Collective Gitpod Ready-to-Code

    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:

    yarn add react-dropzone

    Usage

    You can either use the hook:

    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 (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {
            isDragActive ?
              <p>Drop the files here ...</p> :
              <p>Drag 'n' drop some files here, or click to select files</p>
          }
        </div>
      )
    }

    IMPORTANT: Under the hood, this lib makes use of hooks, therefore, using it requires React >= 16.8.

    Or the wrapper component for the hook:

    import React from 'react'
    import Dropzone from 'react-dropzone'
    
    <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
      {({getRootProps, getInputProps}) => (
        <section>
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <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 and this issue.

    Furthermore, if you want to access file contents you have to use the FileReader API:

    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 (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
      )
    }

    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 <input>:

    import React from 'react'
    import {useDropzone} from 'react-dropzone'
    
    function MyDropzone() {
      const {getRootProps, getInputProps} = useDropzone()
    
      return (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
      )
    }

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

    <div
      {...getRootProps({
        onClick: event => 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. See Events for more examples.

    Important: if you ommit rendering an <input> 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.:

    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()
      <StyledDiv {...getRootProps({ refKey: 'innerRef' })}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </StyledDiv>
    }

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

    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 {...rootProps}>
          <input {...getInputProps()} />
          <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:

    import React from 'react'
    import {useDropzone} from 'react-dropzone'
    
    function Refs() {
      const {
        getRootProps,
        getInputProps,
        rootRef, // Ref to the `<div>`
        inputRef // Ref to the `<input>`
      } = useDropzone()
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    }

    If you're using the <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:

    import React, {createRef} from 'react'
    import Dropzone from 'react-dropzone'
    
    const dropzoneRef = createRef()
    
    <Dropzone ref={dropzoneRef}>
      {({getRootProps, getInputProps}) => (
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <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 test components that use this library, you may want to use the react-testing-library:

    import React from 'react'
    import Dropzone from 'react-dropzone'
    import { act, fireEvent, render, waitFor } from '@testing-library/react'
    
    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 }) => (
            <div {...getRootProps()}>
              <input {...getInputProps()} />
            </div>
          )}
        </Dropzone>
      )
      const { container, rerender } = render(ui)
      const dropzone = container.querySelector('div')
    
      dispatchEvt(dropzone, 'dragenter', data)
      await flushPromises(rerender, ui)
    
      expect(onDragEnter).toHaveBeenCalled()
    })
    
    async function flushPromises(rerender, ui) {
      await act(() => waitFor(() => rerender(ui)))
    }
    
    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 for testing is not supported at the moment, see #2011.

    More examples for this can be found in react-dropzones own test suites.

    Need image editing?

    React Dropzone integrates perfectly with Doka Image Editor, creating a modern image editing experience. Doka supports crop aspect ratios, resizing, rotating, cropping, annotating, filtering, and much more.

    Checkout the integration example.

    Supported Browsers

    We use browserslist config to state the browser support for this lib, so check it out on browserslist.dev.

    Support

    Backers

    Support us with a monthly donation and help us continue our activities. [Become a backer]

    Sponsors

    Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

    License

    MIT

    Install

    npm i react-dropzone

    DownloadsWeekly Downloads

    1,352,619

    Version

    11.3.2

    License

    MIT

    Unpacked Size

    683 kB

    Total Files

    49

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar