react-dropzone 4.2.10 → 4.3.0

package/examples/FileDialog/Readme.md

@@ -0,0 +1,18 @@
+You can programmatically invoke default OS file prompt. In order to do that you'll have to set the ref on your `Dropzone` instance and call the instance `open` method.
+
+**Please note**, that for security reasons most browsers require popups and dialogues to originate from a direct user interaction (i.e. click). If you are calling `dropzoneRef.open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `dropzoneRef.open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `dropzoneRef.open()` call. Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
+
+```
+let dropzoneRef;
+
+<div>
+  <Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={(accepted, rejected) => { alert(accepted) }}>
+      <p>Drop files here.</p>
+  </Dropzone>
+  <button type="button" onClick={() => { dropzoneRef.open() }}>
+      Open File Dialog
+  </button>
+</div>
+```
+
+The completion handler for the `open` function is also the `onDrop` function.

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.10"
+  "version": "4.3.0"
 }

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=\\"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=\\"display: none;\\"></div>"`;
-
-exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"display: 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=\\"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=\\"display: 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'
@@ -94,11 +94,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 +145,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 +162,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) {
+        // 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))
+      }
 
-    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,15 +344,15 @@ 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
     }
 
-    let appliedStyle = { ...style }
+    let appliedStyle = { position: 'relative', ...style }
     if (activeStyle && isDragActive) {
       appliedStyle = {
-        ...style,
+        ...appliedStyle,
         ...activeStyle
       }
     }
@@ -361,7 +370,7 @@ class Dropzone extends React.Component {
     }
     if (disabledStyle && disabled) {
       appliedStyle = {
-        ...style,
+        ...appliedStyle,
         ...disabledStyle
       }
     }
@@ -370,7 +379,16 @@ class Dropzone extends React.Component {
       accept,
       disabled,
       type: 'file',
-      style: { display: 'none' },
+      style: {
+        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,
@@ -392,6 +410,7 @@ class Dropzone extends React.Component {
       onFileDialogCancel,
       maxSize,
       minSize,
+      getDataTransferItems,
       ...divProps
     } = props
 
@@ -429,7 +448,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
@@ -531,6 +550,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
@@ -583,7 +609,9 @@ Dropzone.defaultProps = {
   disabled: false,
   disablePreview: false,
   disableClick: false,
+  inputProps: {},
   multiple: true,
   maxSize: Infinity,
-  minSize: 0
+  minSize: 0,
+  getDataTransferItems: defaultGetDataTransferItem
 }