Zod dealing with image object

[loki4514]

I'm working with react-file-base64 which gives metadata of files such as name, type of files, size, base64 encoding, i registered the zod validation, even though i uploaded the image, zod throws "image required error". I cross verified, zod isn't accepting any image object to verify, How to deal with this error.

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 return undefined
.refine((files) => {
        console.log(files, "this not rertriviing files here");
          // Return true to ensure the validation continues
        })

[colinhacks]

I need a full reproduction to debug this. What data are you passing into schema.parse()?

[loki4514]

    name: string;
    type: string;
    size: string;
    base64: string
}```

Featured_image has toaccept above interface this how react-file-base64 give object when I upload. But when I console.log(files) returns undefined.