react-dropzone 12.1.0 → 13.0.0

package/src/index.spec.js

@@ -41,7 +41,9 @@ describe("useDropzone() hook", () => {
     });
 
     it("sets {accept} prop on the <input>", () => {
-      const accept = "image/jpeg";
+      const accept = {
+        "image/jpeg": [],
+      };
       const { container } = render(
         <Dropzone accept={accept}>
           {({ getRootProps, getInputProps }) => (
@@ -54,12 +56,16 @@ describe("useDropzone() hook", () => {
 
       const input = container.querySelector("input");
 
-      expect(input).toHaveAttribute("accept", accept);
+      expect(input).toHaveAttribute("accept", "image/jpeg");
     });
 
     it("updates {multiple} prop on the <input> when it changes", () => {
       const { container, rerender } = render(
-        <Dropzone accept="image/jpeg">
+        <Dropzone
+          accept={{
+            "image/jpeg": [],
+          }}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -74,7 +80,11 @@ describe("useDropzone() hook", () => {
       );
 
       rerender(
-        <Dropzone accept="image/png">
+        <Dropzone
+          accept={{
+            "image/png": [],
+          }}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -968,6 +978,42 @@ describe("useDropzone() hook", () => {
 
       expect(props.getFilesFromEvent).toHaveBeenCalledTimes(2);
     });
+
+    it("calls {onError} when getFilesFromEvent() rejects", async () => {
+      const data = createDtWithFiles(files);
+
+      const props = {
+        getFilesFromEvent: jest
+          .fn()
+          .mockImplementation(() => Promise.reject("oops :(")),
+        onDragEnter: jest.fn(),
+        onDrop: jest.fn(),
+        onError: jest.fn(),
+      };
+
+      const ui = (
+        <Dropzone {...props}>
+          {({ getRootProps, getInputProps }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+            </div>
+          )}
+        </Dropzone>
+      );
+      const { container, rerender } = render(ui);
+      const dropzone = container.querySelector("div");
+
+      fireDragEnter(dropzone, data);
+      await flushPromises(rerender, ui);
+      expect(props.onDragEnter).not.toHaveBeenCalled();
+
+      fireDrop(dropzone, data);
+      await flushPromises(rerender, ui);
+      expect(props.onDrop).not.toHaveBeenCalled();
+
+      expect(props.getFilesFromEvent).toHaveBeenCalledTimes(2);
+      expect(props.onError).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe("onFocus", () => {
@@ -1368,7 +1414,9 @@ describe("useDropzone() hook", () => {
         <Dropzone
           onDrop={onDropSpy}
           onFileDialogOpen={onFileDialogOpenSpy}
-          accept="application/pdf"
+          accept={{
+            "application/pdf": [],
+          }}
           multiple
           useFsAccessApi={false}
         >
@@ -1425,7 +1473,9 @@ describe("useDropzone() hook", () => {
         <Dropzone
           onDrop={onDropSpy}
           onFileDialogOpen={onFileDialogOpenSpy}
-          accept="application/pdf"
+          accept={{
+            "application/pdf": [],
+          }}
           multiple
         >
           {({ getRootProps, getInputProps, isFileDialogActive }) => (
@@ -1481,7 +1531,9 @@ describe("useDropzone() hook", () => {
         <Dropzone
           onDrop={onDropSpy}
           onFileDialogOpen={onFileDialogOpenSpy}
-          accept="application/pdf"
+          accept={{
+            "application/pdf": [],
+          }}
           multiple
           useFsAccessApi
         >
@@ -1516,7 +1568,6 @@ describe("useDropzone() hook", () => {
         multiple: true,
         types: [
           {
-            description: "everything",
             accept: { "application/pdf": [] },
           },
         ],
@@ -1680,7 +1731,9 @@ describe("useDropzone() hook", () => {
         <Dropzone
           onDrop={onDropSpy}
           onFileDialogOpen={onFileDialogOpenSpy}
-          accept="application/pdf"
+          accept={{
+            "application/pdf": [],
+          }}
           multiple
           useFsAccessApi
         >
@@ -1768,6 +1821,62 @@ describe("useDropzone() hook", () => {
 
       jest.useRealTimers();
     });
+
+    test("showOpenFilePicker() should call {onError} when an unexpected error occurs", async () => {
+      const activeRef = createRef();
+      const active = <span ref={activeRef}>I am active</span>;
+
+      const thenable = createThenable();
+      const showOpenFilePickerMock = jest
+        .fn()
+        .mockReturnValue(thenable.promise);
+
+      window.showOpenFilePicker = showOpenFilePickerMock;
+
+      const onErrorSpy = jest.fn();
+      const onDropSpy = jest.fn();
+      const onFileDialogOpenSpy = jest.fn();
+
+      const ui = (
+        <Dropzone
+          onError={onErrorSpy}
+          onDrop={onDropSpy}
+          onFileDialogOpen={onFileDialogOpenSpy}
+          accept={{
+            "application/pdf": [],
+          }}
+          multiple
+          useFsAccessApi
+        >
+          {({ getRootProps, getInputProps, isFileDialogActive }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isFileDialogActive && active}
+            </div>
+          )}
+        </Dropzone>
+      );
+
+      const { container, rerender } = render(ui);
+
+      const dropzone = container.querySelector("div");
+
+      fireEvent.click(dropzone);
+
+      await flushPromises(rerender, ui);
+
+      expect(activeRef.current).not.toBeNull();
+      expect(dropzone).toContainElement(activeRef.current);
+      expect(onFileDialogOpenSpy).toHaveBeenCalled();
+
+      const err = new Error("oops :(");
+      thenable.cancel(err);
+      await flushPromises(rerender, ui);
+
+      expect(activeRef.current).not.toBeNull();
+      expect(dropzone).toContainElement(activeRef.current);
+      expect(onErrorSpy).toHaveBeenCalledWith(err);
+    });
   });
 
   describe("onKeyDown", () => {
@@ -2215,7 +2324,11 @@ describe("useDropzone() hook", () => {
 
     it("sets {isDragActive} and {isDragReject} of some files are not accepted on dragenter", async () => {
       const ui = (
-        <Dropzone accept="image/*">
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+        >
           {({
             getRootProps,
             getInputProps,
@@ -2269,7 +2382,12 @@ describe("useDropzone() hook", () => {
 
     it("sets {isDragActive, isDragAccept, isDragReject} if any files are rejected and {multiple} is false on dragenter", async () => {
       const ui = (
-        <Dropzone accept="image/*" multiple={false}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          multiple={false}
+        >
           {({
             getRootProps,
             getInputProps,
@@ -2337,7 +2455,11 @@ describe("useDropzone() hook", () => {
 
     it("updates {isDragActive} if {accept} changes mid-drag", async () => {
       const ui = (
-        <Dropzone accept="image/*">
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+        >
           {({
             getRootProps,
             getInputProps,
@@ -2366,7 +2488,11 @@ describe("useDropzone() hook", () => {
       expect(dropzone).not.toHaveTextContent("dragReject");
 
       rerender(
-        <Dropzone accept="text/*">
+        <Dropzone
+          accept={{
+            "text/*": [],
+          }}
+        >
           {({
             getRootProps,
             getInputProps,
@@ -2391,7 +2517,11 @@ describe("useDropzone() hook", () => {
 
     it("resets {isDragActive, isDragAccept, isDragReject} on dragleave", async () => {
       const ui = (
-        <Dropzone accept="image/*">
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+        >
           {({
             getRootProps,
             getInputProps,
@@ -2514,7 +2644,11 @@ describe("useDropzone() hook", () => {
         Array.from(errorList).every((item) => item.textContent === code);
 
       const ui = (
-        <Dropzone accept="image/*">
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+        >
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2586,7 +2720,13 @@ describe("useDropzone() hook", () => {
     it("rejects all files if {multiple} is false and {accept} criteria is not met", async () => {
       const onDropSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDrop={onDropSpy} multiple={false}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDrop={onDropSpy}
+          multiple={false}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2619,7 +2759,13 @@ describe("useDropzone() hook", () => {
     it("rejects all files if {multiple} is false and {accept} criteria is met", async () => {
       const onDropSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDrop={onDropSpy} multiple={false}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDrop={onDropSpy}
+          multiple={false}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2663,7 +2809,9 @@ describe("useDropzone() hook", () => {
       const onDropRejectedSpy = jest.fn();
       const ui = (
         <Dropzone
-          accept="image/*"
+          accept={{
+            "image/*": [],
+          }}
           onDrop={onDropSpy}
           onDropRejected={onDropRejectedSpy}
           multiple={true}
@@ -2718,7 +2866,9 @@ describe("useDropzone() hook", () => {
       const onDropRejectedSpy = jest.fn();
       const ui = (maxFiles) => (
         <Dropzone
-          accept="image/*"
+          accept={{
+            "image/*": [],
+          }}
           onDrop={onDropSpy}
           multiple={true}
           maxFiles={maxFiles}
@@ -2758,7 +2908,9 @@ describe("useDropzone() hook", () => {
       const onDropRejectedSpy = jest.fn();
       const ui = (
         <Dropzone
-          accept="image/*"
+          accept={{
+            "image/*": [],
+          }}
           onDrop={onDropSpy}
           multiple={true}
           maxFiles={3}
@@ -2783,7 +2935,13 @@ describe("useDropzone() hook", () => {
     it("accepts a single files if {multiple} is false and {accept} criteria is met", async () => {
       const onDropSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDrop={onDropSpy} multiple={false}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDrop={onDropSpy}
+          multiple={false}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2855,7 +3013,12 @@ describe("useDropzone() hook", () => {
     it("gets invoked with both accepted/rejected files", async () => {
       const onDropSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDrop={onDropSpy}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDrop={onDropSpy}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2912,7 +3075,12 @@ describe("useDropzone() hook", () => {
     test("onDropAccepted callback is invoked if some files are accepted", async () => {
       const onDropAcceptedSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDropAccepted={onDropAcceptedSpy}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDropAccepted={onDropAcceptedSpy}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2941,7 +3109,12 @@ describe("useDropzone() hook", () => {
     test("onDropRejected callback is invoked if some files are rejected", async () => {
       const onDropRejectedSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDropRejected={onDropRejectedSpy}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDropRejected={onDropRejectedSpy}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -2996,7 +3169,12 @@ describe("useDropzone() hook", () => {
     it("accepts a dropped image when Firefox provides a bogus file type", async () => {
       const onDropSpy = jest.fn();
       const ui = (
-        <Dropzone accept="image/*" onDrop={onDropSpy}>
+        <Dropzone
+          accept={{
+            "image/*": [],
+          }}
+          onDrop={onDropSpy}
+        >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />

package/src/utils/index.js

@@ -175,33 +175,60 @@ export function canUseFileSystemAccessAPI() {
 }
 
 /**
- * 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(
-              (item) =>
-                item === "audio/*" ||
-                item === "video/*" ||
-                item === "image/*" ||
-                item === "text/*" ||
-                /\w+\/[-+.\w]+/g.test(item)
-            )
-            .reduce((a, b) => ({ ...a, [b]: [] }), {})
-        : {},
-    },
-  ];
+export function pickerOptionsFromAccept(accept) {
+  if (isDefined(accept)) {
+    return Object.entries(accept)
+      .filter(([mimeType, ext]) => {
+        let ok = true;
+
+        if (!isMIMEType(mimeType)) {
+          console.warn(
+            `Skipped "${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 "${mimeType}" because an invalid file extension was provided.`
+          );
+          ok = false;
+        }
+
+        return ok;
+      })
+      .map(([mimeType, ext]) => ({
+        accept: {
+          [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((a, [mimeType, ext]) => [...a, mimeType, ...ext], [])
+        // Silently discard invalid entries as pickerOptionsFromAccept warns about these
+        .filter((v) => isMIMEType(v) || isExt(v))
+        .join(",")
+    );
+  }
+
+  return undefined;
 }
 
 /**
@@ -231,3 +258,32 @@ export function isSecurityError(v) {
     (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
+ */