react-dropzone 11.7.1 → 12.0.3

package/.eslintrc

@@ -15,10 +15,8 @@
     "prettier"
   ],
   "extends": [
-    // TODO: Fix this so we can use
-    // "okonet/node"
     "eslint:recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "strict": 0,

package/README.md

@@ -6,7 +6,8 @@
 [![codecov](https://img.shields.io/codecov/c/gh/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://codecov.io/gh/react-dropzone/react-dropzone)
 [![Open Collective Backers](https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square)](#backers)
 [![Open Collective Sponsors](https://img.shields.io/opencollective/sponsors/react-dropzone.svg?style=flat-square)](#sponsors)
-[![Gitpod](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod&style=flat-square)](https://gitpod.io/#https://github.com/react-dropzone/react-dropzone) 
+[![Gitpod](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod&style=flat-square)](https://gitpod.io/#https://github.com/react-dropzone/react-dropzone)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg?style=flat-square)](https://github.com/react-dropzone/.github/blob/main/CODE_OF_CONDUCT.md)
 
 Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
 
@@ -344,6 +345,10 @@ Fortunately, there's the [File System Access API](https://developer.mozilla.org/
 
 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})`.
+
 ## Supported Browsers
 We use [browserslist](https://github.com/browserslist/browserslist) config to state the browser support for this lib, so check it out on [browserslist.dev](https://browserslist.dev/?q=ZGVmYXVsdHM%3D).
 

package/commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-angular'] }
+module.exports = { extends: ["@commitlint/config-angular"] };

package/dist/es/index.js

@@ -34,10 +34,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /* eslint prefer-template: 0 */
-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, isEvtWithFiles, isIeOrEdge, isPropagationStopped, onDocumentDragOver, TOO_MANY_FILES_REJECTION } from './utils/index';
+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";
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -71,7 +71,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open: open
   })));
 });
-Dropzone.displayName = 'Dropzone'; // Add default props for react-docgen
+Dropzone.displayName = "Dropzone"; // Add default props for react-docgen
 
 var defaultProps = {
   disabled: false,
@@ -86,7 +86,7 @@ var defaultProps = {
   noDrag: false,
   noDragEventsBubbling: false,
   validator: null,
-  useFsAccessApi: false
+  useFsAccessApi: true
 };
 Dropzone.defaultProps = defaultProps;
 Dropzone.propTypes = {
@@ -450,10 +450,10 @@ export function useDropzone() {
       validator = _defaultProps$options.validator;
 
   var onFileDialogOpenCb = useMemo(function () {
-    return typeof onFileDialogOpen === 'function' ? onFileDialogOpen : noop;
+    return typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop;
   }, [onFileDialogOpen]);
   var onFileDialogCancelCb = useMemo(function () {
-    return typeof onFileDialogCancel === 'function' ? onFileDialogCancel : noop;
+    return typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop;
   }, [onFileDialogCancel]);
   var rootRef = useRef(null);
   var inputRef = useRef(null);
@@ -465,18 +465,19 @@ export function useDropzone() {
 
   var isFocused = state.isFocused,
       isFileDialogActive = state.isFileDialogActive,
-      draggedFiles = state.draggedFiles; // Update file dialog active state when the window is focused on
+      draggedFiles = state.draggedFiles;
+  var fsAccessApiWorksRef = useRef(window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on
 
   var onWindowFocus = function onWindowFocus() {
     // Execute the timeout only if the file dialog is opened in the browser
-    if (isFileDialogActive) {
+    if (!fsAccessApiWorksRef.current && isFileDialogActive) {
       setTimeout(function () {
         if (inputRef.current) {
           var files = inputRef.current.files;
 
           if (!files.length) {
             dispatch({
-              type: 'closeDialog'
+              type: "closeDialog"
             });
             onFileDialogCancelCb();
           }
@@ -486,15 +487,11 @@ export function useDropzone() {
   };
 
   useEffect(function () {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
-      return function () {};
-    }
-
-    window.addEventListener('focus', onWindowFocus, false);
+    window.addEventListener("focus", onWindowFocus, false);
     return function () {
-      window.removeEventListener('focus', onWindowFocus, false);
+      window.removeEventListener("focus", onWindowFocus, false);
     };
-  }, [inputRef, isFileDialogActive, onFileDialogCancelCb, useFsAccessApi]);
+  }, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);
   var dragTargetsRef = useRef([]);
 
   var onDocumentDrop = function onDocumentDrop(event) {
@@ -509,14 +506,14 @@ export function useDropzone() {
 
   useEffect(function () {
     if (preventDropOnDocument) {
-      document.addEventListener('dragover', onDocumentDragOver, false);
-      document.addEventListener('drop', onDocumentDrop, false);
+      document.addEventListener("dragover", onDocumentDragOver, false);
+      document.addEventListener("drop", onDocumentDrop, false);
     }
 
     return function () {
       if (preventDropOnDocument) {
-        document.removeEventListener('dragover', onDocumentDragOver);
-        document.removeEventListener('drop', onDocumentDrop);
+        document.removeEventListener("dragover", onDocumentDragOver);
+        document.removeEventListener("drop", onDocumentDrop);
       }
     };
   }, [rootRef, preventDropOnDocument]);
@@ -536,7 +533,7 @@ export function useDropzone() {
         dispatch({
           draggedFiles: draggedFiles,
           isDragActive: true,
-          type: 'setDraggedFiles'
+          type: "setDraggedFiles"
         });
 
         if (onDragEnter) {
@@ -553,7 +550,7 @@ export function useDropzone() {
 
     if (hasFiles && event.dataTransfer) {
       try {
-        event.dataTransfer.dropEffect = 'copy';
+        event.dataTransfer.dropEffect = "copy";
       } catch (_unused) {}
       /* eslint-disable-line no-empty */
 
@@ -589,7 +586,7 @@ export function useDropzone() {
 
     dispatch({
       isDragActive: false,
-      type: 'setDraggedFiles',
+      type: "setDraggedFiles",
       draggedFiles: []
     });
 
@@ -645,7 +642,7 @@ export function useDropzone() {
     dispatch({
       acceptedFiles: acceptedFiles,
       fileRejections: fileRejections,
-      type: 'setFiles'
+      type: "setFiles"
     });
 
     if (onDrop) {
@@ -678,14 +675,16 @@ export function useDropzone() {
     }
 
     dispatch({
-      type: 'reset'
+      type: "reset"
     });
   }, [getFilesFromEvent, setFiles, noDragEventsBubbling]); // Fn for opening the file dialog programmatically
 
   var openFileDialog = useCallback(function () {
-    if (useFsAccessApi && canUseFileSystemAccessAPI()) {
+    // No point to use FS access APIs if context is not secure
+    // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection
+    if (fsAccessApiWorksRef.current) {
       dispatch({
-        type: 'openDialog'
+        type: "openDialog"
       });
       onFileDialogOpenCb(); // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
 
@@ -696,20 +695,33 @@ export function useDropzone() {
       window.showOpenFilePicker(opts).then(function (handles) {
         return getFilesFromEvent(handles);
       }).then(function (files) {
-        return setFiles(files, null);
-      }).catch(function (e) {
-        return onFileDialogCancelCb(e);
-      }).finally(function () {
-        return dispatch({
-          type: 'closeDialog'
+        setFiles(files, null);
+        dispatch({
+          type: "closeDialog"
         });
+      }).catch(function (e) {
+        // AbortError means the user canceled
+        if (isAbort(e)) {
+          onFileDialogCancelCb(e);
+          dispatch({
+            type: "closeDialog"
+          });
+        } else if (isSecurityError(e)) {
+          fsAccessApiWorksRef.current = false; // CORS, so cannot use this API
+          // Try using the input
+
+          if (inputRef.current) {
+            inputRef.current.value = null;
+            inputRef.current.click();
+          }
+        }
       });
       return;
     }
 
     if (inputRef.current) {
       dispatch({
-        type: 'openDialog'
+        type: "openDialog"
       });
       onFileDialogOpenCb();
       inputRef.current.value = null;
@@ -727,16 +739,16 @@ export function useDropzone() {
       event.preventDefault();
       openFileDialog();
     }
-  }, [rootRef, inputRef, openFileDialog]); // Update focus state for the dropzone
+  }, [rootRef, openFileDialog]); // Update focus state for the dropzone
 
   var onFocusCb = useCallback(function () {
     dispatch({
-      type: 'focus'
+      type: "focus"
     });
   }, []);
   var onBlurCb = useCallback(function () {
     dispatch({
-      type: 'blur'
+      type: "blur"
     });
   }, []); // Cb to open the file dialog when click occurs on the dropzone
 
@@ -753,7 +765,7 @@ export function useDropzone() {
     } else {
       openFileDialog();
     }
-  }, [inputRef, noClick, openFileDialog]);
+  }, [noClick, openFileDialog]);
 
   var composeHandler = function composeHandler(fn) {
     return disabled ? null : fn;
@@ -777,7 +789,7 @@ export function useDropzone() {
     return function () {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$refKey = _ref2.refKey,
-          refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
+          refKey = _ref2$refKey === void 0 ? "ref" : _ref2$refKey,
           role = _ref2.role,
           onKeyDown = _ref2.onKeyDown,
           onFocus = _ref2.onFocus,
@@ -798,7 +810,7 @@ export function useDropzone() {
         onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
         onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
         onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
-        role: typeof role === 'string' && role !== '' ? role : 'button'
+        role: typeof role === "string" && role !== "" ? role : "button"
       }, refKey, rootRef), !disabled && !noKeyboard ? {
         tabIndex: 0
       } : {}), rest);
@@ -811,7 +823,7 @@ export function useDropzone() {
     return function () {
       var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref3$refKey = _ref3.refKey,
-          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
+          refKey = _ref3$refKey === void 0 ? "ref" : _ref3$refKey,
           onChange = _ref3.onChange,
           onClick = _ref3.onClick,
           rest = _objectWithoutProperties(_ref3, _excluded4);
@@ -819,13 +831,13 @@ export function useDropzone() {
       var inputProps = _defineProperty({
         accept: accept,
         multiple: multiple,
-        type: 'file',
+        type: "file",
         style: {
-          display: 'none'
+          display: "none"
         },
         onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
-        autoComplete: 'off',
+        autoComplete: "off",
         tabIndex: -1
       }, refKey, inputRef);
 
@@ -857,27 +869,27 @@ export function useDropzone() {
 function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
-    case 'focus':
+    case "focus":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: true
       });
 
-    case 'blur':
+    case "blur":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFocused: false
       });
 
-    case 'openDialog':
+    case "openDialog":
       return _objectSpread(_objectSpread({}, initialState), {}, {
         isFileDialogActive: true
       });
 
-    case 'closeDialog':
+    case "closeDialog":
       return _objectSpread(_objectSpread({}, state), {}, {
         isFileDialogActive: false
       });
 
-    case 'setDraggedFiles':
+    case "setDraggedFiles":
       /* eslint no-case-declarations: 0 */
       var isDragActive = action.isDragActive,
           draggedFiles = action.draggedFiles;
@@ -886,13 +898,13 @@ function reducer(state, action) {
         isDragActive: isDragActive
       });
 
-    case 'setFiles':
+    case "setFiles":
       return _objectSpread(_objectSpread({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
-    case 'reset':
+    case "reset":
       return _objectSpread({}, initialState);
 
     default:
@@ -902,4 +914,4 @@ function reducer(state, action) {
 
 function noop() {}
 
-export { ErrorCode } from './utils';
+export { ErrorCode } from "./utils";

package/dist/es/utils/index.js

@@ -18,12 +18,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import accepts from 'attr-accept'; // Error codes
+import accepts from "attr-accept"; // Error codes
 
-export var FILE_INVALID_TYPE = 'file-invalid-type';
-export var FILE_TOO_LARGE = 'file-too-large';
-export var FILE_TOO_SMALL = 'file-too-small';
-export var TOO_MANY_FILES = 'too-many-files';
+export var FILE_INVALID_TYPE = "file-invalid-type";
+export var FILE_TOO_LARGE = "file-too-large";
+export var FILE_TOO_SMALL = "file-too-small";
+export var TOO_MANY_FILES = "too-many-files";
 export var ErrorCode = {
   FileInvalidType: FILE_INVALID_TYPE,
   FileTooLarge: FILE_TOO_LARGE,
@@ -33,7 +33,7 @@ export var ErrorCode = {
 
 export var getInvalidTypeRejectionErr = function getInvalidTypeRejectionErr(accept) {
   accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
-  var messageSuffix = Array.isArray(accept) ? "one of ".concat(accept.join(', ')) : accept;
+  var messageSuffix = Array.isArray(accept) ? "one of ".concat(accept.join(", ")) : accept;
   return {
     code: FILE_INVALID_TYPE,
     message: "File type must be ".concat(messageSuffix)
@@ -42,23 +42,23 @@ export var getInvalidTypeRejectionErr = function getInvalidTypeRejectionErr(acce
 export var getTooLargeRejectionErr = function getTooLargeRejectionErr(maxSize) {
   return {
     code: FILE_TOO_LARGE,
-    message: "File is larger than ".concat(maxSize, " ").concat(maxSize === 1 ? 'byte' : 'bytes')
+    message: "File is larger than ".concat(maxSize, " ").concat(maxSize === 1 ? "byte" : "bytes")
   };
 };
 export var getTooSmallRejectionErr = function getTooSmallRejectionErr(minSize) {
   return {
     code: FILE_TOO_SMALL,
-    message: "File is smaller than ".concat(minSize, " ").concat(minSize === 1 ? 'byte' : 'bytes')
+    message: "File is smaller than ".concat(minSize, " ").concat(minSize === 1 ? "byte" : "bytes")
   };
 };
 export var TOO_MANY_FILES_REJECTION = {
   code: TOO_MANY_FILES,
-  message: 'Too many files'
+  message: "Too many files"
 }; // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
 // that MIME type will always be accepted
 
 export function fileAccepted(file, accept) {
-  var isAcceptable = file.type === 'application/x-moz-file' || accepts(file, accept);
+  var isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept);
   return [isAcceptable, isAcceptable ? null : getInvalidTypeRejectionErr(accept)];
 }
 export function fileMatchSize(file, minSize, maxSize) {
@@ -104,9 +104,9 @@ export function allFilesAccepted(_ref) {
 // to check event.cancelBubble
 
 export function isPropagationStopped(event) {
-  if (typeof event.isPropagationStopped === 'function') {
+  if (typeof event.isPropagationStopped === "function") {
     return event.isPropagationStopped();
-  } else if (typeof event.cancelBubble !== 'undefined') {
+  } else if (typeof event.cancelBubble !== "undefined") {
     return event.cancelBubble;
   }
 
@@ -120,11 +120,11 @@ export function isEvtWithFiles(event) {
 
 
   return Array.prototype.some.call(event.dataTransfer.types, function (type) {
-    return type === 'Files' || type === 'application/x-moz-file';
+    return type === "Files" || type === "application/x-moz-file";
   });
 }
 export function isKindFile(item) {
-  return _typeof(item) === 'object' && item !== null && item.kind === 'file';
+  return _typeof(item) === "object" && item !== null && item.kind === "file";
 } // allow the entire document to be a drag target
 
 export function onDocumentDragOver(event) {
@@ -132,11 +132,11 @@ export function onDocumentDragOver(event) {
 }
 
 function isIe(userAgent) {
-  return userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('Trident/') !== -1;
+  return userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1;
 }
 
 function isEdge(userAgent) {
-  return userAgent.indexOf('Edge/') !== -1;
+  return userAgent.indexOf("Edge/") !== -1;
 }
 
 export function isIeOrEdge() {
@@ -180,7 +180,7 @@ export function composeEventHandlers() {
  */
 
 export function canUseFileSystemAccessAPI() {
-  return 'showOpenFilePicker' in window;
+  return "showOpenFilePicker" in window;
 }
 /**
  * filePickerOptionsTypes returns the {types} option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
@@ -190,16 +190,38 @@ export function canUseFileSystemAccessAPI() {
  */
 
 export function filePickerOptionsTypes(accept) {
-  accept = typeof accept === 'string' ? accept.split(',') : accept;
+  accept = typeof accept === "string" ? accept.split(",") : accept;
   return [{
-    description: 'everything',
+    description: "everything",
     // TODO: Need to handle filtering more elegantly than this!
-    accept: Array.isArray(accept) // Accept just MIME types as per spec
+    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);
+    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, []));
     }, {}) : {}
   }];
+}
+/**
+ * Check if v is an exception caused by aborting a request (e.g window.showOpenFilePicker()).
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.
+ * @param {any} v
+ * @returns {boolean} True if v is an abort exception.
+ */
+
+export function isAbort(v) {
+  return v instanceof DOMException && (v.name === "AbortError" || v.code === v.ABORT_ERR);
+}
+/**
+ * Check if v is a security error.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/API/DOMException.
+ * @param {any} v
+ * @returns {boolean} True if v is a security error.
+ */
+
+export function isSecurityError(v) {
+  return v instanceof DOMException && (v.name === "SecurityError" || v.code === v.SECURITY_ERR);
 }