fix: apply custom validator on {isDragAccept,isDragReject}

Author: Roland Groza

src/index.js

@@ -258,9 +258,9 @@ Dropzone.propTypes = {
   onError: PropTypes.func,
 
   /**
-   * Custom validation function
+   * Custom validation function. It must return null if there's no errors.
    * @param {File} file
-   * @returns {FileError|FileError[]}
+   * @returns {FileError|FileError[]|null}
    */
   validator: PropTypes.func,
 };
@@ -577,6 +577,7 @@ export function useDropzone(props = {}) {
                 maxSize,
                 multiple,
                 maxFiles,
+                validator,
               });
             const isDragReject = fileCount > 0 && !isDragAccept;
 
@@ -604,6 +605,7 @@ export function useDropzone(props = {}) {
       maxSize,
       multiple,
       maxFiles,
+      validator,
     ]
   );
 

src/index.spec.js

@@ -3441,6 +3441,34 @@ describe("useDropzone() hook", () => {
         expect.anything()
       );
     });
+
+    it("sets {isDragAccept, isDragReject}", async () => {
+      const data = createDtWithFiles(images);
+      const validator = () => ({
+        code: "not-allowed",
+        message: "Cannot do this!",
+      });
+
+      const ui = (
+        <Dropzone validator={validator} multiple={true}>
+          {({ getRootProps, getInputProps, isDragAccept, isDragReject }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragAccept && "dragAccept"}
+              {isDragReject && "dragReject"}
+            </div>
+          )}
+        </Dropzone>
+      );
+
+      const { container } = render(ui);
+      const dropzone = container.querySelector("div");
+
+      await act(() => fireEvent.dragEnter(dropzone, data));
+
+      expect(dropzone).not.toHaveTextContent("dragAccept");
+      expect(dropzone).toHaveTextContent("dragReject");
+    });
   });
 
   describe("accessibility", () => {

src/utils/index.js

@@ -76,13 +76,26 @@ function isDefined(value) {
   return value !== undefined && value !== null;
 }
 
+/**
+ *
+ * @param {object} options
+ * @param {File[]} options.files
+ * @param {string|string[]} [options.accept]
+ * @param {number} [options.minSize]
+ * @param {number} [options.maxSize]
+ * @param {boolean} [options.multiple]
+ * @param {number} [options.maxFiles]
+ * @param {(f: File) => FileError|FileError[]|null} [options.validator]
+ * @returns
+ */
 export function allFilesAccepted({
   files,
   accept,
   minSize,
   maxSize,
   multiple,
   maxFiles,
+  validator,
 }) {
   if (
     (!multiple && files.length > 1) ||
@@ -94,7 +107,8 @@ export function allFilesAccepted({
   return files.every((file) => {
     const [accepted] = fileAccepted(file, accept);
     const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
-    return accepted && sizeMatch;
+    const customErrors = validator ? validator(file) : null;
+    return accepted && sizeMatch && !customErrors;
   });
 }
 
@@ -287,3 +301,13 @@ export function isExt(v) {
 /**
  * @typedef {Object.<string, string[]>} AcceptProp
  */
+
+/**
+ * @typedef {object} FileError
+ * @property {string} message
+ * @property {ErrorCode|string} code
+ */
+
+/**
+ * @typedef {"file-invalid-type"|"file-too-large"|"file-too-small"|"too-many-files"} ErrorCode
+ */

src/utils/index.spec.js

@@ -344,6 +344,13 @@ describe("allFilesAccepted()", () => {
     expect(
       utils.allFilesAccepted({ files, multiple: true, maxFiles: 1 })
     ).toEqual(false);
+
+    expect(
+      utils.allFilesAccepted({
+        files,
+        validator: () => ({ code: "not-allowed", message: "Cannot do this!" }),
+      })
+    ).toEqual(false);
   });
 });