fakepath instead of file in react-hook-form file input #443
Description
I have tried to use file type in the Input component with react-hook-form implementation, simple text inputs work well. But the input component with file type returns fakepath instead of the file itself. So we cannot send files to the server
File input value during submission: 'C:\fakepath\405A4201.JPG'
Zod scheme:
const profileFormSchema = z.object({
name: z
.string()
.min(3, {
message: "Name must be at least 2 characters.",
})
.max(30, {
message: "Name must not be longer than 30 characters.",
}),
avatar: z.any(),
});
Nothing much here
File FormField:
<FormField
control={form.control}
name="avatar"
render={({ field }) => (
<FormItem>
<FormLabel>Profile photo</FormLabel>
<FormControl>
<Input placeholder="Profile photo" type="file" {...field} accept="image/*" />
</FormControl>
<FormDescription>This is your public display name.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
In submit function I get fakepath instead of file itself:
async function onSubmit(data: UserUpdateFormType) {
console.log(data);
// log value: { name: 'Madat Bayramov', avatar: 'C:\fakepath\405A4201.JPG' }
}