Best way to validate multiple files via Zod & RHF
So I am adding validation to a form and I want to validate as much as possible on the frontend. Now I do believe some validation needs to be done by the backend, but I'll handle that after I've figured out what already has been validated by the frontend.
The things I want to validate are the following:
- The user has selected/uploaded at least 3 files for the form
- The files are of a accepted file type
- The combined size of all files does not exceed a certain threshold
My initial thought was to just add the following to the form schema:
But the files are not in an array, they are instead bundled in an object like so:
So the first hurdle becomes how do I translate this into a Zod shape?
This doesn't work
And is there a better way to select a specific file and perform operations, eg:
The data comes from a simple
Most of the examples I've seen online are mainly focused around single files and make the assumption that
The things I want to validate are the following:
- The user has selected/uploaded at least 3 files for the form
- The combined size of all files does not exceed a certain threshold
My initial thought was to just add the following to the form schema:
But the files are not in an array, they are instead bundled in an object like so:
So the first hurdle becomes how do I translate this into a Zod shape?
This doesn't work
And is there a better way to select a specific file and perform operations, eg:
formInput.image?.[1].typeThe data comes from a simple
inputMost of the examples I've seen online are mainly focused around single files and make the assumption that
formInput.image?.[0]
