Next.js Discord

Discord Forum

Zod, Forms, and image/file/filelist validation

Answered
Northern snakehead posted this in #help-forum
Open in Discord
Northern snakeheadOP
How do we go about file validation with Zod with React Hook Forms with Next 13+?

I've got a form rendering in the client with the form schema also on the same page but it's still disliking my FileList as a validation type.

People have stated upgrading to node 20+ stating that this resolves it but for me the issue is still persisting.

image: z.custom<FileList>()


ReferenceError: FileList is not defined
Answered by Ray
try this
z.object({
  image: z
    .any()
    .refine((files) => files?.length == 1, "Image is required.")
    .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, `Max file size is 5MB.`)
    .refine(
      (files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type),
      ".jpg, .jpeg, .png and .webp files are accepted."
    ),
});
View full answer

3 Replies

Ray
try this
z.object({
  image: z
    .any()
    .refine((files) => files?.length == 1, "Image is required.")
    .refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, `Max file size is 5MB.`)
    .refine(
      (files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type),
      ".jpg, .jpeg, .png and .webp files are accepted."
    ),
});
Answer
Northern snakeheadOP
thanks for that. I'll live with that for now 🙂
Ray
please mark solution if your issue has been solved 😀