react-dropzone 12.0.5 → 13.0.0

package/examples/accept/README.md

@@ -1,21 +1,17 @@
 By providing `accept` prop you can make the dropzone accept specific file types and reject the others.
 
-The value must be a comma-separated list of unique content type specifiers:
-* A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
-* A valid MIME type with no extensions.
-* audio/* representing sound files.
-* video/* representing video files.
-* image/* representing image files.
+The value must be an object with a common [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) as keys and an array of file extensions as values (similar to [showOpenFilePicker](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)'s types `accept` option).
+```js static
+useDropzone({
+  accept: {
+    'image/png': ['.png'],
+    'text/html': ['.html', '.htm'],
+  }
+})
+```
 
 For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input.
 
-**IMPORTANT** As of [v12.0.0](https://github.com/react-dropzone/react-dropzone/releases/tag/v12.0.0), there has been some changes that affect how `accept` works.
-See [file dialog cancel callback](../../README.md#file-dialog-cancel-callback) to read more about why this change was introduced. In summary:
-1. In browsers that **do not support** the FS access API, the `accept` attr works exactly the same as in previous versions of react-dropozone, for both file picker and dag 'n' drop
-2. In browsers that **support** the FS access API, when passing file extensions to `accept` (e.g `".jpg,.png"`), the file picker will not apply those filters, but drag 'n' drop will - though, the [browser limitations](#browser-limitations) described in this document still apply
-3. If you want the same behaviour in all browsers, regardless of using the FS access API or not, you need to use MIME types - [browser limitations](#browser-limitations) still apply
-4. The use of FS access API can be turned off via `useDropzone({useFsAccessApi: false})`
-
 ```jsx harmony
 import React from 'react';
 import {useDropzone} from 'react-dropzone';
@@ -27,7 +23,10 @@ function Accept(props) {
     getRootProps,
     getInputProps
   } = useDropzone({
-    accept: 'image/jpeg,image/png'
+    accept: {
+      'image/jpeg': [],
+      'image/png': []
+    }
   });
 
   const acceptedFileItems = acceptedFiles.map(file => (
@@ -85,7 +84,9 @@ function Accept(props) {
     isDragAccept,
     isDragReject
   } = useDropzone({
-    accept: '.jpeg,.png'
+    accept: {
+      'image/jpeg': ['.jpeg', '.png']
+    }
   });
 
   return (
@@ -117,7 +118,9 @@ function Accept(props) {
     isDragAccept,
     isDragReject
   } = useDropzone({
-    accept: 'image/jpeg,image/png'
+    accept: {
+      'image/*': ['.jpeg', '.png']
+    }
   });
 
   return (

package/examples/pintura/README.md

@@ -77,7 +77,9 @@ const editImage = (image, done) => {
 function App() {
     const [files, setFiles] = useState([]);
     const { getRootProps, getInputProps } = useDropzone({
-        accept: 'image/*',
+        accept: {
+          'image/*': [],
+        },
         onDrop: (acceptedFiles) => {
             setFiles(
                 acceptedFiles.map((file) =>

package/examples/previews/README.md

@@ -41,7 +41,9 @@ const img = {
 function Previews(props) {
   const [files, setFiles] = useState([]);
   const {getRootProps, getInputProps} = useDropzone({
-    accept: 'image/*',
+    accept: {
+      'image/*': []
+    },
     onDrop: acceptedFiles => {
       setFiles(acceptedFiles.map(file => Object.assign(file, {
         preview: URL.createObjectURL(file)
@@ -55,15 +57,17 @@ function Previews(props) {
         <img
           src={file.preview}
           style={img}
+          // Revoke data uri after image is loaded
+          onLoad={() => { URL.revokeObjectURL(file.preview) }}
         />
       </div>
     </div>
   ));
 
   useEffect(() => {
-    // Make sure to revoke the data uris to avoid memory leaks
-    files.forEach(file => URL.revokeObjectURL(file.preview));
-  }, [files]);
+    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
+    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
+  }, []);
 
   return (
     <section className="container">

package/examples/styling/README.md

@@ -41,7 +41,7 @@ function StyledDropzone(props) {
     isFocused,
     isDragAccept,
     isDragReject
-  } = useDropzone({accept: 'image/*'});
+  } = useDropzone({accept: {'image/*': []}});
 
   const style = useMemo(() => ({
     ...baseStyle,
@@ -110,7 +110,7 @@ function StyledDropzone(props) {
     isFocused,
     isDragAccept,
     isDragReject
-  } = useDropzone({accept: 'image/*'});
+  } = useDropzone({accept: {'image/*': []}});
   
   return (
     <div className="container">

package/package.json

@@ -99,7 +99,7 @@
   },
   "dependencies": {
     "attr-accept": "^2.2.2",
-    "file-selector": "^0.4.0",
+    "file-selector": "^0.5.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
@@ -171,7 +171,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "12.0.5",
+  "version": "13.0.0",
   "engines": {
     "node": ">= 10.13"
   },

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"button\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" autocomplete=\\"off\\" tabindex=\\"-1\\"></div>"`;
+exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"button\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"display: none;\\" tabindex=\\"-1\\"></div>"`;

package/src/index.js

@@ -12,11 +12,11 @@ import React, {
 import PropTypes from "prop-types";
 import { fromEvent } from "file-selector";
 import {
+  acceptPropAsAcceptAttr,
   allFilesAccepted,
   composeEventHandlers,
   fileAccepted,
   fileMatchSize,
-  filePickerOptionsTypes,
   canUseFileSystemAccessAPI,
   isAbort,
   isEvtWithFiles,
@@ -24,6 +24,7 @@ import {
   isPropagationStopped,
   isSecurityError,
   onDocumentDragOver,
+  pickerOptionsFromAccept,
   TOO_MANY_FILES_REJECTION,
 } from "./utils/index";
 
@@ -92,16 +93,12 @@ Dropzone.propTypes = {
 
   /**
    * Set accepted file types.
-   * See https://github.com/okonet/attr-accept for more information.
+   * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.
    * Keep in mind that mime type determination is not reliable across platforms. CSV files,
    * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
-   * Windows. In some cases there might not be a mime type set at all.
-   * See: https://github.com/react-dropzone/react-dropzone/issues/276
+   * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).
    */
-  accept: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
 
   /**
    * Allow drag 'n' drop (or selection from the file dialog) of multiple files
@@ -248,6 +245,13 @@ Dropzone.propTypes = {
    */
   onDropRejected: PropTypes.func,
 
+  /**
+   * Cb for when there's some error from any of the promises.
+   *
+   * @param {Error} error
+   */
+  onError: PropTypes.func,
+
   /**
    * Custom validation function
    * @param {File} file
@@ -355,12 +359,11 @@ const initialState = {
  * @function useDropzone
  *
  * @param {object} props
- * @param {string|string[]} [props.accept] Set accepted file types.
- * See https://github.com/okonet/attr-accept for more information.
+ * @param {import("./utils").AcceptProp} [props.accept] Set accepted file types.
+ * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.
  * Keep in mind that mime type determination is not reliable across platforms. CSV files,
  * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
- * Windows. In some cases there might not be a mime type set at all.
- * See: https://github.com/react-dropzone/react-dropzone/issues/276
+ * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).
  * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files
  * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window
  * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog
@@ -383,7 +386,7 @@ const initialState = {
  * Note that this callback is invoked after the `getFilesFromEvent` callback is done.
  *
  * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
- * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
+ * `accept` must be an object with keys as a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) and the value an array of file extensions (optional).
  * If `multiple` is set to false and additional files are dropped,
  * all files besides the first will be rejected.
  * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
@@ -405,10 +408,11 @@ const initialState = {
  * ```
  * @param {dropAcceptedCb} [props.onDropAccepted]
  * @param {dropRejectedCb} [props.onDropRejected]
+ * @param {(error: Error) => void} [props.onError]
  *
  * @returns {DropzoneState}
  */
-export function useDropzone(options = {}) {
+export function useDropzone(props = {}) {
   const {
     accept,
     disabled,
@@ -431,12 +435,16 @@ export function useDropzone(options = {}) {
     noKeyboard,
     noDrag,
     noDragEventsBubbling,
+    onError,
     validator,
   } = {
     ...defaultProps,
-    ...options,
+    ...props,
   };
 
+  const acceptAttr = useMemo(() => acceptPropAsAcceptAttr(accept), [accept]);
+  const pickerTypes = useMemo(() => pickerOptionsFromAccept(accept), [accept]);
+
   const onFileDialogOpenCb = useMemo(
     () => (typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop),
     [onFileDialogOpen]
@@ -507,6 +515,18 @@ export function useDropzone(options = {}) {
     };
   }, [rootRef, preventDropOnDocument]);
 
+  const onErrCb = useCallback(
+    (e) => {
+      if (onError) {
+        onError(e);
+      } else {
+        // Let the user know something's gone wrong if they haven't provided the onError cb.
+        console.error(e);
+      }
+    },
+    [onError]
+  );
+
   const onDragEnterCb = useCallback(
     (event) => {
       event.preventDefault();
@@ -517,24 +537,26 @@ export function useDropzone(options = {}) {
       dragTargetsRef.current = [...dragTargetsRef.current, event.target];
 
       if (isEvtWithFiles(event)) {
-        Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
-          if (isPropagationStopped(event) && !noDragEventsBubbling) {
-            return;
-          }
+        Promise.resolve(getFilesFromEvent(event))
+          .then((draggedFiles) => {
+            if (isPropagationStopped(event) && !noDragEventsBubbling) {
+              return;
+            }
 
-          dispatch({
-            draggedFiles,
-            isDragActive: true,
-            type: "setDraggedFiles",
-          });
+            dispatch({
+              draggedFiles,
+              isDragActive: true,
+              type: "setDraggedFiles",
+            });
 
-          if (onDragEnter) {
-            onDragEnter(event);
-          }
-        });
+            if (onDragEnter) {
+              onDragEnter(event);
+            }
+          })
+          .catch((e) => onErrCb(e));
       }
     },
-    [getFilesFromEvent, onDragEnter, noDragEventsBubbling]
+    [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling]
   );
 
   const onDragOverCb = useCallback(
@@ -599,7 +621,7 @@ export function useDropzone(options = {}) {
       const fileRejections = [];
 
       files.forEach((file) => {
-        const [accepted, acceptError] = fileAccepted(file, accept);
+        const [accepted, acceptError] = fileAccepted(file, acceptAttr);
         const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
         const customErrors = validator ? validator(file) : null;
 
@@ -648,7 +670,7 @@ export function useDropzone(options = {}) {
     [
       dispatch,
       multiple,
-      accept,
+      acceptAttr,
       minSize,
       maxSize,
       maxFiles,
@@ -669,16 +691,18 @@ export function useDropzone(options = {}) {
       dragTargetsRef.current = [];
 
       if (isEvtWithFiles(event)) {
-        Promise.resolve(getFilesFromEvent(event)).then((files) => {
-          if (isPropagationStopped(event) && !noDragEventsBubbling) {
-            return;
-          }
-          setFiles(files, event);
-        });
+        Promise.resolve(getFilesFromEvent(event))
+          .then((files) => {
+            if (isPropagationStopped(event) && !noDragEventsBubbling) {
+              return;
+            }
+            setFiles(files, event);
+          })
+          .catch((e) => onErrCb(e));
       }
       dispatch({ type: "reset" });
     },
-    [getFilesFromEvent, setFiles, noDragEventsBubbling]
+    [getFilesFromEvent, setFiles, onErrCb, noDragEventsBubbling]
   );
 
   // Fn for opening the file dialog programmatically
@@ -691,7 +715,7 @@ export function useDropzone(options = {}) {
       // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
       const opts = {
         multiple,
-        types: filePickerOptionsTypes(accept),
+        types: pickerTypes,
       };
       window
         .showOpenFilePicker(opts)
@@ -713,6 +737,8 @@ export function useDropzone(options = {}) {
               inputRef.current.value = null;
               inputRef.current.click();
             }
+          } else {
+            onErrCb(e);
           }
         });
       return;
@@ -730,7 +756,8 @@ export function useDropzone(options = {}) {
     onFileDialogCancelCb,
     useFsAccessApi,
     setFiles,
-    accept,
+    onErrCb,
+    pickerTypes,
     multiple,
   ]);
 
@@ -859,7 +886,7 @@ export function useDropzone(options = {}) {
     () =>
       ({ refKey = "ref", onChange, onClick, ...rest } = {}) => {
         const inputProps = {
-          accept,
+          accept: acceptAttr,
           multiple,
           type: "file",
           style: { display: "none" },
@@ -867,7 +894,6 @@ export function useDropzone(options = {}) {
           onClick: composeHandler(
             composeEventHandlers(onClick, onInputElementClick)
           ),
-          autoComplete: "off",
           tabIndex: -1,
           [refKey]: inputRef,
         };
@@ -885,7 +911,7 @@ export function useDropzone(options = {}) {
     fileCount > 0 &&
     allFilesAccepted({
       files: draggedFiles,
-      accept,
+      accept: acceptAttr,
       minSize,
       maxSize,
       multiple,