Notable Pottery Manufacturer


    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.


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

    DownloadsWeekly Downloads






    Last publish


    • compulim