react-dropzone 12.1.0 → 13.0.0

package/README.md

@@ -343,8 +343,6 @@ As one can imagine, this doesn't really work if there's a lot of files or large
 
 Fortunately, there's the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API), which is currently a working draft and some browsers support it (see [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#browser_compatibility)), that provides a reliable way to prompt the user for file selection and capture cancellation. 
 
-And this lib makes use of it if available. Though, there's a small catch: using file extensions for the `accept` property is not supported; you must use MIME types as described in [common MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). Also check [accepting specific file types](https://react-dropzone.js.org/#section-accepting-specific-file-types) for more info on the subject of `accept` limitations.
-
 Also keep in mind that the FS access API can only be used in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
 
 **NOTE** You can disable using the FS access API with the `useFsAccessApi` property: `useDropzone({useFsAccessApi: false})`.

package/dist/es/index.js

@@ -37,7 +37,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from "react";
 import PropTypes from "prop-types";
 import { fromEvent } from "file-selector";
-import { allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, filePickerOptionsTypes, canUseFileSystemAccessAPI, isAbort, isEvtWithFiles, isIeOrEdge, isPropagationStopped, isSecurityError, onDocumentDragOver, TOO_MANY_FILES_REJECTION } from "./utils/index";
+import { acceptPropAsAcceptAttr, allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, canUseFileSystemAccessAPI, isAbort, isEvtWithFiles, isIeOrEdge, isPropagationStopped, isSecurityError, onDocumentDragOver, pickerOptionsFromAccept, TOO_MANY_FILES_REJECTION } from "./utils/index";
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -110,13 +110,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
@@ -264,6 +263,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
@@ -368,12 +374,11 @@ var 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
@@ -396,7 +401,7 @@ var 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.
@@ -418,37 +423,45 @@ var initialState = {
  * ```
  * @param {dropAcceptedCb} [props.onDropAccepted]
  * @param {dropRejectedCb} [props.onDropRejected]
+ * @param {(error: Error) => void} [props.onError]
  *
  * @returns {DropzoneState}
  */
 
 export function useDropzone() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var _defaultProps$options = _objectSpread(_objectSpread({}, defaultProps), options),
-      accept = _defaultProps$options.accept,
-      disabled = _defaultProps$options.disabled,
-      getFilesFromEvent = _defaultProps$options.getFilesFromEvent,
-      maxSize = _defaultProps$options.maxSize,
-      minSize = _defaultProps$options.minSize,
-      multiple = _defaultProps$options.multiple,
-      maxFiles = _defaultProps$options.maxFiles,
-      onDragEnter = _defaultProps$options.onDragEnter,
-      onDragLeave = _defaultProps$options.onDragLeave,
-      onDragOver = _defaultProps$options.onDragOver,
-      onDrop = _defaultProps$options.onDrop,
-      onDropAccepted = _defaultProps$options.onDropAccepted,
-      onDropRejected = _defaultProps$options.onDropRejected,
-      onFileDialogCancel = _defaultProps$options.onFileDialogCancel,
-      onFileDialogOpen = _defaultProps$options.onFileDialogOpen,
-      useFsAccessApi = _defaultProps$options.useFsAccessApi,
-      preventDropOnDocument = _defaultProps$options.preventDropOnDocument,
-      noClick = _defaultProps$options.noClick,
-      noKeyboard = _defaultProps$options.noKeyboard,
-      noDrag = _defaultProps$options.noDrag,
-      noDragEventsBubbling = _defaultProps$options.noDragEventsBubbling,
-      validator = _defaultProps$options.validator;
-
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      accept = _defaultProps$props.accept,
+      disabled = _defaultProps$props.disabled,
+      getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
+      maxSize = _defaultProps$props.maxSize,
+      minSize = _defaultProps$props.minSize,
+      multiple = _defaultProps$props.multiple,
+      maxFiles = _defaultProps$props.maxFiles,
+      onDragEnter = _defaultProps$props.onDragEnter,
+      onDragLeave = _defaultProps$props.onDragLeave,
+      onDragOver = _defaultProps$props.onDragOver,
+      onDrop = _defaultProps$props.onDrop,
+      onDropAccepted = _defaultProps$props.onDropAccepted,
+      onDropRejected = _defaultProps$props.onDropRejected,
+      onFileDialogCancel = _defaultProps$props.onFileDialogCancel,
+      onFileDialogOpen = _defaultProps$props.onFileDialogOpen,
+      useFsAccessApi = _defaultProps$props.useFsAccessApi,
+      preventDropOnDocument = _defaultProps$props.preventDropOnDocument,
+      noClick = _defaultProps$props.noClick,
+      noKeyboard = _defaultProps$props.noKeyboard,
+      noDrag = _defaultProps$props.noDrag,
+      noDragEventsBubbling = _defaultProps$props.noDragEventsBubbling,
+      onError = _defaultProps$props.onError,
+      validator = _defaultProps$props.validator;
+
+  var acceptAttr = useMemo(function () {
+    return acceptPropAsAcceptAttr(accept);
+  }, [accept]);
+  var pickerTypes = useMemo(function () {
+    return pickerOptionsFromAccept(accept);
+  }, [accept]);
   var onFileDialogOpenCb = useMemo(function () {
     return typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop;
   }, [onFileDialogOpen]);
@@ -517,6 +530,14 @@ export function useDropzone() {
       }
     };
   }, [rootRef, preventDropOnDocument]);
+  var onErrCb = useCallback(function (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]);
   var onDragEnterCb = useCallback(function (event) {
     event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
 
@@ -539,9 +560,11 @@ export function useDropzone() {
         if (onDragEnter) {
           onDragEnter(event);
         }
+      }).catch(function (e) {
+        return onErrCb(e);
       });
     }
-  }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);
+  }, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling]);
   var onDragOverCb = useCallback(function (event) {
     event.preventDefault();
     event.persist();
@@ -598,7 +621,7 @@ export function useDropzone() {
     var acceptedFiles = [];
     var fileRejections = [];
     files.forEach(function (file) {
-      var _fileAccepted = fileAccepted(file, accept),
+      var _fileAccepted = fileAccepted(file, acceptAttr),
           _fileAccepted2 = _slicedToArray(_fileAccepted, 2),
           accepted = _fileAccepted2[0],
           acceptError = _fileAccepted2[1];
@@ -656,7 +679,7 @@ export function useDropzone() {
     if (acceptedFiles.length > 0 && onDropAccepted) {
       onDropAccepted(acceptedFiles, event);
     }
-  }, [dispatch, multiple, accept, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);
+  }, [dispatch, multiple, acceptAttr, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);
   var onDropCb = useCallback(function (event) {
     event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
 
@@ -671,13 +694,15 @@ export function useDropzone() {
         }
 
         setFiles(files, event);
+      }).catch(function (e) {
+        return onErrCb(e);
       });
     }
 
     dispatch({
       type: "reset"
     });
-  }, [getFilesFromEvent, setFiles, noDragEventsBubbling]); // Fn for opening the file dialog programmatically
+  }, [getFilesFromEvent, setFiles, onErrCb, noDragEventsBubbling]); // Fn for opening the file dialog programmatically
 
   var openFileDialog = useCallback(function () {
     // No point to use FS access APIs if context is not secure
@@ -690,7 +715,7 @@ export function useDropzone() {
 
       var opts = {
         multiple: multiple,
-        types: filePickerOptionsTypes(accept)
+        types: pickerTypes
       };
       window.showOpenFilePicker(opts).then(function (handles) {
         return getFilesFromEvent(handles);
@@ -714,6 +739,8 @@ export function useDropzone() {
             inputRef.current.value = null;
             inputRef.current.click();
           }
+        } else {
+          onErrCb(e);
         }
       });
       return;
@@ -727,7 +754,7 @@ export function useDropzone() {
       inputRef.current.value = null;
       inputRef.current.click();
     }
-  }, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, accept, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
+  }, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, onErrCb, pickerTypes, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
 
   var onKeyDownCb = useCallback(function (event) {
     // Ignore keyboard events bubbling up the DOM tree
@@ -829,7 +856,7 @@ export function useDropzone() {
           rest = _objectWithoutProperties(_ref3, _excluded4);
 
       var inputProps = _defineProperty({
-        accept: accept,
+        accept: acceptAttr,
         multiple: multiple,
         type: "file",
         style: {
@@ -846,7 +873,7 @@ export function useDropzone() {
   var fileCount = draggedFiles.length;
   var isDragAccept = fileCount > 0 && allFilesAccepted({
     files: draggedFiles,
-    accept: accept,
+    accept: acceptAttr,
     minSize: minSize,
     maxSize: maxSize,
     multiple: multiple,

package/dist/es/utils/index.js

@@ -1,6 +1,10 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -183,25 +187,67 @@ export function canUseFileSystemAccessAPI() {
   return "showOpenFilePicker" in window;
 }
 /**
- * filePickerOptionsTypes returns the {types} option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
- * based on the accept attr (see https://github.com/react-dropzone/attr-accept)
- * E.g: converts ['image/*', 'text/*'] to {'image/*': [], 'text/*': []}
- * @param {string|string[]} accept
+ * Convert the `{accept}` dropzone prop to the
+ * `{types}` option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ *
+ * @param {AcceptProp} accept
+ * @returns {{accept: string[]}[]}
  */
 
-export function filePickerOptionsTypes(accept) {
-  accept = typeof accept === "string" ? accept.split(",") : accept;
-  return [{
-    description: "everything",
-    // TODO: Need to handle filtering more elegantly than this!
-    accept: Array.isArray(accept) ? // Accept just MIME types as per spec
-    // NOTE: accept can be https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
-    accept.filter(function (item) {
-      return item === "audio/*" || item === "video/*" || item === "image/*" || item === "text/*" || /\w+\/[-+.\w]+/g.test(item);
-    }).reduce(function (a, b) {
-      return _objectSpread(_objectSpread({}, a), {}, _defineProperty({}, b, []));
-    }, {}) : {}
-  }];
+export function pickerOptionsFromAccept(accept) {
+  if (isDefined(accept)) {
+    return Object.entries(accept).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          mimeType = _ref3[0],
+          ext = _ref3[1];
+
+      var ok = true;
+
+      if (!isMIMEType(mimeType)) {
+        console.warn("Skipped \"".concat(mimeType, "\" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types."));
+        ok = false;
+      }
+
+      if (!Array.isArray(ext) || !ext.every(isExt)) {
+        console.warn("Skipped \"".concat(mimeType, "\" because an invalid file extension was provided."));
+        ok = false;
+      }
+
+      return ok;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+          mimeType = _ref5[0],
+          ext = _ref5[1];
+
+      return {
+        accept: _defineProperty({}, mimeType, ext)
+      };
+    });
+  }
+
+  return accept;
+}
+/**
+ * Convert the `{accept}` dropzone prop to an array of MIME types/extensions.
+ * @param {AcceptProp} accept
+ * @returns {string}
+ */
+
+export function acceptPropAsAcceptAttr(accept) {
+  if (isDefined(accept)) {
+    return Object.entries(accept).reduce(function (a, _ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+          mimeType = _ref7[0],
+          ext = _ref7[1];
+
+      return [].concat(_toConsumableArray(a), [mimeType], _toConsumableArray(ext));
+    }, []) // Silently discard invalid entries as pickerOptionsFromAccept warns about these
+    .filter(function (v) {
+      return isMIMEType(v) || isExt(v);
+    }).join(",");
+  }
+
+  return undefined;
 }
 /**
  * Check if v is an exception caused by aborting a request (e.g window.showOpenFilePicker()).
@@ -224,4 +270,26 @@ export function isAbort(v) {
 
 export function isSecurityError(v) {
   return v instanceof DOMException && (v.name === "SecurityError" || v.code === v.SECURITY_ERR);
-}
+}
+/**
+ * Check if v is a MIME type string.
+ *
+ * See accepted format: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers.
+ *
+ * @param {string} v
+ */
+
+export function isMIMEType(v) {
+  return v === "audio/*" || v === "video/*" || v === "image/*" || v === "text/*" || /\w+\/[-+.\w]+/g.test(v);
+}
+/**
+ * Check if v is a file extension.
+ * @param {string} v
+ */
+
+export function isExt(v) {
+  return /^.*\.[\w]+$/.test(v);
+}
+/**
+ * @typedef {Object.<string, string[]>} AcceptProp
+ */