I am currently working on a project using react-file-base64 to handle file metadata such as name, type, size, and base64 encoding. Despite registering zod validation, I encountered an "image required error" even after uploading the image. Upon investigation, it seems that zod is not recognizing any image object for verification. How can I resolve this issue?
interface featured_image_types {
name: string;
type: string;
size: string;
base64: string
}
const schema = z.object({
blog: z.any({ required_error: "Please enter a blog content, it cannot be empty!!!" }),
title: z.string().min(5, { message: "Title should be atleast minimum 5 characters" }).refine((val) => console.log(val)),
reading_time: z.string({ required_error: "Reading Time required" }),
featured_image: z
.any()
// Custom refinement function to log files
.refine((files) => {
console.log(files, "this not rertriviing files here");
// Return null to ensure the validation continues
return true;
})
// To not allow empty files
.refine((files) => files?.length >= 1, { message: 'Image is required.' })
// To not allow files other than images
.refine((files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type), {
message: '.jpg, .jpeg, .png and .webp files are accepted.',
})
// To not allow files larger than 5MB
.refine((files) => files?.[0]?.size <= MAX_FILE_SIZE, {
message: `Max file size is 5MB.`,
}),
blog_cat: z.string({ required_error: "Please select one of blog cateogry" }).min(6, { message: "Please select one of blog cateogry" }),
tags: z.any()
})
<div>
<label className="block mb-2 text-sm font-bold" htmlFor="file_input">Featured Image</label>
<FileBase
type = 'file'
{...register('featured_image')}
multiple={false}
onDone={(file: featured_image_types) => setSomething({ ...something, featured_image: file })}
/>
{errors.featured_image && <p className="text-red-500">{errors?.featured_image?.message?.toString()}</p>}
</div>
// This part returned undefined
.refine((files) => {
console.log(files, "this not rertriviing files here");
// Return true to ensure the validation continues
})