/react-drop-zone

Simple, elegant & efficient drop-zone component

Primary LanguageJavaScript

react-drop-zone

Simple and easily usable

This package offers a styled version of the component or a render-function version which allows you to control rendering. Both versions trigger an .onDrop(file: HTML5 File, content: String) (file reading can be disabled).

Styled version (open demo)

StyledDropZone

import { StyledDropZone } from 'react-drop-zone'
import 'react-drop-zone/dist/styles.css'

<StyledDropZone
  onDrop={(file, text) => console.log(file, text)}
/>

Bare version (open demo)

import DropZone from 'react-drop-zone'

<DropZone onDrop={(file, text) => console.log(file)}>
{
  ({ over, overDocument }) =>
    <div>
      {
        over ?
          'file is over element' :
        overDocument ?
          'file is over document' :
          'no file'
      }
    </div>
}
</DropZone>

Props

Name Component Description Default
accept both Restricts downloads to an extension type. ---
multiple both Allows multiple files to be selected. (disables file reading!) ---
onDrop (required) both called when a file is dropped or selected. Signature: (file: HTML5File, text: String)
handleClick both Handle click events on the rendered component true
dontRead both Prevents reading the file content, if it's causing problems false
children DropZone Render function that receives ({ over: Boolean, overDocument: Boolean}) false
children StyledDropZone Label on the component Click or drop your file here

Additional API

The function readFileAsText is exported if you need to read a file's text content:

import { StyledDropZone, readFileAsText } from 'react-drop-zone'
import 'react-drop-zone/dist/styles.css'

<StyledDropZone
  dontRead
  onDrop={(file) =>
    !file.name.endsWith('.txt') ?
      'Not a text file' :
      readFileAsText(file)
        .then(text => console.log(file, text))
  }
/>

Details

The component overwrites the onDrag/DragEnter/.../Drop props of the render function child.

The accept attribute

If you need more information, see here: (open developer)

The device allows, for example, accept = ".pdf, image/*"