Add File value support

Author: esamattis

packages/react-zorm/__tests__/parse-form.test.tsx

@@ -155,6 +155,22 @@ describe("with any", () => {
             things: [undefined, { ding: "dong" }],
         });
     });
+
+    test("can handle files ", () => {
+        const form = new FormData();
+        const file = new File(["(⌐□_□)"], "chucknorris.txt", {
+            type: "text/plain",
+        });
+        form.append("myFile", file);
+
+        const res = parseFormAny(form);
+
+        expect(res).toEqual({
+            myFile: file,
+        });
+
+        expect(res.myFile).toBe(file);
+    });
 });
 
 describe("combine chains with parsing", () => {

packages/react-zorm/__tests__/use-zorm.test.tsx

@@ -904,3 +904,105 @@ test.skip("[TYPE ONLY] can narrow validation type to success", () => {
         }
     }
 });
+
+test("can validate files", async () => {
+    const spy = jest.fn();
+
+    const Schema = z.object({
+        myFile: z.instanceof(File).refine((file) => {
+            spy(file.type);
+            return file.type === "image/png";
+        }, "Only .png images are allowed"),
+    });
+
+    function Test() {
+        const zo = useZorm("form", Schema);
+
+        return (
+            <form ref={zo.ref} data-testid="form">
+                <input
+                    data-testid="file"
+                    type="file"
+                    name={zo.fields.myFile()}
+                />
+
+                {zo.errors.myFile((e) => (
+                    <div data-testid="error">{e.message}</div>
+                ))}
+            </form>
+        );
+    }
+
+    render(<Test />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.txt", {
+        type: "text/plain",
+    });
+
+    const fileInput = screen.getByTestId("file") as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+    fireEvent.submit(screen.getByTestId("form"));
+
+    {
+        // TEMP TESTS
+        const form = screen.getByTestId("form") as HTMLFormElement;
+        expect(fileInput.files?.[0]?.name).toBe("chucknorris.txt");
+        const formData = new FormData(form);
+        expect(formData.get("myFile")).toBeInstanceOf(File);
+        const formFile = formData.get("myFile") as File;
+
+        // XXX Bug in jsdom or react testing lib?
+        // FormData cannot read file from the form.
+        expect(formFile.name).toBe("chucknorris.txt");
+    }
+
+    expect(spy).toHaveBeenCalledWith("text/plain");
+
+    expect(screen.queryByTestId("error")).toHaveTextContent(
+        "Only .png images are allowed",
+    );
+});
+
+test("can submit files", async () => {
+    const spy = jest.fn();
+
+    const Schema = z.object({
+        myFile: z.instanceof(File).refine((file) => {
+            return file.type === "image/png";
+        }, "Only .png images are allowed"),
+    });
+
+    function Test() {
+        const zo = useZorm("form", Schema, {
+            onValidSubmit(e) {
+                spy(e.data.myFile.name);
+            },
+        });
+
+        return (
+            <form ref={zo.ref} data-testid="form">
+                <input
+                    data-testid="file"
+                    type="file"
+                    name={zo.fields.myFile()}
+                />
+
+                {zo.errors.myFile((e) => (
+                    <div data-testid="error">{e.message}</div>
+                ))}
+            </form>
+        );
+    }
+
+    render(<Test />);
+
+    const file = new File(["(⌐□_□)"], "chucknorris.png", {
+        type: "image/png",
+    });
+
+    const fileInput = screen.getByTestId("file") as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+    fireEvent.submit(screen.getByTestId("form"));
+
+    expect(spy).toHaveBeenCalledWith("text/plain");
+});

packages/react-zorm/src/types.tsx

@@ -2,7 +2,7 @@ import { SafeParseReturnType, ZodCustomIssue, ZodIssue, ZodType } from "zod";
 
 type Primitive = string | number | boolean | bigint | symbol | undefined | null;
 
-export type DeepNonNullable<T> = T extends Primitive | Date
+export type DeepNonNullable<T> = T extends Primitive | Date | File
     ? NonNullable<T>
     : T extends {}
     ? { [K in keyof T]-?: DeepNonNullable<T[K]> }
@@ -43,6 +43,8 @@ export type FieldChain<T extends object> = {
               : FieldChain<T[P][0]>
         : T[P] extends Date
         ? FieldGetter
+        : T[P] extends File
+        ? FieldGetter
         : T[P] extends object
         ? FieldChain<T[P]>
         : FieldGetter;