What is the correct way to validate image files using zod validator?
I tried doing something like this:
Can't seems to find a solution to this error.
const ACCEPTED_IMAGE_TYPES = ['jpeg', 'jpg', 'png', 'webp'];
const formSchema = z.object({
logo: z
.any()
.refine((files) => {
return files?.[0]?.size <= MAX_FILE_SIZE;
}, `Max image size is 5MB.`)
.refine(
files => ACCEPTED_IMAGE_MIME_TYPES.includes(files?.[0]?.type),
'Only .jpg, .jpeg, .png and .webp formats are supported.',
),
});
const form = useAppForm({
defaultValues: {
logo: null,
},
validators: {
onSubmit: formSchema, //---> type error here
},
});const ACCEPTED_IMAGE_TYPES = ['jpeg', 'jpg', 'png', 'webp'];
const formSchema = z.object({
logo: z
.any()
.refine((files) => {
return files?.[0]?.size <= MAX_FILE_SIZE;
}, `Max image size is 5MB.`)
.refine(
files => ACCEPTED_IMAGE_MIME_TYPES.includes(files?.[0]?.type),
'Only .jpg, .jpeg, .png and .webp formats are supported.',
),
});
const form = useAppForm({
defaultValues: {
logo: null,
},
validators: {
onSubmit: formSchema, //---> type error here
},
});Type 'ZodObject<{ logo: ZodEffects<ZodEffects<ZodAny, any, any>, any, any>; }, "strip", ZodTypeAny, { ...; }, { ...; }>' is not assignable to type 'FormValidateOrFn<{ logo: null; }> | undefined'.Type 'ZodObject<{ logo: ZodEffects<ZodEffects<ZodAny, any, any>, any, any>; }, "strip", ZodTypeAny, { ...; }, { ...; }>' is not assignable to type 'FormValidateOrFn<{ logo: null; }> | undefined'.Can't seems to find a solution to this error.
