react-dropzone 19.3.0 → 20.1.0

package/src/index.tsx

@@ -7,10 +7,10 @@ import {
   canUseFileSystemAccessAPI,
   composeEventHandlers,
   ErrorCode,
+  evaluateDragFiles,
   fileAccepted,
   fileMatchSize,
   flattenAccept,
-  getDragVerdict,
   isAbort,
   isEvtWithFiles,
   isIeOrEdge,
@@ -22,7 +22,13 @@ import {
   pickerOptionsFromAccept,
   TOO_MANY_FILES_REJECTION
 } from "./utils";
-import type {Accept, AcceptGroup, FileError, ValidatorResult} from "./utils";
+import type {
+  Accept,
+  AcceptGroup,
+  DragFileRejection as UtilsDragFileRejection,
+  FileError,
+  ValidatorResult
+} from "./utils";
 
 export type {Accept, AcceptGroup, FileError, FileWithPath, ValidatorResult};
 export {ErrorCode};
@@ -36,6 +42,8 @@ export interface FileRejection {
   errors: readonly FileError[];
 }
 
+export type DragFileRejection = UtilsDragFileRejection<FileWithPath | DataTransferItem>;
+
 type SharedProps = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
 
 export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
@@ -116,6 +124,13 @@ export type DropzoneState = DropzoneRef & {
   isProcessing: boolean;
   acceptedFiles: readonly FileWithPath[];
   fileRejections: readonly FileRejection[];
+  /**
+   * Rejections that can be determined before drop. Standard drag events expose
+   * `DataTransferItem`s with a MIME type but no name or size, so extension, size, and custom
+   * validator failures are only available in {@link fileRejections} after drop. In practice this
+   * state can report MIME-type and surplus-file errors during a standard browser drag.
+   */
+  dragFileRejections: readonly DragFileRejection[];
   rootRef: React.RefObject<HTMLElement>;
   inputRef: React.RefObject<HTMLInputElement>;
   getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
@@ -171,6 +186,7 @@ interface DropzoneInternalState {
   isProcessing: boolean;
   acceptedFiles: FileWithPath[];
   fileRejections: FileRejection[];
+  dragFileRejections: DragFileRejection[];
 }
 
 /**
@@ -196,7 +212,8 @@ const initialState: DropzoneInternalState = {
   isDragGlobal: false,
   isProcessing: false,
   acceptedFiles: [],
-  fileRejections: []
+  fileRejections: [],
+  dragFileRejections: []
 };
 
 /**
@@ -459,28 +476,30 @@ export function useDropzone(props: DropzoneOptions = {}): DropzoneState {
               return;
             }
 
-            const fileCount = files.length;
             // During a drag we only have DataTransferItems (MIME type, no name/size), so the
             // custom validator can't run yet - a validator-configured dropzone is "unknown" until
-            // drop rather than a misleading accept/reject. See getDragVerdict for the details.
-            const verdict =
-              fileCount > 0
-                ? getDragVerdict({
-                    files: files as Array<File | DataTransferItem>,
+            // drop rather than a misleading accept/reject. The verdict and rejection details come
+            // from one evaluation so the two states cannot disagree.
+            const evaluation =
+              files.length > 0
+                ? evaluateDragFiles({
+                    files: files as Array<FileWithPath | DataTransferItem>,
                     accept: acceptAttr,
                     minSize,
                     maxSize,
                     multiple,
                     maxFiles,
-                    validator
+                    validator,
+                    getErrorMessage
                   })
                 : null;
 
             dispatch({
-              isDragAccept: verdict === "accept",
-              isDragReject: verdict === "reject",
-              isDragUnknown: verdict === "unknown",
+              isDragAccept: evaluation?.verdict === "accept",
+              isDragReject: evaluation?.verdict === "reject",
+              isDragUnknown: evaluation?.verdict === "unknown",
               isDragActive: true,
+              dragFileRejections: evaluation?.rejections ?? [],
               type: "setDraggedFiles"
             });
 
@@ -501,7 +520,8 @@ export function useDropzone(props: DropzoneOptions = {}): DropzoneState {
       maxSize,
       multiple,
       maxFiles,
-      validator
+      validator,
+      getErrorMessage
     ]
   );
 
@@ -558,7 +578,8 @@ export function useDropzone(props: DropzoneOptions = {}): DropzoneState {
         isDragActive: false,
         isDragAccept: false,
         isDragReject: false,
-        isDragUnknown: false
+        isDragUnknown: false,
+        dragFileRejections: []
       });
 
       if (isEvtWithFiles(event) && onDragLeave) {
@@ -1058,7 +1079,8 @@ function reducer(state: DropzoneInternalState, action: any): DropzoneInternalSta
         isDragActive: action.isDragActive,
         isDragAccept: action.isDragAccept,
         isDragReject: action.isDragReject,
-        isDragUnknown: action.isDragUnknown
+        isDragUnknown: action.isDragUnknown,
+        dragFileRejections: action.dragFileRejections
       };
     case "setProcessing":
       return {
@@ -1070,6 +1092,7 @@ function reducer(state: DropzoneInternalState, action: any): DropzoneInternalSta
         ...state,
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections,
+        dragFileRejections: [],
         isProcessing: false,
         isDragReject: false,
         isDragUnknown: false

package/src/utils/index.ts

@@ -207,6 +207,19 @@ export function allFilesAccepted({
  */
 export type DragVerdict = "accept" | "reject" | "unknown";
 
+/**
+ * A file rejected by the checks that can run during a drag.
+ */
+export interface DragFileRejection<T extends File | DataTransferItem = File | DataTransferItem> {
+  file: T;
+  errors: readonly FileError[];
+}
+
+export interface DragEvaluation<T extends File | DataTransferItem = File | DataTransferItem> {
+  verdict: DragVerdict;
+  rejections: DragFileRejection<T>[];
+}
+
 /**
  * Classify a set of dragged files for the `isDragAccept`/`isDragReject`/`isDragUnknown` states.
  *
@@ -224,16 +237,17 @@ export type DragVerdict = "accept" | "reject" | "unknown";
  *
  * The full check (including the `validator`) still runs on drop in {@link fileAccepted}/`setFiles`.
  */
-export function getDragVerdict({
+export function evaluateDragFiles<T extends File | DataTransferItem>({
   files,
   accept,
   minSize,
   maxSize,
   multiple,
   maxFiles = 0,
-  validator
+  validator,
+  getErrorMessage
 }: {
-  files: Array<File | DataTransferItem>;
+  files: T[];
   accept?: string;
   minSize?: number;
   maxSize?: number;
@@ -242,24 +256,52 @@ export function getDragVerdict({
   // The validator is never invoked here (see the note above), so its async variant is accepted
   // purely so the same `validator` prop is assignable during a drag.
   validator?: (file: File) => ValidatorResult | Promise<ValidatorResult>;
-}): DragVerdict {
-  // The file count is knowable during a drag, so an over-the-limit selection is a confident reject.
-  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 && files.length > maxFiles)) {
-    return "reject";
+  getErrorMessage?: (error: FileError, file: File) => string;
+}): DragEvaluation<T> {
+  const acceptedFiles: T[] = [];
+  const rejections: DragFileRejection<T>[] = [];
+
+  const localizeError = (error: FileError, file: T): FileError =>
+    getErrorMessage && typeof File !== "undefined" && file instanceof File
+      ? {...error, message: getErrorMessage(error, file)}
+      : error;
+
+  files.forEach(file => {
+    const [accepted, acceptError] = fileAccepted(file as File, accept);
+    const [sizeMatch, sizeError] = fileMatchSize(file as File, minSize, maxSize);
+
+    if (accepted && sizeMatch) {
+      acceptedFiles.push(file);
+    } else {
+      rejections.push({
+        file,
+        errors: [acceptError, sizeError]
+          .filter((error): error is FileError => error != null)
+          .map(error => localizeError(error, file))
+      });
+    }
+  });
+
+  // Match the drop path: files that already failed a per-file check do not consume the limit,
+  // and only otherwise-valid surplus files receive a too-many-files rejection.
+  const acceptedFilesLimit = multiple ? (maxFiles >= 1 ? maxFiles : Number.POSITIVE_INFINITY) : 1;
+  if (acceptedFiles.length > acceptedFilesLimit) {
+    acceptedFiles.slice(acceptedFilesLimit).forEach(file => {
+      rejections.push({file, errors: [localizeError(TOO_MANY_FILES_REJECTION, file)]});
+    });
   }
 
-  const confidentlyRejected = files.some(file => {
-    const [accepted] = fileAccepted(file as File, accept);
-    const [sizeMatch] = fileMatchSize(file as File, minSize, maxSize);
-    return !accepted || !sizeMatch;
-  });
-  if (confidentlyRejected) {
-    return "reject";
+  if (rejections.length > 0) {
+    return {verdict: "reject", rejections};
   }
 
   // Built-in checks pass. A custom validator can only ever add rejections on drop, never rescue
   // one - so with a validator present the drag outcome is unknown until we have real Files.
-  return validator ? "unknown" : "accept";
+  return {verdict: validator ? "unknown" : "accept", rejections};
+}
+
+export function getDragVerdict(options: Parameters<typeof evaluateDragFiles>[0]): DragVerdict {
+  return evaluateDragFiles(options).verdict;
 }
 
 // React's synthetic events has event.isPropagationStopped,