react-dropzone 4.2.10 → 4.3.0

package/dist/es/index.js

@@ -16,7 +16,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems, isIeOrEdge } from './utils';
+import { supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge } from './utils';
 import styles from './utils/styles';
 
 var Dropzone = function (_React$Component) {
@@ -119,6 +119,8 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'onDragEnter',
     value: function onDragEnter(evt) {
+      var _this2 = this;
+
       evt.preventDefault();
 
       // Count the dropzone and any children that are entered.
@@ -126,11 +128,12 @@ var Dropzone = function (_React$Component) {
         this.dragTargets.push(evt.target);
       }
 
-      this.setState({
-        isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
-        draggedFiles: getDataTransferItems(evt)
+      Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
+        _this2.setState({
+          isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
+          draggedFiles: draggedFiles
+        });
       });
-
       if (this.props.onDragEnter) {
         this.props.onDragEnter.call(this, evt);
       }
@@ -158,13 +161,13 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'onDragLeave',
     value: function onDragLeave(evt) {
-      var _this2 = this;
+      var _this3 = this;
 
       evt.preventDefault();
 
       // Only deactivate once the dropzone and all children have been left.
       this.dragTargets = this.dragTargets.filter(function (el) {
-        return el !== evt.target && _this2.node.contains(el);
+        return el !== evt.target && _this3.node.contains(el);
       });
       if (this.dragTargets.length > 0) {
         return;
@@ -183,7 +186,7 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'onDrop',
     value: function onDrop(evt) {
-      var _this3 = this;
+      var _this4 = this;
 
       var _props = this.props,
           onDrop = _props.onDrop,
@@ -191,64 +194,65 @@ var Dropzone = function (_React$Component) {
           onDropRejected = _props.onDropRejected,
           multiple = _props.multiple,
           disablePreview = _props.disablePreview,
-          accept = _props.accept;
-
-      var fileList = getDataTransferItems(evt);
-      var acceptedFiles = [];
-      var rejectedFiles = [];
+          accept = _props.accept,
+          getDataTransferItems = _props.getDataTransferItems;
 
       // Stop default browser behavior
+
       evt.preventDefault();
 
       // Reset the counter along with the drag on a drop.
       this.dragTargets = [];
       this.isFileDialogActive = false;
 
-      fileList.forEach(function (file) {
-        if (!disablePreview) {
-          try {
-            file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
-          } catch (err) {
-            if (process.env.NODE_ENV !== 'production') {
-              console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
-            }
-          }
-        }
+      // Clear files value
+      this.draggedFiles = null;
 
-        if (fileAccepted(file, accept) && fileMatchSize(file, _this3.props.maxSize, _this3.props.minSize)) {
-          acceptedFiles.push(file);
-        } else {
-          rejectedFiles.push(file);
-        }
+      // Reset drag state
+      this.setState({
+        isDragActive: false,
+        draggedFiles: []
       });
 
-      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)));
-      }
+      Promise.resolve(getDataTransferItems(evt)).then(function (fileList) {
+        var acceptedFiles = [];
+        var rejectedFiles = [];
+
+        fileList.forEach(function (file) {
+          if (!disablePreview) {
+            try {
+              file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
+            } catch (err) {
+              if (process.env.NODE_ENV !== 'production') {
+                console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
+              }
+            }
+          }
 
-      if (onDrop) {
-        onDrop.call(this, acceptedFiles, rejectedFiles, evt);
-      }
+          if (fileAccepted(file, accept) && fileMatchSize(file, _this4.props.maxSize, _this4.props.minSize)) {
+            acceptedFiles.push(file);
+          } else {
+            rejectedFiles.push(file);
+          }
+        });
 
-      if (rejectedFiles.length > 0 && onDropRejected) {
-        onDropRejected.call(this, rejectedFiles, evt);
-      }
+        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 (acceptedFiles.length > 0 && onDropAccepted) {
-        onDropAccepted.call(this, acceptedFiles, evt);
-      }
+        if (onDrop) {
+          onDrop.call(_this4, acceptedFiles, rejectedFiles, evt);
+        }
 
-      // Clear files value
-      this.draggedFiles = null;
+        if (rejectedFiles.length > 0 && onDropRejected) {
+          onDropRejected.call(_this4, rejectedFiles, evt);
+        }
 
-      // Reset drag state
-      this.setState({
-        isDragActive: false,
-        draggedFiles: [],
-        acceptedFiles: acceptedFiles,
-        rejectedFiles: rejectedFiles
+        if (acceptedFiles.length > 0 && onDropAccepted) {
+          onDropAccepted.call(_this4, acceptedFiles, evt);
+        }
       });
     }
   }, {
@@ -286,7 +290,7 @@ var Dropzone = function (_React$Component) {
   }, {
     key: 'onFileDialogCancel',
     value: function onFileDialogCancel() {
-      var _this4 = this;
+      var _this5 = this;
 
       // timeout will not recognize context of this method
       var onFileDialogCancel = this.props.onFileDialogCancel;
@@ -294,13 +298,13 @@ var Dropzone = function (_React$Component) {
 
       if (this.isFileDialogActive) {
         setTimeout(function () {
-          if (_this4.fileInputEl != null) {
+          if (_this5.fileInputEl != null) {
             // Returns an object as FileList
-            var files = _this4.fileInputEl.files;
+            var files = _this5.fileInputEl.files;
 
 
             if (!files.length) {
-              _this4.isFileDialogActive = false;
+              _this5.isFileDialogActive = false;
             }
           }
 
@@ -384,14 +388,14 @@ var Dropzone = function (_React$Component) {
       if (noStyles) {
         style = styles.default;
         activeStyle = styles.active;
-        acceptStyle = style.active;
+        acceptStyle = styles.active;
         rejectStyle = styles.rejected;
         disabledStyle = styles.disabled;
       }
 
-      var appliedStyle = _extends({}, style);
+      var appliedStyle = _extends({ position: 'relative' }, style);
       if (activeStyle && isDragActive) {
-        appliedStyle = _extends({}, style, activeStyle);
+        appliedStyle = _extends({}, appliedStyle, activeStyle);
       }
       if (acceptStyle && isDragAccept) {
         appliedStyle = _extends({}, appliedStyle, acceptStyle);
@@ -400,14 +404,22 @@ var Dropzone = function (_React$Component) {
         appliedStyle = _extends({}, appliedStyle, rejectStyle);
       }
       if (disabledStyle && disabled) {
-        appliedStyle = _extends({}, style, disabledStyle);
+        appliedStyle = _extends({}, appliedStyle, disabledStyle);
       }
 
       var inputAttributes = {
         accept: accept,
         disabled: disabled,
         type: 'file',
-        style: { display: 'none' },
+        style: _extends({
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          opacity: 0.00001,
+          pointerEvents: 'none'
+        }, inputProps.style),
         multiple: supportMultiple && multiple,
         ref: this.setRefs,
         onChange: this.onDrop,
@@ -429,7 +441,8 @@ var Dropzone = function (_React$Component) {
           onFileDialogCancel = props.onFileDialogCancel,
           maxSize = props.maxSize,
           minSize = props.minSize,
-          divProps = _objectWithoutProperties(props, ['acceptedFiles', 'preventDropOnDocument', 'disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected', 'onFileDialogCancel', 'maxSize', 'minSize']);
+          getDataTransferItems = props.getDataTransferItems,
+          divProps = _objectWithoutProperties(props, ['acceptedFiles', 'preventDropOnDocument', 'disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected', 'onFileDialogCancel', 'maxSize', 'minSize', 'getDataTransferItems']);
 
       return React.createElement(
         'div',
@@ -465,7 +478,7 @@ Dropzone.propTypes = {
    * Windows. In some cases there might not be a mime type set at all.
    * See: https://github.com/react-dropzone/react-dropzone/issues/276
    */
-  accept: PropTypes.string,
+  accept: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 
   /**
    * Contents of the dropzone
@@ -567,6 +580,13 @@ Dropzone.propTypes = {
    */
   disabledStyle: PropTypes.object,
 
+  /**
+   * getDataTransferItems handler
+   * @param {Event} event
+   * @returns {Array} array of File objects
+   */
+  getDataTransferItems: PropTypes.func,
+
   /**
    * onClick callback
    * @param {Event} event
@@ -619,7 +639,9 @@ Dropzone.defaultProps = {
   disabled: false,
   disablePreview: false,
   disableClick: false,
+  inputProps: {},
   multiple: true,
   maxSize: Infinity,
-  minSize: 0
+  minSize: 0,
+  getDataTransferItems: defaultGetDataTransferItem
 };

package/dist/es/utils/index.js

@@ -6,6 +6,7 @@ export function getDataTransferItems(event) {
   var dataTransferItemsList = [];
   if (event.dataTransfer) {
     var dt = event.dataTransfer;
+
     if (dt.files && dt.files.length) {
       dataTransferItemsList = dt.files;
     } else if (dt.items && dt.items.length) {
@@ -16,6 +17,7 @@ export function getDataTransferItems(event) {
   } else if (event.target && event.target.files) {
     dataTransferItemsList = event.target.files;
   }
+
   // Convert from DataTransferItemsList to the native Array
   return Array.prototype.slice.call(dataTransferItemsList);
 }