feat(file-dropzone): add validator input and validation fixes #588

Author: ly-tempel-bitweb

skills/tedi-angular/references/components.md

@@ -210,7 +210,7 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
 - **`tedi-file-dropzone` validates itself.** It registers on `NG_VALIDATORS`, so a `formControl` bound
   to it fails with a `rejectedFiles` error (carrying the offending files) while any rejected file is
   still listed — you don't add a validator for that. `Validators.required` alone would pass on a list
-  of visibly broken files, since `keepRejectedFiles` keeps them in the value. Same shape as Angular
+  of visibly broken files whenever `keepRejectedFiles` is on and keeps them in the value. Same shape as Angular
   Material's datepicker: the constraint comes from the component's own inputs (`accept`, `maxSize`), so
   the component owns the rule. No `registerOnValidatorChange` is needed — `validate()` is a pure
   function of the control value, which Angular already revalidates on every change.
@@ -219,11 +219,13 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   URL revoked without diffing the two arrays.
 - **`tedi-file-dropzone` selects files, it does not upload them.** It validates against `accept` and
   `maxSize` and hands you the list; the upload, and setting each file's `isLoading` / `isValid` as it
-  progresses, is yours. `keepRejectedFiles` decides what happens to a file that fails `accept` or
-  `maxSize`: on (the default) keeps it in the list with its reason in that file's `error`, leaving the
-  dropzone's own border neutral — so the form value holds it with `isValid: false` and you must filter
-  on `isValid` before uploading. Off discards it instead and summarises every rejection in one message
-  under the dropzone, which also paints the border red. `error` is writable, so a failure the upload
+  progresses, is yours. A `validator` input adds a rule of your own on top, run only once the
+  built-in restrictions pass; the reason it returns lands on that file's `error` and joins the summary,
+  with the files it rejected named after it. `keepRejectedFiles` decides what happens to a file that
+  fails `accept`, `maxSize` or `validator`: off (the default) discards it and summarises every rejection in one message under the
+  dropzone, which paints the border red. On keeps it in the list with its reason in that file's
+  `error`, leaving the border neutral — so the form value holds it with `isValid: false` and you must
+  filter on `isValid` before uploading. `error` is writable, so a failure the upload
   came back with lands on the file it belongs to.
 - **Selecting a file that is already listed is skipped**, matched on name, size and mtime — so two
   different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to

src/tedi/components/form/file-dropzone/file-dropzone.component.html

@@ -38,6 +38,7 @@
   [multiple]="multiple()"
   [disabled]="isDisabled()"
   (change)="handleSelection($event)"
+  (cancel)="handleDialogCancel()"
 />
 
 @if (rejectionError(); as error) {

src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts

@@ -516,6 +516,94 @@ describe("FileDropzoneComponent", () => {
       expect(text(".tedi-attachment__feedback")).toBe("Vale formaat");
     });
 
+    const noSpaces = (file: File) =>
+      file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid." : null;
+
+    it("rejects a file through a validator of the consumer's own", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(false);
+      expect(component.files()[0].error).toBe(
+        "Failinimes ei tohi olla tühikuid.",
+      );
+    });
+
+    it("clears the summary once the last file is removed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text")).not.toContain("extension-rejected");
+    });
+
+    it("keeps the summary while other files are still listed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("a.pdf"), makeFile("b.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files().length).toBe(1);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+    });
+
+    it("names every file a custom rule rejected in one message", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf"), makeFile("a b.pdf")]);
+
+      expect(text("tedi-feedback-text")).toContain(
+        "Failinimes ei tohi olla tühikuid: 'my scan.pdf', 'a b.pdf'",
+      );
+    });
+
+    it("leaves the validator unrun on a file the restrictions already reject", () => {
+      const validator = jest.fn(noSpaces);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("validator", validator);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
+
+      expect(validator).not.toHaveBeenCalled();
+    });
+
+    it("accepts a file its validator returns nothing for", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("korras.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(true);
+      expect(component.files()[0].error).toBeUndefined();
+    });
+
     it("reports every restriction a file breaks, not just the first", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("maxSize", 50);
@@ -567,6 +655,7 @@ describe("FileDropzoneComponent", () => {
     it("leaves the border alone when rejected files carry their own reason", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
       fixture.detectChanges();
 
       selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
@@ -1019,6 +1108,7 @@ describe("FileDropzoneComponent", () => {
     [formControl]="control"
     accept=".pdf"
     multiple
+    keepRejectedFiles
   />`,
 })
 class ReactiveFormsHostComponent {
@@ -1057,11 +1147,37 @@ describe("FileDropzoneComponent with reactive forms", () => {
     ]);
   });
 
-  it("marks the control touched on blur", () => {
+  it("marks the control touched when the user moves on from the zone", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(true);
+
     expect(host.control.touched).toBe(false);
     zoneOf(fixture).dispatchEvent(new Event("blur"));
     fixture.detectChanges();
 
+    expect(host.control.touched).toBe(true);
+    hasFocus.mockRestore();
+  });
+
+  it("ignores the blur that opening the file dialog causes", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    zoneOf(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(false);
+    hasFocus.mockRestore();
+  });
+
+  it("marks the control touched when the dialog is dismissed", () => {
+    fileInput(fixture).dispatchEvent(new Event("cancel"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("marks the control touched when files are picked", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+
     expect(host.control.touched).toBe(true);
   });