react-dropzone 3.13.0 → 3.13.4

package/.eslintrc

@@ -1,60 +1,9 @@
 {
-  "parser": "babel-eslint",
   "extends": [
-    "airbnb"
+    "okonet"
   ],
-  "env": {
-    // We write for browser
-    "browser": true,
-    // using CommonJS imports
-    "node": true,
-    // We use Jest for tests
-    "jest": true,
-    // And we use ES6 features
-    "es6": true
-  },
-  "ecmaFeatures": {
-    "jsx": true
-  },
   "rules": {
-    "indent": [
-      2,
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "comma-dangle": [
-      2,
-      "never"
-    ],
-    "jsx-quotes": [
-      2,
-      "prefer-double"
-    ],
-    "padded-blocks": [
-      0,
-      "never"
-    ],
-    "no-console": 2,
-    "no-debugger": 2,
-    "no-plusplus": 0,
-    "no-prototype-builtins": 0,
-    "guard-for-in": 0,
-    "object-curly-spacing": [
-      2,
-      "always"
-    ],
-    "max-len": [
-      2,
-      {
-        "code": 120,
-        "ignoreComments": true
-      }
-    ],
-
     // React
-    "react/jsx-filename-extension": 0,
     "react/forbid-prop-types": [
       2,
       {
@@ -73,9 +22,9 @@
       2,
       {
         "devDependencies": [
-          "**/webpack*.js",
+          "webpack*.js",
           "**/*.spec.js",
-          "./mocha-environment.js"
+          "**/testSetup.js"
         ]
       }
     ]

package/.travis.yml

@@ -1,14 +1,9 @@
-sudo: false
 language: node_js
-cache:
-  directories:
-    - node_modules
+cache: yarn
 notifications:
   email: false
 node_js:
-  - 6
-before_install:
-  - npm i -g npm
+  - '7'
 before_script:
   - npm prune
 after_success:

package/README.md

@@ -1,13 +1,14 @@
-![react-dropzone logo](logo/logo.svg)
+![react-dropzone logo](https://raw.githubusercontent.com/okonet/react-dropzone/master/logo/logo.png)
 
 # react-dropzone
 
-[![Build Status](https://travis-ci.org/okonet/react-dropzone.svg?branch=master)](https://travis-ci.org/okonet/rect-dropzone) [![npm version](https://badge.fury.io/js/react-dropzone.svg)](https://badge.fury.io/js/react-dropzone) [![codecov](https://codecov.io/gh/okonet/react-dropzone/branch/master/graph/badge.svg)](https://codecov.io/gh/okonet/react-dropzone) [![OpenCollective](https://opencollective.com/react-dropzone/backers/badge.svg)](#backers) 
+[![Build Status](https://travis-ci.org/okonet/react-dropzone.svg?branch=master)](https://travis-ci.org/okonet/react-dropzone) [![npm version](https://badge.fury.io/js/react-dropzone.svg)](https://badge.fury.io/js/react-dropzone) [![codecov](https://codecov.io/gh/okonet/react-dropzone/branch/master/graph/badge.svg)](https://codecov.io/gh/okonet/react-dropzone) [![OpenCollective](https://opencollective.com/react-dropzone/backers/badge.svg)](#backers) 
 [![OpenCollective](https://opencollective.com/react-dropzone/sponsors/badge.svg)](#sponsors)
 
 Simple HTML5-compliant drag'n'drop zone for files built with React.js.
 
-Demo: http://okonet.ru/react-dropzone/
+Documentation and examples: https://react-dropzone.js.org
+Source code: https://github.com/okonet/react-dropzone/
 
 ---
 
@@ -39,81 +40,6 @@ Files accepted or rejected based on `accept` prop. This must be a valid [MIME ty
 
 Please note that `onDrop` method will always be called regardless if dropped file was accepted or rejected. 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.
 
-## Styling Dropzone
-
-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.
-
-## Updating styles and contents based on user input
-
-By providing a function that returns the component's children you can not only style Dropzone appropriately but also render appropriate content.
-
-```javascript
-<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>
-```
-
-## Programmatically open the file dialog
-* 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
-/** @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);
-```
-
-*Important*: `react-dropzone` doesn't manage dropped files by itself. You need to destroy the object URL yourself whenever you don't need the `preview` by calling `window.URL.revokeObjectURL(file.preview);` to avoid memory leaks.
-
-## 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](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
@@ -128,6 +54,14 @@ Specifying the `onDrop` method, provides you with an array of [Files](https://de
     }
 ```
 
+## PropTypes
+
+See https://react-dropzone.netlify.com/#proptypes
+
+### Word of caution when working with previews
+
+*Important*: `react-dropzone` doesn't manage dropped files. You need to destroy the object URL yourself whenever you don't need the `preview` by calling `window.URL.revokeObjectURL(file.preview);` to avoid memory leaks.
+
 ## Support
 
 ### Backers

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-angular'] }

package/dist/index.js

@@ -84,6 +84,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 	
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 	
 	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -92,14 +94,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var supportMultiple = typeof document !== 'undefined' && document && document.createElement ? 'multiple' in document.createElement('input') : true;
 	
+	function fileAccepted(file, accept) {
+	  // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
+	  // that MIME type will always be accepted
+	  return file.type === 'application/x-moz-file' || (0, _attrAccept2.default)(file, accept);
+	}
+	
 	var Dropzone = function (_React$Component) {
 	  _inherits(Dropzone, _React$Component);
 	
 	  _createClass(Dropzone, null, [{
 	    key: 'onDocumentDragOver',
-	    value: function onDocumentDragOver(e) {
+	    value: function onDocumentDragOver(evt) {
 	      // allow the entire document to be a drag target
-	      e.preventDefault();
+	      evt.preventDefault();
 	    }
 	  }]);
 	
@@ -108,9 +116,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	    var _this = _possibleConstructorReturn(this, (Dropzone.__proto__ || Object.getPrototypeOf(Dropzone)).call(this, props, context));
 	
-	    _this.renderChildren = function (children) {
+	    _this.renderChildren = function (children, isDragActive, isDragReject) {
 	      if (typeof children === 'function') {
-	        return children(_this.state);
+	        return children(_extends({}, _this.state, { isDragActive: isDragActive, isDragReject: isDragReject }));
 	      }
 	      return children;
 	    };
@@ -123,11 +131,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    _this.onDragOver = _this.onDragOver.bind(_this);
 	    _this.onDrop = _this.onDrop.bind(_this);
 	    _this.onFileDialogCancel = _this.onFileDialogCancel.bind(_this);
-	    _this.fileAccepted = _this.fileAccepted.bind(_this);
 	    _this.setRef = _this.setRef.bind(_this);
+	    _this.setRefs = _this.setRefs.bind(_this);
+	    _this.onInputElementClick = _this.onInputElementClick.bind(_this);
 	    _this.isFileDialogActive = false;
 	    _this.state = {
-	      isDragActive: false,
+	      draggedFiles: [],
 	      acceptedFiles: [],
 	      rejectedFiles: []
 	    };
@@ -145,6 +154,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        document.addEventListener('dragover', Dropzone.onDocumentDragOver, false);
 	        document.addEventListener('drop', this.onDocumentDrop, false);
 	      }
+	      this.fileInputEl.addEventListener('click', this.onInputElementClick, false);
 	      // Tried implementing addEventListener, but didn't work out
 	      document.body.onfocus = this.onFileDialogCancel;
 	    }
@@ -157,91 +167,85 @@ return /******/ (function(modules) { // webpackBootstrap
 	        document.removeEventListener('dragover', Dropzone.onDocumentDragOver);
 	        document.removeEventListener('drop', this.onDocumentDrop);
 	      }
+	      this.fileInputEl.removeEventListener('click', this.onInputElementClick, false);
 	      // Can be replaced with removeEventListener, if addEventListener works
 	      document.body.onfocus = null;
 	    }
 	  }, {
 	    key: 'onDocumentDrop',
-	    value: function onDocumentDrop(e) {
-	      if (this.node.contains(e.target)) {
+	    value: function onDocumentDrop(evt) {
+	      if (this.node.contains(evt.target)) {
 	        // if we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
 	        return;
 	      }
-	      e.preventDefault();
+	      evt.preventDefault();
 	      this.dragTargets = [];
 	    }
 	  }, {
 	    key: 'onDragStart',
-	    value: function onDragStart(e) {
+	    value: function onDragStart(evt) {
 	      if (this.props.onDragStart) {
-	        this.props.onDragStart.call(this, e);
+	        this.props.onDragStart.call(this, evt);
 	      }
 	    }
 	  }, {
 	    key: 'onDragEnter',
-	    value: function onDragEnter(e) {
-	      e.preventDefault();
+	    value: function onDragEnter(evt) {
+	      evt.preventDefault();
 	
 	      // Count the dropzone and any children that are entered.
-	      if (this.dragTargets.indexOf(e.target) === -1) {
-	        this.dragTargets.push(e.target);
+	      if (this.dragTargets.indexOf(evt.target) === -1) {
+	        this.dragTargets.push(evt.target);
 	      }
 	
-	      var allFilesAccepted = this.allFilesAccepted((0, _getDataTransferItems2.default)(e, this.props.multiple));
-	
-	      this.setState({
-	        isDragActive: allFilesAccepted,
-	        isDragReject: !allFilesAccepted
-	      });
+	      this.setState({ draggedFiles: (0, _getDataTransferItems2.default)(evt) });
 	
 	      if (this.props.onDragEnter) {
-	        this.props.onDragEnter.call(this, e);
+	        this.props.onDragEnter.call(this, evt);
 	      }
 	    }
 	  }, {
 	    key: 'onDragOver',
-	    value: function onDragOver(e) {
+	    value: function onDragOver(evt) {
 	      // eslint-disable-line class-methods-use-this
-	      e.preventDefault();
-	      e.stopPropagation();
+	      evt.preventDefault();
+	      evt.stopPropagation();
 	      try {
-	        e.dataTransfer.dropEffect = 'copy'; // eslint-disable-line no-param-reassign
+	        evt.dataTransfer.dropEffect = 'copy'; // eslint-disable-line no-param-reassign
 	      } catch (err) {
 	        // continue regardless of error
 	      }
 	
 	      if (this.props.onDragOver) {
-	        this.props.onDragOver.call(this, e);
+	        this.props.onDragOver.call(this, evt);
 	      }
 	      return false;
 	    }
 	  }, {
 	    key: 'onDragLeave',
-	    value: function onDragLeave(e) {
+	    value: function onDragLeave(evt) {
 	      var _this2 = this;
 	
-	      e.preventDefault();
+	      evt.preventDefault();
 	
 	      // Only deactivate once the dropzone and all children have been left.
 	      this.dragTargets = this.dragTargets.filter(function (el) {
-	        return el !== e.target && _this2.node.contains(el);
+	        return el !== evt.target && _this2.node.contains(el);
 	      });
 	      if (this.dragTargets.length > 0) {
 	        return;
 	      }
 	
-	      this.setState({
-	        isDragActive: false,
-	        isDragReject: false
-	      });
+	      // Clear dragging files state
+	      this.setState({ draggedFiles: [] });
 	
 	      if (this.props.onDragLeave) {
-	        this.props.onDragLeave.call(this, e);
+	        this.props.onDragLeave.call(this, evt);
 	      }
 	    }
 	  }, {
 	    key: 'onDrop',
-	    value: function onDrop(e) {
+	    value: function onDrop(evt) {
 	      var _this3 = this;
 	
 	      var _props = this.props,
@@ -249,14 +253,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	          onDropAccepted = _props.onDropAccepted,
 	          onDropRejected = _props.onDropRejected,
 	          multiple = _props.multiple,
-	          disablePreview = _props.disablePreview;
+	          disablePreview = _props.disablePreview,
+	          accept = _props.accept;
 	
-	      var fileList = (0, _getDataTransferItems2.default)(e, multiple);
+	      var fileList = (0, _getDataTransferItems2.default)(evt);
 	      var acceptedFiles = [];
 	      var rejectedFiles = [];
 	
 	      // Stop default browser behavior
-	      e.preventDefault();
+	      evt.preventDefault();
 	
 	      // Reset the counter along with the drag on a drop.
 	      this.dragTargets = [];
@@ -273,46 +278,67 @@ return /******/ (function(modules) { // webpackBootstrap
 	          }
 	        }
 	
-	        if (_this3.fileAccepted(file) && _this3.fileMatchSize(file)) {
+	        if (fileAccepted(file, accept) && _this3.fileMatchSize(file)) {
 	          acceptedFiles.push(file);
 	        } else {
 	          rejectedFiles.push(file);
 	        }
 	      });
 	
+	      if (!multiple) {
+	        // if not in multi mode add any extra accepted files to rejected.
+	        // This will allow end users to easily ignore a multi file drop in "single" mode.
+	        rejectedFiles.push.apply(rejectedFiles, _toConsumableArray(acceptedFiles.splice(1)));
+	      }
+	
 	      if (onDrop) {
-	        onDrop.call(this, acceptedFiles, rejectedFiles, e);
+	        onDrop.call(this, acceptedFiles, rejectedFiles, evt);
 	      }
 	
 	      if (rejectedFiles.length > 0 && onDropRejected) {
-	        onDropRejected.call(this, rejectedFiles, e);
+	        onDropRejected.call(this, rejectedFiles, evt);
 	      }
 	
 	      if (acceptedFiles.length > 0 && onDropAccepted) {
-	        onDropAccepted.call(this, acceptedFiles, e);
+	        onDropAccepted.call(this, acceptedFiles, evt);
 	      }
 	
+	      // Clear files value
+	      this.draggedFiles = null;
+	
 	      // Reset drag state
 	      this.setState({
-	        isDragActive: false,
-	        isDragReject: false,
+	        draggedFiles: [],
 	        acceptedFiles: acceptedFiles,
 	        rejectedFiles: rejectedFiles
 	      });
 	    }
 	  }, {
 	    key: 'onClick',
-	    value: function onClick(e) {
+	    value: function onClick(evt) {
 	      var _props2 = this.props,
 	          onClick = _props2.onClick,
 	          disableClick = _props2.disableClick;
 	
 	      if (!disableClick) {
-	        e.stopPropagation();
-	        this.open();
+	        evt.stopPropagation();
+	
 	        if (onClick) {
-	          onClick.call(this, e);
+	          onClick.call(this, evt);
 	        }
+	
+	        // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
+	        // this is so react can handle state changes in the onClick prop above above
+	        // see: https://github.com/okonet/react-dropzone/issues/450
+	        setTimeout(this.open.bind(this), 0);
+	      }
+	    }
+	  }, {
+	    key: 'onInputElementClick',
+	    value: function onInputElementClick(evt) {
+	      evt.stopPropagation();
+	      if (this.props.inputProps && this.props.inputProps.onClick) {
+	        this.props.inputProps.onClick();
 	      }
 	    }
 	  }, {
@@ -342,11 +368,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.node = ref;
 	    }
 	  }, {
-	    key: 'fileAccepted',
-	    value: function fileAccepted(file) {
-	      // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
-	      // that MIME type will always be accepted
-	      return file.type === 'application/x-moz-file' || (0, _attrAccept2.default)(file, this.props.accept);
+	    key: 'setRefs',
+	    value: function setRefs(ref) {
+	      this.fileInputEl = ref;
 	    }
 	  }, {
 	    key: 'fileMatchSize',
@@ -356,7 +380,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'allFilesAccepted',
 	    value: function allFilesAccepted(files) {
-	      return files.every(this.fileAccepted);
+	      var _this4 = this;
+	
+	      return files.every(function (file) {
+	        return fileAccepted(file, _this4.props.accept);
+	      });
 	    }
 	
 	    /**
@@ -375,8 +403,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'render',
 	    value: function render() {
-	      var _this4 = this;
-	
 	      var _props3 = this.props,
 	          accept = _props3.accept,
 	          activeClassName = _props3.activeClassName,
@@ -393,10 +419,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	          style = rest.style,
 	          props = _objectWithoutProperties(rest, ['activeStyle', 'className', 'rejectStyle', 'style']);
 	
-	      var _state = this.state,
-	          isDragActive = _state.isDragActive,
-	          isDragReject = _state.isDragReject;
+	      var draggedFiles = this.state.draggedFiles;
 	
+	      var filesCount = draggedFiles.length;
+	      var isMultipleAllowed = multiple || filesCount <= 1;
+	      var isDragActive = filesCount > 0 && this.allFilesAccepted(draggedFiles);
+	      var isDragReject = filesCount > 0 && (!isDragActive || !isMultipleAllowed);
 	
 	      className = className || '';
 	
@@ -442,9 +470,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        type: 'file',
 	        style: { display: 'none' },
 	        multiple: supportMultiple && multiple,
-	        ref: function ref(el) {
-	          return _this4.fileInputEl = el;
-	        }, // eslint-disable-line
+	        ref: this.setRefs,
 	        onChange: this.onDrop
 	      };
 	
@@ -473,7 +499,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          onDrop: this.onDrop,
 	          ref: this.setRef
 	        }),
-	        this.renderChildren(children),
+	        this.renderChildren(children, isDragActive, isDragReject),
 	        _react2.default.createElement('input', _extends({}, inputProps /* expand user provided inputProps first so inputAttributes override them */, inputAttributes))
 	      );
 	    }
@@ -801,6 +827,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	process.removeListener = noop;
 	process.removeAllListeners = noop;
 	process.emit = noop;
+	process.prependListener = noop;
+	process.prependOnceListener = noop;
+	
+	process.listeners = function (name) { return [] }
 	
 	process.binding = function (name) {
 	    throw new Error('process.binding is not supported');
@@ -842,8 +872,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	});
 	exports.default = getDataTransferFiles;
 	function getDataTransferFiles(event) {
-	  var isMultipleAllowed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-	
 	  var dataTransferItemsList = [];
 	  if (event.dataTransfer) {
 	    var dt = event.dataTransfer;
@@ -857,11 +885,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	  } else if (event.target && event.target.files) {
 	    dataTransferItemsList = event.target.files;
 	  }
-	
-	  if (dataTransferItemsList.length > 0) {
-	    dataTransferItemsList = isMultipleAllowed ? dataTransferItemsList : [dataTransferItemsList[0]];
-	  }
-	
 	  // Convert from DataTransferItemsList to the native Array
 	  return Array.prototype.slice.call(dataTransferItemsList);
 	}