0.0.3 • Public • Published

HTML5 drop-to-upload component for React

NPM version

A simple React component for "drop-to-upload" feature. File dropped will be returned as ArrayBuffer or Data URI.

It supports Internet Explorer 10 and up, and all major desktop browsers. You can also check up-to-date browser compatibilities at Can I use ___?.

How to use

Install our package thru NPM.

npm install react-drop-to-upload

Add the following code to your React component to import the react-drop-to-upload component.

import DropToUpload from 'react-drop-to-upload';

And in the render loop, add the following JSX code to instantiate the component.

  onDrop={ this.handleDrop }

When a file is dropped, handleDrop will be triggered. For example, the following code use FormData and fetch to upload all dropped files to the server at /upload via HTTP POST.

handleDrop(files) {
  var data = new FormData();
  files.forEach((file, index) => {
    data.append('file' + index, file);
  fetch('/upload', {
    method: 'POST',
    body: data

Additionally, if onDropArrayBuffer or onDropDataURI props are specified, the file will be read as ArrayBuffer and/or data URIs, and then passed to the corresponding handlers.

Supported props

Followings are list of props supported by the component.

Name Supported types Default Description
className String Class name to apply
dropEffect copy, link, move, or none Drop effect to show when onDragOver is emitted
element String or React element "div" Component type of the dropping element
id String HTML ID of the element
onDrop(File[]) Function Handler to call when a file is dropped
onDropArrayBuffer(ArrayBuffer[], File[]) Function Handler to call when a file is dropped and read as ArrayBuffer
onDropDataURI(string[], File[]) Function Handler to call when a file is dropped and read as Data URI
onLeave Function Handler to call when a cursor has left without dropping anything, i.e. onDragLeave
onOver Function Handler to call when a cursor is over with droppable item, i.e. onDragOver
style Map Inline style

Points to note

  • If onDropArrayBuffer is not specified, the component will not issue any I/O operations to read the file content. This also applies to onDropDataURI
  • If both onDropArrayBuffer and onDropDataURI are specified, it will read the file twice by calling FileReader.readAsArrayBuffer and FileReader.readAsDataURL simultaneously

Sample code

import React, { Component } from 'react';
import DropToUpload from 'react-drop-to-upload';
class Page extends Component {
  constructor(props) {
    this.handleDrop = this.handleDrop.bind(this);
    this.handleDropArrayBuffer = this.handleDropArrayBuffer.bind(this);
    this.handleDropDataURI = this.handleDropDataURI.bind(this);
  handleDrop(files) {
    console.log(files.length > 0); // true
    console.log(files[0] instanceof File); // true
  handleDropArrayBuffer(arrayBuffers, files) {
    console.log(files.length > 0); // true
    console.log(files.length === arrayBuffers.length); // true
    console.log(files[0] instanceof File); // true
    console.log(arrayBuffers[0] instanceof ArrayBuffer); // true
  handleDropDataURI(dataURIs, files) {
    console.log(files.length > 0); // true
    console.log(files.length === dataURIs.length); // true
    console.log(files[0] instanceof File); // true
    console.log(typeof dataURIs[0] === 'string'); // true
    console.log(/^data:(.*);(.*),/.test(dataURIs[0])); // true
  render() {
    return (
        onDrop={ this.handleDrop }
        onDropArrayBuffer={ this.handleDropArrayBuffer }
        onDropDataURI={ this.handleDropDataURI }


  • 0.0.1 (2016-09-27)
    • Initial commit


Fork our repository and clone it to your box. Then type npm install, followed by npm run selfhost. A Webpack development server will then up at http://localhost:8080/ for testing and debugging.

We recommend Visual Studio Code with Chrome debugger extension for best debugging experience. Open the workspace with Visual Studio Code and press F5 to start debugging in Chrome.

Like us? Please star our NPM package and GitHub repository.

Don't feel quite right? Please file a wish or an issue to us.

Want to give us a hand? Please look at our issue list and submit pull requests.

Package Sidebar


npm i test-do-not-use-react-drop-to-upload

Weekly Downloads






Last publish


  • compulim