Type Errors When Using File Input in Form #1085
Description
Hi,
I am using the <Form /> component with a file input inside of it. I am running into various type errors however, primarily with the deconstructed field values on the input saying type File cannot be assigned as its value. Here is my code:
useForm hook:
const form = useForm<z.infer<typeof formValidator>>({
resolver: zodResolver(formValidator),
defaultValues: {
name: "",
bio: "",
tag: "",
photo: new File([], ""),
},
});Validator:
const formValidator = newTeamValidator.merge(
z.object({
photo: z.instanceof(File).refine((f) => f.size < c.maxProfilePhotoSizeInBytes),
})
);Input:
<FormField
control={form.control}
name="photo"
render={({ field }) => (
<FormItem>
<FormLabel>Team Photo</FormLabel>
<FormControl>
<Input
accept="image/png, image/jpeg"
multiple={false}
className="dark:bg-transparent cursor-pointer file:cursor-pointer file:text-primary dark:border-primary dark:ring-offset-primary"
{...field}
/>
</FormControl>
<FormDescription>If you do not select a photo one will be generated.</FormDescription>
<FormMessage />
</FormItem>
)}
/>The error:
