Validate files?

[vedantroy]

Is it possible to validate file uploads using this library?
I'm not sure what the proper type would be inside of a yup schema.

[airjp73]

I can't really speak to the specifics of how to construct a yup schema for this, but you can definitely validate files in this library. If you were using zod, there's a file helper in zod-form-data.

[vedantroy]

Thanks for fast response.

I was also wondering, do you know how it might be possible to handle an array of files?
I've gotten decently far. It seems like I need to use useSubmit instead of the default submission strategy because I need to submit an array of files. Inside the useSubmit, I can attach the array of File objects. So far so good.

However ..., there's a question of how to generate the value for the validator. I can't use a controlled component setup here since no input can accept multiple files. Well, I'll figure it out & post results here, might be interesting.

[vedantroy]

@airjp73 Not sure if this is a bug or not. But I found the following:

• Here's an example form submission
  

However, the submission is rejected with:

I think this encoding of the form data looks accurate to me (for arrays). So I'm not sure what's up here. I'll bring a debugger & investigate.

The server validator has:

    [INPUT_FILES]: zod.array(zod.string()),

in its schema where INPUT_FILES is Files.

[vedantroy]

Nevermind. Figured it out. Need to use a file upload handler. This allows for files to be represented the same way on the client & the server!

    const handler = unstable_createMemoryUploadHandler({ maxFileSize: DataUnit.MEGABYTE.toBytes(5) })
    const formData = await unstable_parseMultipartFormData(
        request,
        handler
    );
    const fieldValues = await serverValidator.validate(formData);
    if (fieldValues.error) return validationError(fieldValues.error);

[vedantroy]

@airjp73 Is there a way to set a form value that derives value solely from JS? I'm not sure how to explain this so here's an example:

• Further down in the code (not shown in this example) setFiles is called which sets files with a value of File[]
  • The useControlField is useless right now, it could just as well be useState.
• When I submit (right now), I manually add the files to the form data. So far, no problem. Then, I can validate without issue on the server. However, ideally I'd like to do some sort of validation on the client. Specifically, I'd like to check if the files are too large on the client before sending them to the server
• Not really sure how to do that with this setup

    const [files, setFiles] = useControlField<File[]>(INPUT_FILES, "submit-files");
    const submit = useSubmit();

    return (
        <div className="bg-gray-100 flex-1 z-0">
            <ValidatedForm
                id="submit-files"
                onSubmit={(d, e: React.FormEvent) => {
                    e.preventDefault();
                    const formData = new FormData();
                    formData.set(INPUT_DESCRIPTION, d.Description);
                    formData.set(INPUT_NAME, d.Name);
                    if (files) {
                        for (const [idx, file] of files.entries()) {
                            formData.set(`${INPUT_FILES}[${idx}]`, file);
                        }
                    }
                    submit(formData, { method: "post", encType: "multipart/form-data" });
                }}
                validator={clientValidator}
                defaultValues={{}}
                className="Container-Width flex-1 my-0 px-4 py-4 gap-4"
            >

[airjp73]

Sorry for the slow response. You mentioned here that you sorted things out. Is that the case for this comment as well?