Git Product home page Git Product logo

react-dropzone's Introduction

react-dropzone Build Status npm version codecov OpenCollective OpenCollective

==============

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 [email protected]

Usage

Simply require('react-dropzone') and specify an onDrop method which accepts two arguments. The first argument represents the accepted files and the second argument the rejected files.

The onDrop method gets always called if a file was uploaded, regardless if it was accepted or rejected. The library provides two additional methods named onDropAccepted and onDropRejected. The onDropAccepted method will be called if all dropped files were accepted and the onDropRejected method will be called if any of the dropped files was rejected.

Example

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

var DropzoneDemo = React.createClass({
    onDrop: function (acceptedFiles, rejectedFiles) {
      console.log('Accepted files: ', acceptedFiles);
      console.log('Rejected files: ', rejectedFiles);
    },

    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);

Reacting to user input

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

You have a third option : providing a function that returns the component's children.

<Dropzone>
  {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
    if (isDragActive) {
      return "This file is authorized";
    }
    if (isDragReject) {
      return "This file is not authorized";
    }
    return acceptedFiles.length || rejectedFiles.length
      ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
      : "Try dropping some files";
  }}
</Dropzone>

Features

  • preventDropOnDocument [Boolean | **true**] — When a file is dropped outside of any <Dropzone> instance, whether to prevent the browser from navigating to it.
  • disableClick [Boolean | **false**] — Clicking the <Dropzone> brings up the browser file picker.
  • multiple [Boolean | **true**] — Accept multiple files
  • minSize [Number | **0**] — Only accept file(s) larger than minSize bytes.
  • maxSize [Number | **Infinity**] — Only accept file(s) smaller than maxSize bytes.
  • accept - Accept only specified mime types. Must be a valid MIME type according to input element specification, 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.

Manual Upload

  • To trigger the dropzone manually (open the file prompt), call the component's open function.
  • The completion handler for the open function is also the onDrop function.
/** @jsx React.DOM */
var React = require('react');
var Dropzone = require('react-dropzone');

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

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

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

    render: function () {
        return (
            <div>
                <Dropzone ref={(node) => { this.dropzone = node; }} 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(acceptedFiles){
        var req = request.post('/upload');
        acceptedFiles.forEach((file)=> {
            req.attach(file.name, file);
        });
        req.end(callback);
    }

Support

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

MIT

react-dropzone's People

Contributors

akkie avatar anuragces avatar appleboy avatar chrisbuttery avatar dimitarchristoff avatar donavon avatar frankwallis avatar greenkeeper[bot] avatar ialex avatar idolize avatar indraneel avatar jonathanhudak avatar maffoobristol avatar marnusw avatar michaellopez avatar mwolson avatar nfcampos avatar nuc avatar okonet avatar paramaggarwal avatar piamancini avatar pomax avatar robmclarty avatar subtirelumihail avatar tikotzky avatar tmarshall avatar toshipon avatar vlindhol avatar voronianski avatar wmartins avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.