react-dropzone 14.3.3 → 14.3.5

package/package.json

@@ -190,7 +190,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.3.3",
+  "version": "14.3.5",
   "engines": {
     "node": ">= 10.13"
   },

package/src/index.js

@@ -703,6 +703,7 @@ export function useDropzone(props = {}) {
       dispatch({
         acceptedFiles,
         fileRejections,
+        isDragReject: fileRejections.length > 0,
         type: "setFiles",
       });
 
@@ -1025,6 +1026,7 @@ function reducer(state, action) {
         ...state,
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections,
+        isDragReject: action.isDragReject,
       };
     case "reset":
       return {

package/src/index.spec.js

@@ -2510,7 +2510,7 @@ describe("useDropzone() hook", () => {
       expect(onDropSpy).toHaveBeenCalledWith(files, [], expect.anything());
     });
 
-    it("sets {acceptedFiles, fileRejections}", async () => {
+    it("sets {acceptedFiles, fileRejections, isDragReject}", async () => {
       const FileList = ({ files = [] }) => (
         <ul>
           {files.map((file) => (
@@ -2558,11 +2558,18 @@ describe("useDropzone() hook", () => {
             "image/*": [],
           }}
         >
-          {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
+          {({
+            getRootProps,
+            getInputProps,
+            acceptedFiles,
+            fileRejections,
+            isDragReject,
+          }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
               <FileList files={acceptedFiles} />
               <RejectedFileList fileRejections={fileRejections} />
+              {isDragReject && "dragReject"}
             </div>
           )}
         </Dropzone>
@@ -2574,6 +2581,7 @@ describe("useDropzone() hook", () => {
       const acceptedFileList = getAcceptedFiles(dropzone);
       expect(acceptedFileList).toHaveLength(images.length);
       expect(matchToFiles(acceptedFileList, images)).toBe(true);
+      expect(dropzone).not.toHaveTextContent("dragReject");
 
       await act(() => fireEvent.drop(dropzone, createDtWithFiles(files)));
 
@@ -2585,6 +2593,7 @@ describe("useDropzone() hook", () => {
       expect(matchToErrorCode(rejectedFileErrorList, "file-invalid-type")).toBe(
         true
       );
+      expect(dropzone).toHaveTextContent("dragReject");
     });
 
     it("resets {isDragActive, isDragAccept, isDragReject}", async () => {

package/src/utils/index.js

@@ -15,15 +15,18 @@ export const ErrorCode = {
   TooManyFiles: TOO_MANY_FILES,
 };
 
-// File Errors
-export const getInvalidTypeRejectionErr = (accept) => {
-  accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
-  const messageSuffix = Array.isArray(accept)
-    ? `one of ${accept.join(", ")}`
-    : accept;
+/**
+ *
+ * @param {string} accept
+ */
+export const getInvalidTypeRejectionErr = (accept = "") => {
+  const acceptArr = accept.split(",");
+  const msg =
+    acceptArr.length > 1 ? `one of ${acceptArr.join(", ")}` : acceptArr[0];
+
   return {
     code: FILE_INVALID_TYPE,
-    message: `File type must be ${messageSuffix}`,
+    message: `File type must be ${msg}`,
   };
 };
 
@@ -50,8 +53,16 @@ export const TOO_MANY_FILES_REJECTION = {
   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) {
   const isAcceptable =
     file.type === "application/x-moz-file" || accepts(file, accept);
@@ -82,7 +93,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]

package/src/utils/index.spec.js

@@ -269,7 +269,7 @@ describe("fileAccepted()", () => {
 
   it("accepts file when multiple accept criteria", () => {
     const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".pdf", ".png"])).toEqual([true, null]);
+    expect(utils.fileAccepted(file, ".pdf,.png")).toEqual([true, null]);
   });
 
   it("rejects file when single accept criteria", () => {
@@ -282,7 +282,7 @@ describe("fileAccepted()", () => {
 
   it("rejects file when multiple accept criteria", () => {
     const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".gif", ".png"])).toEqual([
+    expect(utils.fileAccepted(file, ".gif,.png")).toEqual([
       false,
       {
         code: "file-invalid-type",
@@ -290,13 +290,51 @@ describe("fileAccepted()", () => {
       },
     ]);
   });
+});
 
-  it("rejects file when single accept criteria as array", () => {
-    const file = createFile("hamster.pdf", 100, "application/pdf");
-    expect(utils.fileAccepted(file, [".gif"])).toEqual([
-      false,
-      { code: "file-invalid-type", message: "File type must be .gif" },
-    ]);
+describe("getTooLargeRejectionErr()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("prints byte when maxSize is 1", () => {
+    expect(utils.getTooLargeRejectionErr(1).message).toEqual(
+      "File is larger than 1 byte"
+    );
+  });
+
+  it("prints bytes when maxSize > 1", () => {
+    expect(utils.getTooLargeRejectionErr(100).message).toEqual(
+      "File is larger than 100 bytes"
+    );
+  });
+});
+
+describe("getTooSmallRejectionErr()", () => {
+  /**
+   * @constant
+   * @type {import('./index')}
+   */
+  let utils;
+  beforeEach(async () => {
+    utils = await import("./index");
+  });
+
+  it("prints byte when minSize is 1", () => {
+    expect(utils.getTooSmallRejectionErr(1).message).toEqual(
+      "File is smaller than 1 byte"
+    );
+  });
+
+  it("prints bytes when minSize > 1", () => {
+    expect(utils.getTooSmallRejectionErr(100).message).toEqual(
+      "File is smaller than 100 bytes"
+    );
   });
 });