react-dropzone 12.1.0 → 14.0.1

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)

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

@@ -95,7 +95,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">= 16.8"
+    "react": ">= 16.8 || 18.0.0"
   },
   "dependencies": {
     "attr-accept": "^2.2.2",
@@ -129,8 +129,8 @@
     "@size-limit/webpack-why": "^7.0.5",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
@@ -156,10 +156,10 @@
     "markdownlint-cli": "^0.30.0",
     "pinst": "^2.1.6",
     "prettier": "^2.5.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-styleguidist": "^11.2.0",
-    "react-test-renderer": "^17.0.0",
+    "react-test-renderer": "^18.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -171,7 +171,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "12.1.0",
+  "version": "14.0.1",
   "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;\\" tabindex=\\"-1\\"></div>"`;
+exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"presentation\\" 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";
 
@@ -84,7 +85,6 @@ Dropzone.propTypes = {
    * @param {boolean} params.isDragActive Active drag is in progress
    * @param {boolean} params.isDragAccept Dragged files are accepted
    * @param {boolean} params.isDragReject Some dragged files are rejected
-   * @param {File[]} params.draggedFiles Files in active drag
    * @param {File[]} params.acceptedFiles Accepted files
    * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected
    */
@@ -92,16 +92,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 +244,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
@@ -306,29 +309,33 @@ export default Dropzone;
  */
 
 /**
- * An object with the current dropzone state and some helper functions.
+ * An object with the current dropzone state.
  *
  * @typedef {object} DropzoneState
- * @property {Function} getRootProps Returns the props you should apply to the root drop container you render
- * @property {Function} getInputProps Returns the props you should apply to hidden file input you render
- * @property {Function} open Open the native file selection dialog
  * @property {boolean} isFocused Dropzone area is in focus
  * @property {boolean} isFileDialogActive File dialog is opened
  * @property {boolean} isDragActive Active drag is in progress
  * @property {boolean} isDragAccept Dragged files are accepted
  * @property {boolean} isDragReject Some dragged files are rejected
- * @property {File[]} draggedFiles Files in active drag
  * @property {File[]} acceptedFiles Accepted files
  * @property {FileRejection[]} fileRejections Rejected files and why they were rejected
  */
 
+/**
+ * An object with the dropzone methods.
+ *
+ * @typedef {object} DropzoneMethods
+ * @property {Function} getRootProps Returns the props you should apply to the root drop container you render
+ * @property {Function} getInputProps Returns the props you should apply to hidden file input you render
+ * @property {Function} open Open the native file selection dialog
+ */
+
 const initialState = {
   isFocused: false,
   isFileDialogActive: false,
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
-  draggedFiles: [],
   acceptedFiles: [],
   fileRejections: [],
 };
@@ -355,12 +362,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 +389,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 +411,11 @@ const initialState = {
  * ```
  * @param {dropAcceptedCb} [props.onDropAccepted]
  * @param {dropRejectedCb} [props.onDropRejected]
+ * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
-export function useDropzone(options = {}) {
+export function useDropzone(props = {}) {
   const {
     accept,
     disabled,
@@ -431,12 +438,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]
@@ -451,7 +462,7 @@ export function useDropzone(options = {}) {
   const inputRef = useRef(null);
 
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { isFocused, isFileDialogActive, draggedFiles } = state;
+  const { isFocused, isFileDialogActive } = state;
 
   const fsAccessApiWorksRef = useRef(
     typeof window !== "undefined" &&
@@ -507,6 +518,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 +540,50 @@ export function useDropzone(options = {}) {
       dragTargetsRef.current = [...dragTargetsRef.current, event.target];
 
       if (isEvtWithFiles(event)) {
-        Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
-          if (isPropagationStopped(event) && !noDragEventsBubbling) {
-            return;
-          }
-
-          dispatch({
-            draggedFiles,
-            isDragActive: true,
-            type: "setDraggedFiles",
-          });
+        Promise.resolve(getFilesFromEvent(event))
+          .then((files) => {
+            if (isPropagationStopped(event) && !noDragEventsBubbling) {
+              return;
+            }
 
-          if (onDragEnter) {
-            onDragEnter(event);
-          }
-        });
+            const fileCount = files.length;
+            const isDragAccept =
+              fileCount > 0 &&
+              allFilesAccepted({
+                files,
+                accept: acceptAttr,
+                minSize,
+                maxSize,
+                multiple,
+                maxFiles,
+              });
+            const isDragReject = fileCount > 0 && !isDragAccept;
+
+            dispatch({
+              isDragAccept,
+              isDragReject,
+              isDragActive: true,
+              type: "setDraggedFiles",
+            });
+
+            if (onDragEnter) {
+              onDragEnter(event);
+            }
+          })
+          .catch((e) => onErrCb(e));
       }
     },
-    [getFilesFromEvent, onDragEnter, noDragEventsBubbling]
+    [
+      getFilesFromEvent,
+      onDragEnter,
+      onErrCb,
+      noDragEventsBubbling,
+      acceptAttr,
+      minSize,
+      maxSize,
+      multiple,
+      maxFiles,
+    ]
   );
 
   const onDragOverCb = useCallback(
@@ -581,9 +630,10 @@ export function useDropzone(options = {}) {
       }
 
       dispatch({
-        isDragActive: false,
         type: "setDraggedFiles",
-        draggedFiles: [],
+        isDragActive: false,
+        isDragAccept: false,
+        isDragReject: false,
       });
 
       if (isEvtWithFiles(event) && onDragLeave) {
@@ -599,7 +649,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 +698,7 @@ export function useDropzone(options = {}) {
     [
       dispatch,
       multiple,
-      accept,
+      acceptAttr,
       minSize,
       maxSize,
       maxFiles,
@@ -669,16 +719,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 +743,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 +765,8 @@ export function useDropzone(options = {}) {
               inputRef.current.value = null;
               inputRef.current.click();
             }
+          } else {
+            onErrCb(e);
           }
         });
       return;
@@ -730,7 +784,8 @@ export function useDropzone(options = {}) {
     onFileDialogCancelCb,
     useFsAccessApi,
     setFiles,
-    accept,
+    onErrCb,
+    pickerTypes,
     multiple,
   ]);
 
@@ -830,7 +885,7 @@ export function useDropzone(options = {}) {
           composeEventHandlers(onDragLeave, onDragLeaveCb)
         ),
         onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
-        role: typeof role === "string" && role !== "" ? role : "button",
+        role: typeof role === "string" && role !== "" ? role : "presentation",
         [refKey]: rootRef,
         ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
         ...rest,
@@ -859,7 +914,7 @@ export function useDropzone(options = {}) {
     () =>
       ({ refKey = "ref", onChange, onClick, ...rest } = {}) => {
         const inputProps = {
-          accept,
+          accept: acceptAttr,
           multiple,
           type: "file",
           style: { display: "none" },
@@ -879,23 +934,8 @@ export function useDropzone(options = {}) {
     [inputRef, accept, multiple, onDropCb, disabled]
   );
 
-  const fileCount = draggedFiles.length;
-  const isDragAccept =
-    fileCount > 0 &&
-    allFilesAccepted({
-      files: draggedFiles,
-      accept,
-      minSize,
-      maxSize,
-      multiple,
-      maxFiles,
-    });
-  const isDragReject = fileCount > 0 && !isDragAccept;
-
   return {
     ...state,
-    isDragAccept,
-    isDragReject,
     isFocused: isFocused && !disabled,
     getRootProps,
     getInputProps,
@@ -905,6 +945,11 @@ export function useDropzone(options = {}) {
   };
 }
 
+/**
+ * @param {DropzoneState} state
+ * @param {{type: string} & DropzoneState} action
+ * @returns {DropzoneState}
+ */
 function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
@@ -929,12 +974,11 @@ function reducer(state, action) {
         isFileDialogActive: false,
       };
     case "setDraggedFiles":
-      /* eslint no-case-declarations: 0 */
-      const { isDragActive, draggedFiles } = action;
       return {
         ...state,
-        draggedFiles,
-        isDragActive,
+        isDragActive: action.isDragActive,
+        isDragAccept: action.isDragAccept,
+        isDragReject: action.isDragReject,
       };
     case "setFiles":
       return {