Simple HTML5 drag-drop zone to drop files on.

import React from 'react';
import Dropzone from 'react-dropzone';

export default class DropzoneDemo extends React.Component {

  onDrop(acceptedFiles, rejectedFiles) {
    console.log("Accepted files: ", acceptedFiles);
    console.log("Rejected files: ", rejectedFiles);

  render() {
    return (
        <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}>
          <div>This dropzone accepts only images. Try dropping some here, or click to select files to upload.</div>


In the onDrop you can then process the files for uploading.

react-dropzone Source (GitHub) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.