Validating file input

Coming from Yup. I’m trying to validate a required file input with no success:

file: z.any().refine(val => val.length > 0, "File is required")

Any tips?

[zanzlender]

Putting this here if anyone still has this problem. The solution that worked for me was this one:

const MAX_FILE_SIZE = 500000;
const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp"];

const RegistrationSchema = z.object({
  profileImage: 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."
    ),
});

No image provided

Too big

Wrong type

All good ✔

Then finally, in the data object we get

[niklasgrewe]

@colinhacks thanks for your answer. I am also looking for a solution. Can i also check if the File MIME-Type is for e.g. an image/*. How can i do that with zod?

and when i try to use:

file: z.instanceof(File)

i get the error:

ReferenceError: File is not defined