react-dropzone 12.0.6 → 14.0.0

package/README.md

@@ -230,7 +230,7 @@ dropzoneRef.open()
 ```js static
 import React from 'react'
 import Dropzone from 'react-dropzone'
-import {act, fireEvent, render, waitFor} from '@testing-library/react'
+import {act, fireEvent, render} from '@testing-library/react'
 
 test('invoke onDragEnter when dragenter event occurs', async () => {
   const file = new File([
@@ -248,25 +248,17 @@ test('invoke onDragEnter when dragenter event occurs', async () => {
       )}
     </Dropzone>
   )
-  const { container, rerender } = render(ui)
-  const dropzone = container.querySelector('div')
-
-  dispatchEvt(dropzone, 'dragenter', data)
-  await flushPromises(rerender, ui)
-
+  const { container } = render(ui)
+
+  await act(
+    () => fireEvent.dragEnter(
+      container.querySelector('div'),
+      data,
+    )
+  );
   expect(onDragEnter).toHaveBeenCalled()
 })
 
-async function flushPromises(rerender, ui) {
-  await act(() => waitFor(() => rerender(ui)))
-}
-
-function dispatchEvt(node, type, data) {
-  const event = new Event(type, { bubbles: true })
-  Object.assign(event, data)
-  fireEvent(node, event)
-}
-
 function mockData(files) {
   return {
     dataTransfer: {
@@ -343,8 +335,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
  *
@@ -102,7 +102,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
    */
@@ -110,13 +109,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 +262,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
@@ -320,29 +325,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
+ */
+
 var initialState = {
   isFocused: false,
   isFileDialogActive: false,
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
-  draggedFiles: [],
   acceptedFiles: [],
   fileRejections: []
 };
@@ -368,12 +377,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 +404,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 +426,45 @@ var initialState = {
  * ```
  * @param {dropAcceptedCb} [props.onDropAccepted]
  * @param {dropRejectedCb} [props.onDropRejected]
+ * @param {(error: Error) => void} [props.onError]
  *
- * @returns {DropzoneState}
+ * @returns {DropzoneState & DropzoneMethods}
  */
 
 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]);
@@ -464,8 +480,7 @@ export function useDropzone() {
       dispatch = _useReducer2[1];
 
   var isFocused = state.isFocused,
-      isFileDialogActive = state.isFileDialogActive,
-      draggedFiles = state.draggedFiles;
+      isFileDialogActive = state.isFileDialogActive;
   var fsAccessApiWorksRef = useRef(typeof window !== "undefined" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on
 
   var onWindowFocus = function onWindowFocus() {
@@ -517,6 +532,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
 
@@ -525,13 +548,24 @@ export function useDropzone() {
     dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
 
     if (isEvtWithFiles(event)) {
-      Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {
+      Promise.resolve(getFilesFromEvent(event)).then(function (files) {
         if (isPropagationStopped(event) && !noDragEventsBubbling) {
           return;
         }
 
+        var fileCount = files.length;
+        var isDragAccept = fileCount > 0 && allFilesAccepted({
+          files: files,
+          accept: acceptAttr,
+          minSize: minSize,
+          maxSize: maxSize,
+          multiple: multiple,
+          maxFiles: maxFiles
+        });
+        var isDragReject = fileCount > 0 && !isDragAccept;
         dispatch({
-          draggedFiles: draggedFiles,
+          isDragAccept: isDragAccept,
+          isDragReject: isDragReject,
           isDragActive: true,
           type: "setDraggedFiles"
         });
@@ -539,9 +573,11 @@ export function useDropzone() {
         if (onDragEnter) {
           onDragEnter(event);
         }
+      }).catch(function (e) {
+        return onErrCb(e);
       });
     }
-  }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);
+  }, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling, acceptAttr, minSize, maxSize, multiple, maxFiles]);
   var onDragOverCb = useCallback(function (event) {
     event.preventDefault();
     event.persist();
@@ -585,9 +621,10 @@ export function useDropzone() {
     }
 
     dispatch({
-      isDragActive: false,
       type: "setDraggedFiles",
-      draggedFiles: []
+      isDragActive: false,
+      isDragAccept: false,
+      isDragReject: false
     });
 
     if (isEvtWithFiles(event) && onDragLeave) {
@@ -598,7 +635,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 +693,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 +708,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 +729,7 @@ export function useDropzone() {
 
       var opts = {
         multiple: multiple,
-        types: filePickerOptionsTypes(accept)
+        types: pickerTypes
       };
       window.showOpenFilePicker(opts).then(function (handles) {
         return getFilesFromEvent(handles);
@@ -714,6 +753,8 @@ export function useDropzone() {
             inputRef.current.value = null;
             inputRef.current.click();
           }
+        } else {
+          onErrCb(e);
         }
       });
       return;
@@ -727,7 +768,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 +870,7 @@ export function useDropzone() {
           rest = _objectWithoutProperties(_ref3, _excluded4);
 
       var inputProps = _defineProperty({
-        accept: accept,
+        accept: acceptAttr,
         multiple: multiple,
         type: "file",
         style: {
@@ -843,19 +884,7 @@ export function useDropzone() {
       return _objectSpread(_objectSpread({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
-  var fileCount = draggedFiles.length;
-  var isDragAccept = fileCount > 0 && allFilesAccepted({
-    files: draggedFiles,
-    accept: accept,
-    minSize: minSize,
-    maxSize: maxSize,
-    multiple: multiple,
-    maxFiles: maxFiles
-  });
-  var isDragReject = fileCount > 0 && !isDragAccept;
   return _objectSpread(_objectSpread({}, state), {}, {
-    isDragAccept: isDragAccept,
-    isDragReject: isDragReject,
     isFocused: isFocused && !disabled,
     getRootProps: getRootProps,
     getInputProps: getInputProps,
@@ -864,6 +893,11 @@ export function useDropzone() {
     open: composeHandler(openFileDialog)
   });
 }
+/**
+ * @param {DropzoneState} state
+ * @param {{type: string} & DropzoneState} action
+ * @returns {DropzoneState}
+ */
 
 function reducer(state, action) {
   /* istanbul ignore next */
@@ -889,12 +923,10 @@ function reducer(state, action) {
       });
 
     case "setDraggedFiles":
-      /* eslint no-case-declarations: 0 */
-      var isDragActive = action.isDragActive,
-          draggedFiles = action.draggedFiles;
       return _objectSpread(_objectSpread({}, state), {}, {
-        draggedFiles: draggedFiles,
-        isDragActive: isDragActive
+        isDragActive: action.isDragActive,
+        isDragAccept: action.isDragAccept,
+        isDragReject: action.isDragReject
       });
 
     case "setFiles":

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
+ */