react-dropzone

What is react-dropzone?

The react-dropzone npm package is a simple and highly customizable dropzone component for React applications. It allows users to drag and drop files into an area of a web page or click to select files through the file explorer. It is designed to provide developers with a flexible and easy-to-use interface for handling file uploads.

What are react-dropzone's main functionalities?

Basic File Drop

This feature allows users to create a basic dropzone area where files can be dragged and dropped or selected through a file dialog.

import React from 'react';
import { useDropzone } from 'react-dropzone';

function BasicDropzone() {
  const { getRootProps, getInputProps } = useDropzone();

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  );
}

export default BasicDropzone;

Accepting Specific File Types

This feature allows developers to specify which file types the dropzone will accept, limiting the user to only select or drag those types.

import React from 'react';
import { useDropzone } from 'react-dropzone';

function SpecificTypeDropzone() {
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*'
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some images here, or click to select images</p>
    </div>
  );
}

export default SpecificTypeDropzone;

Styling Dropzone Based on Drag State

This feature allows developers to apply different styles to the dropzone depending on whether files are being dragged over it.

import React from 'react';
import { useDropzone } from 'react-dropzone';

function StyledDropzone() {
  const { getRootProps, getInputProps, isDragActive } = useDropzone();

  return (
    <div {...getRootProps()} style={{
      border: '2px dashed #eeeeee',
      backgroundColor: isDragActive ? '#e0e0e0' : '#fafafa',
      padding: '20px'
    }}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
}

export default StyledDropzone;

Handling File Previews

This feature allows developers to handle file previews by creating image thumbnails for dropped files.

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

function FilePreviewDropzone() {
  const [files, setFiles] = useState([]);
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
    }
  });

  const images = files.map(file => (
    <div key={file.name}>
      <img src={file.preview} style={{ width: '200px' }} alt='preview' />
    </div>
  ));

  return (
    <section className='container'>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        {images}
      </aside>
    </section>
  );
}

export default FilePreviewDropzone;

Other packages similar to react-dropzone

dropzone

Dropzone is a standalone JavaScript library that provides drag-and-drop file uploads with image previews. It's more feature-rich out of the box compared to react-dropzone, but it's not a React component by default, which means it might require additional integration effort in React applications.

react-dropzone-uploader

React Dropzone Uploader is a React component that provides a dropzone as well as file previews and upload status. It offers more built-in features for handling uploads compared to react-dropzone, but it might be less flexible if you need to heavily customize the upload behavior.

filepond

FilePond is a flexible and fun JavaScript file upload library that can be turned into a React component using react-filepond. It provides a rich set of features like image optimization, file validation, and multiple file handling. It's a more comprehensive solution compared to react-dropzone but may be heavier if you only need a simple dropzone.

README

react-dropzone

Simple HTML5 drag-drop zone for files with React.js.

Try it out here: http://okonet.ru/react-dropzone/

Installation

The easiest way to use react-dropzone is to install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm install --save react-dropzone

Create a standalone module using WebPack:

> npm install
> webpack

React 0.13 users

Vesion 3.x is not compatible with React 0.13. If you can't upgrade to React 0.14 right now, you should use v 2.x of this package.

npm install --save react-dropzone@2.x

Usage

Simply require('react-dropzone') and specify an onDrop method that accepts an array of dropped files.

By default, the component picks up some default styling to get you started. You can customize <Dropzone> by specifying a style and activeStyle which is applied when a file is dragged over the zone. You can also specify className and activeClassName if you would rather style using CSS.

Example

/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');

var DropzoneDemo = React.createClass({
    onDrop: function (files) {
      console.log('Received files: ', files);
    },

    render: function () {
      return (
          <div>
            <Dropzone onDrop={this.onDrop}>
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
          </div>
      );
    }
});

React.render(<DropzoneDemo />, document.body);

Features

• disableClick - Clicking the <Dropzone> brings up the browser file picker. To disable, set to true.
• multiple - To accept only a single file, set this to false.
• accept - Filters the file types that are valid. It should have a valid MIME type according to input element, for example:
  • application/pdf
  • image/*
  • audio/aiff,audio/midi

To show a preview of the dropped file while it uploads, use the file.preview property. Use <img src={file.preview} /> to display a preview of the image dropped. You can disable the creation of the preview (for example if you drop big files) by setting the disablePreview prop to true.

To trigger the dropzone manually (open the file prompt), call the component's open function.

/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');

var DropzoneDemo = React.createClass({
    getInitialState: function () {
        return {
          files: []
        };
    },

    onDrop: function (files) {
      this.setState({
        files: files
      });
    },

    onOpenClick: function () {
      this.refs.dropzone.open();
    },

    render: function () {
        return (
            <div>
                <Dropzone ref="dropzone" onDrop={this.onDrop}>
                    <div>Try dropping some files here, or click to select files to upload.</div>
                </Dropzone>
                <button type="button" onClick={this.onOpenClick}>
                    Open Dropzone
                </button>
                {this.state.files.length > 0 ? <div>
                <h2>Uploading {this.state.files.length} files...</h2>
                <div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>
                </div> : null}
            </div>
        );
    }
});

React.render(<DropzoneDemo />, document.body);

Uploads

Using react-dropzone is similar to using a file form field, but instead of getting the files property from the field, you listen to the onDrop callback to handle the files. Simple explanation here: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

Specifying the onDrop method, provides you with an array of Files which you can then send to a server. For example, with SuperAgent as a http/ajax library:

    onDrop: function(files){
        var req = request.post('/upload');
        files.forEach((file)=> {
            req.attach(file.name, file);
        });
        req.end(callback);
    }

License

MIT