react-dropzone 12.0.6 → 14.0.0

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

package/src/utils/index.spec.js

@@ -3,6 +3,10 @@ beforeEach(() => {
 });
 
 describe("fileMatchSize()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -63,6 +67,10 @@ describe("fileMatchSize()", () => {
 });
 
 describe("isIeOrEdge", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -98,6 +106,10 @@ describe("isIeOrEdge", () => {
 
 describe("isKindFile()", () => {
   it('should return true for DataTransferItem of kind "file"', async () => {
+    /**
+     * @constant
+     * @type {import('./index')}
+     */
     const utils = await import("./index");
     expect(utils.isKindFile({ kind: "file" })).toBe(true);
     expect(utils.isKindFile({ kind: "text/html" })).toBe(false);
@@ -109,6 +121,10 @@ describe("isKindFile()", () => {
 describe("isPropagationStopped()", () => {
   const trueFn = jest.fn(() => true);
 
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -130,6 +146,10 @@ describe("isPropagationStopped()", () => {
 });
 
 describe("isEvtWithFiles()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -176,7 +196,11 @@ describe("isEvtWithFiles()", () => {
   });
 });
 
-describe("composeEventHandlers", () => {
+describe("composeEventHandlers()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -223,7 +247,11 @@ describe("composeEventHandlers", () => {
   });
 });
 
-describe("fileAccepted", () => {
+describe("fileAccepted()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -273,6 +301,10 @@ describe("fileAccepted", () => {
 });
 
 describe("allFilesAccepted()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -316,6 +348,10 @@ describe("allFilesAccepted()", () => {
 });
 
 describe("ErrorCode", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -330,6 +366,10 @@ describe("ErrorCode", () => {
 });
 
 describe("canUseFileSystemAccessAPI()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -346,87 +386,109 @@ describe("canUseFileSystemAccessAPI()", () => {
   });
 });
 
-describe("filePickerOptionsTypes()", () => {
+describe("pickerOptionsFromAccept()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
   });
 
-  it("should return proper types when the arg is a MIME type", () => {
-    expect(utils.filePickerOptionsTypes("application/zip")).toEqual([
-      {
-        description: "everything",
-        accept: { "application/zip": [] },
-      },
-    ]);
-  });
-
-  it("should return proper types when the arg is an array of MIME types", () => {
+  it("converts the {accept} prop to file picker options", () => {
     expect(
-      utils.filePickerOptionsTypes(["application/zip", "application/json"])
+      utils.pickerOptionsFromAccept({
+        "image/*": [".png", ".jpg"], // ok
+        "text/*": [".txt", ".pdf"], // ok
+        "audio/*": ["mp3"], // not ok
+        "*": [".p12"], // not ok
+      })
     ).toEqual([
       {
-        description: "everything",
         accept: {
-          "application/zip": [],
-          "application/json": [],
+          "image/*": [".png", ".jpg"],
         },
       },
-    ]);
-  });
-
-  it("should exclude anything that's not a MIME type", () => {
-    expect(
-      utils.filePickerOptionsTypes([
-        "audio/*",
-        "video/*",
-        "image/*",
-        ".txt",
-        "text/*",
-      ])
-    ).toEqual([
       {
-        description: "everything",
         accept: {
-          "audio/*": [],
-          "video/*": [],
-          "image/*": [],
-          "text/*": [],
+          "text/*": [".txt", ".pdf"],
         },
       },
     ]);
   });
+});
+
+describe("acceptPropAsAcceptAttr()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
 
-  it("should work with comma separated string of MIME types", () => {
+  it("converts {accept} to an array of strings", () => {
     expect(
-      utils.filePickerOptionsTypes(
-        "audio/*,video/*,image/*,.txt,text/*,application/zip"
-      )
-    ).toEqual([
-      {
-        description: "everything",
-        accept: {
-          "audio/*": [],
-          "video/*": [],
-          "image/*": [],
-          "text/*": [],
-          "application/zip": [],
-        },
-      },
-    ]);
+      utils.acceptPropAsAcceptAttr({
+        "image/*": [".png", ".jpg"],
+        "text/*": [".txt", ".pdf"],
+        "audio/*": ["mp3"], // `mp3` not ok
+        "*": [".p12"], // `*` not ok
+      })
+    ).toEqual("image/*,.png,.jpg,text/*,.txt,.pdf,audio/*,.p12");
   });
+});
 
-  it("should return empty otherwise", () => {
-    expect(utils.filePickerOptionsTypes("")).toEqual([
-      {
-        description: "everything",
-        accept: {},
-      },
-    ]);
+describe("isMIMEType()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("checks that the value is a valid MIME type string", () => {
+    expect(utils.isMIMEType("text/html")).toBe(true);
+    expect(utils.isMIMEType("text/*")).toBe(true);
+    expect(utils.isMIMEType("image/*")).toBe(true);
+    expect(utils.isMIMEType("video/*")).toBe(true);
+    expect(utils.isMIMEType("audio/*")).toBe(true);
+    expect(utils.isMIMEType("test/*")).toBe(false);
+    expect(utils.isMIMEType("text")).toBe(false);
+    expect(utils.isMIMEType("")).toBe(false);
+    expect(utils.isMIMEType(undefined)).toBe(false);
+  });
+});
+
+describe("isExt()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("checks that the value is a valid file extension", () => {
+    expect(utils.isExt(".jpg")).toBe(true);
+    expect(utils.isExt("me.jpg")).toBe(true);
+    expect(utils.isExt("me.prev.png")).toBe(true);
+    expect(utils.isExt("")).toBe(false);
+    expect(utils.isExt("text")).toBe(false);
+    expect(utils.isExt(undefined)).toBe(false);
   });
 });
 
 describe("isAbort()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");
@@ -453,6 +515,10 @@ describe("isAbort()", () => {
 });
 
 describe("isSecurityError()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
   let utils;
   beforeEach(async () => {
     utils = await import("./index");

package/typings/react-dropzone.d.ts

@@ -28,7 +28,7 @@ export interface FileRejection {
 }
 
 export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
-  accept?: string | string[];
+  accept?: Accept;
   minSize?: number;
   maxSize?: number;
   maxFiles?: number;
@@ -66,7 +66,6 @@ export type DropzoneState = DropzoneRef & {
   isDragAccept: boolean;
   isDragReject: boolean;
   isFileDialogActive: boolean;
-  draggedFiles: File[];
   acceptedFiles: File[];
   fileRejections: FileRejection[];
   rootRef: React.RefObject<HTMLElement>;
@@ -90,3 +89,7 @@ export interface DropzoneInputProps
 }
 
 type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
+
+export interface Accept {
+  [key: string]: string[];
+}

package/typings/tests/accept.tsx

@@ -12,7 +12,9 @@ export default class Accept extends React.Component {
       <section>
         <div className="dropzone">
           <Dropzone
-            accept="image/jpeg, image/png"
+            accept={{
+              "image/*": [".jpeg", ".png"],
+            }}
             onDrop={(accepted, rejected) => {
               this.setState({ accepted, rejected });
             }}
@@ -50,39 +52,3 @@ export default class Accept extends React.Component {
     );
   }
 }
-
-export const acceptExt = (
-  <Dropzone accept=".jpeg,.png">
-    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
-      <div {...getRootProps()}>
-        {isDragAccept && "All files will be accepted"}
-        {isDragReject && "Some files will be rejected"}
-        {isDragActive && "Drop some files here ..."}
-      </div>
-    )}
-  </Dropzone>
-);
-
-export const acceptMime = (
-  <Dropzone accept="image/jpeg, image/png">
-    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
-      <div {...getRootProps()}>
-        {isDragAccept && "All files will be accepted"}
-        {isDragReject && "Some files will be rejected"}
-        {isDragActive && "Drop some files here ..."}
-      </div>
-    )}
-  </Dropzone>
-);
-
-export const acceptArray = (
-  <Dropzone accept={["image/jpeg", "image/png"]}>
-    {({ getRootProps, isDragActive, isDragAccept, isDragReject }) => (
-      <div {...getRootProps()}>
-        {isDragAccept && "All files will be accepted"}
-        {isDragReject && "Some files will be rejected"}
-        {isDragActive && "Drop some files here ..."}
-      </div>
-    )}
-  </Dropzone>
-);

package/typings/tests/all.tsx

@@ -25,7 +25,9 @@ export default class Test extends React.Component {
           noDragEventsBubbling={false}
           disabled
           multiple={false}
-          accept="*.png"
+          accept={{
+            "image/*": [".png"],
+          }}
           useFsAccessApi={false}
         >
           {({ getRootProps, getInputProps }) => (