React-drop-zone NPM

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))
  }
/>