react-dropzone 14.2.9 → 14.3.8

package/README.md

@@ -339,6 +339,19 @@ Also keep in mind that the FS access API can only be used in [secure contexts](h
 
 **NOTE** You can enable using the FS access API with the `useFsAccessApi` property: `useDropzone({useFsAccessApi: true})`.
 
+### File System Access API
+
+When setting `useFsAccessApi` to `true`, you're switching to the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) (see the [file system access](https://wicg.github.io/file-system-access/) RFC).
+
+What this essentially does is that it will use the [showOpenFilePicker](https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker) method to open the file picker window so that the user can select files.
+
+In contrast, the traditional way (when the `useFsAccessApi` is not set to `true` or not specified) uses an `<input type="file">` (see [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)) on which a click event is triggered.
+
+With the use of the file system access API enabled, there's a couple of caveats to keep in mind:
+1. The users will not be able to select directories
+2. It requires the app to run in a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts)
+3. In [Electron](https://www.electronjs.org/), the path may not be set (see [#1249](https://github.com/react-dropzone/react-dropzone/issues/1249))
+
 ## 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).
 
@@ -424,5 +437,8 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 ### Hosting
 [react-dropzone.js.org](https://react-dropzone.js.org/) hosting provided by [netlify](https://www.netlify.com/).
 
+## Contribute
+Checkout the organization [CONTRIBUTING.md](https://github.com/react-dropzone/.github/blob/main/CONTRIBUTING.md).
+
 ## License
 MIT

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 { acceptPropAsAcceptAttr, allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, canUseFileSystemAccessAPI, isAbort, isEvtWithFiles, isIeOrEdge, isPropagationStopped, isSecurityError, onDocumentDragOver, pickerOptionsFromAccept, 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.js";
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -172,7 +172,7 @@ Dropzone.propTypes = {
   /**
    * Use this to provide a custom file aggregator
    *
-   * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+   * @param {(DragEvent|Event|Array<FileSystemFileHandle>)} event A drag event or input change event (if files were selected via the file dialog)
    */
   getFilesFromEvent: PropTypes.func,
 
@@ -326,7 +326,7 @@ export default Dropzone;
  * in a asynchronous fashion, from drag or input change events.
  *
  * @callback getFilesFromEvent
- * @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+ * @param {(DragEvent|Event|Array<FileSystemFileHandle>)} event A drag event or input change event (if files were selected via the file dialog)
  * @returns {(File[]|Promise<File[]>)}
  */
 
@@ -701,6 +701,7 @@ export function useDropzone() {
     dispatch({
       acceptedFiles: acceptedFiles,
       fileRejections: fileRejections,
+      isDragReject: fileRejections.length > 0,
       type: "setFiles"
     });
 
@@ -898,7 +899,16 @@ export function useDropzone() {
         multiple: multiple,
         type: "file",
         style: {
-          display: "none"
+          border: 0,
+          clip: "rect(0, 0, 0, 0)",
+          clipPath: "inset(50%)",
+          height: "1px",
+          margin: "0 -1px -1px 0",
+          overflow: "hidden",
+          padding: 0,
+          position: "absolute",
+          width: "1px",
+          whiteSpace: "nowrap"
         },
         onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
@@ -956,7 +966,8 @@ function reducer(state, action) {
     case "setFiles":
       return _objectSpread(_objectSpread({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
-        fileRejections: action.fileRejections
+        fileRejections: action.fileRejections,
+        isDragReject: action.isDragReject
       });
 
     case "reset":
@@ -969,4 +980,4 @@ function reducer(state, action) {
 
 function noop() {}
 
-export { ErrorCode } from "./utils";
+export { ErrorCode } from "./utils/index.js";

package/dist/es/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/es/utils/index.js

@@ -38,14 +38,19 @@ export var ErrorCode = {
   FileTooLarge: FILE_TOO_LARGE,
   FileTooSmall: FILE_TOO_SMALL,
   TooManyFiles: TOO_MANY_FILES
-}; // File Errors
+};
+/**
+ *
+ * @param {string} accept
+ */
 
-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;
+export var getInvalidTypeRejectionErr = function getInvalidTypeRejectionErr() {
+  var accept = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var acceptArr = accept.split(",");
+  var msg = acceptArr.length > 1 ? "one of ".concat(acceptArr.join(", ")) : acceptArr[0];
   return {
     code: FILE_INVALID_TYPE,
-    message: "File type must be ".concat(messageSuffix)
+    message: "File type must be ".concat(msg)
   };
 };
 export var getTooLargeRejectionErr = function getTooLargeRejectionErr(maxSize) {
@@ -63,8 +68,17 @@ export var getTooSmallRejectionErr = function getTooSmallRejectionErr(minSize) {
 export var TOO_MANY_FILES_REJECTION = {
   code: 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
+};
+/**
+ * Check if file is accepted.
+ *
+ * Firefox versions prior to 53 return a bogus MIME type for every file drag,
+ * so dragovers with that MIME type will always be accepted.
+ *
+ * @param {File} file
+ * @param {string} accept
+ * @returns
+ */
 
 export function fileAccepted(file, accept) {
   var isAcceptable = file.type === "application/x-moz-file" || accepts(file, accept);
@@ -88,7 +102,7 @@ function isDefined(value) {
  *
  * @param {object} options
  * @param {File[]} options.files
- * @param {string|string[]} [options.accept]
+ * @param {string} [options.accept]
  * @param {number} [options.minSize]
  * @param {number} [options.maxSize]
  * @param {boolean} [options.multiple]
@@ -303,7 +317,7 @@ export function isSecurityError(v) {
  */
 
 export function isMIMEType(v) {
-  return v === "audio/*" || v === "video/*" || v === "image/*" || v === "text/*" || /\w+\/[-+.\w]+/g.test(v);
+  return v === "audio/*" || v === "video/*" || v === "image/*" || v === "text/*" || v === "application/*" || /\w+\/[-+.\w]+/g.test(v);
 }
 /**
  * Check if v is a file extension.