react-dropzone 4.2.12 → 5.0.1

package/package.json

@@ -26,11 +26,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "5.5 KB"
+      "limit": "6 KB"
     },
     {
       "path": "dist/es/index.js",
-      "limit": "3 KB"
+      "limit": "4 KB"
     }
   ],
   "lint-staged": {
@@ -74,7 +74,7 @@
     "react": ">=0.14.0"
   },
   "dependencies": {
-    "attr-accept": "^1.0.3",
+    "attr-accept": "^1.1.3",
     "prop-types": "^15.5.7"
   },
   "devDependencies": {
@@ -123,5 +123,5 @@
       "path": "@commitlint/prompt"
     }
   },
-  "version": "4.2.12"
+  "version": "5.0.1"
 }

package/src/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropzone basics should render children 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>some content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
-
-exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
-
-exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>Content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropzone basics should render children 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>some content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
+
+exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
+
+exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>Content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;

package/src/index.js

@@ -8,7 +8,7 @@ import {
   allFilesAccepted,
   fileMatchSize,
   onDocumentDragOver,
-  getDataTransferItems,
+  getDataTransferItems as defaultGetDataTransferItem,
   isIeOrEdge
 } from './utils'
 import styles from './utils/styles'
@@ -47,7 +47,9 @@ class Dropzone extends React.Component {
       document.addEventListener('dragover', onDocumentDragOver, false)
       document.addEventListener('drop', this.onDocumentDrop, false)
     }
-    this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
+    if (this.fileInputEl != null) {
+      this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
+    }
     window.addEventListener('focus', this.onFileDialogCancel, false)
   }
 
@@ -94,11 +96,12 @@ class Dropzone extends 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(draggedFiles => {
+      this.setState({
+        isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
+        draggedFiles
+      })
     })
-
     if (this.props.onDragEnter) {
       this.props.onDragEnter.call(this, evt)
     }
@@ -144,10 +147,15 @@ class Dropzone extends React.Component {
   }
 
   onDrop(evt) {
-    const { onDrop, onDropAccepted, onDropRejected, multiple, disablePreview, accept } = this.props
-    const fileList = getDataTransferItems(evt)
-    const acceptedFiles = []
-    const rejectedFiles = []
+    const {
+      onDrop,
+      onDropAccepted,
+      onDropRejected,
+      multiple,
+      disablePreview,
+      accept,
+      getDataTransferItems
+    } = this.props
 
     // Stop default browser behavior
     evt.preventDefault()
@@ -156,54 +164,57 @@ class Dropzone extends React.Component {
     this.dragTargets = []
     this.isFileDialogActive = false
 
-    fileList.forEach(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, this.props.maxSize, this.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(...acceptedFiles.splice(1))
-    }
+    Promise.resolve(getDataTransferItems(evt)).then(fileList => {
+      const acceptedFiles = []
+      const rejectedFiles = []
+
+      fileList.forEach(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, this.props.maxSize, this.props.minSize)
+        ) {
+          acceptedFiles.push(file)
+        } else {
+          rejectedFiles.push(file)
+        }
+      })
 
-    if (rejectedFiles.length > 0 && onDropRejected) {
-      onDropRejected.call(this, rejectedFiles, evt)
-    }
+      if (!multiple && acceptedFiles.length > 1) {
+        // 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(...acceptedFiles.splice(0))
+      }
 
-    if (acceptedFiles.length > 0 && onDropAccepted) {
-      onDropAccepted.call(this, acceptedFiles, evt)
-    }
+      if (onDrop) {
+        onDrop.call(this, acceptedFiles, rejectedFiles, evt)
+      }
 
-    // Clear files value
-    this.draggedFiles = null
+      if (rejectedFiles.length > 0 && onDropRejected) {
+        onDropRejected.call(this, rejectedFiles, evt)
+      }
 
-    // Reset drag state
-    this.setState({
-      isDragActive: false,
-      draggedFiles: [],
-      acceptedFiles,
-      rejectedFiles
+      if (acceptedFiles.length > 0 && onDropAccepted) {
+        onDropAccepted.call(this, acceptedFiles, evt)
+      }
     })
   }
 
@@ -335,7 +346,7 @@ class Dropzone extends React.Component {
     if (noStyles) {
       style = styles.default
       activeStyle = styles.active
-      acceptStyle = style.active
+      acceptStyle = styles.active
       rejectStyle = styles.rejected
       disabledStyle = styles.disabled
     }
@@ -401,6 +412,7 @@ class Dropzone extends React.Component {
       onFileDialogCancel,
       maxSize,
       minSize,
+      getDataTransferItems,
       ...divProps
     } = props
 
@@ -540,6 +552,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
@@ -595,5 +614,6 @@ Dropzone.defaultProps = {
   inputProps: {},
   multiple: true,
   maxSize: Infinity,
-  minSize: 0
+  minSize: 0,
+  getDataTransferItems: defaultGetDataTransferItem
 }