Nilesh-Meena
commented
8 months ago HTML input elements, including file input, <input type=" file">, accept a value prop. These value props represent a selected file. For security purposes in the browser, setting the value is not allowed. Therefore, we cannot directly set value props to a 'File 'object or array. Here, react-hook-form manages the form state and file uploads. And also handles the value input field itself. It's expecting undefined initially, allowing the user to select files via the browser file picker. By setting value={undefined} we can resolve this. This will indicate to react-hook-form that the field is initially empty. And may avoid the error you are encountering.
defaultValues: {
images: [undefined], // Set initial value to undefined instead of new File([], '')
},
<Input
{...field}
multiple
type="file"
accept="image/jpeg, image/png"
value={undefined} // Set value to undefined for file input field
/>Source -> https://stackoverflow.com/questions/72557334/react-hook-form-and-setvalue-of-file-input
OmarAfet
Jenrikk
fxmb
hedaetul
Describe the bug
I'm encountering a TypeScript error in my NextJS app when trying to use an
Inputcomponent for file uploads. The error message is as follows:The error occurs in the following code snippet:
The
Inputcomponent is being used with thereact-hook-formlibrary and thezodschema validation library. The relevant part of the schema is:The
Inputcomponent'svalueprop is expected to be astring | number | readonly string[] | undefined, but it's receiving aFile[]due to theimagesfield in the form.Any help resolving this issue would be greatly appreciated.
Affected component/components
Input
How to reproduce
app/page.tsxadd this code:import { Input } from '@/components/ui/input'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from '@/components/ui/form';
const MAX_UPLOAD_SIZE = 1024 1024 1; // 1MB const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png'];
const schema = z.object({ images: z.array( z .instanceof(File) .refine( (file) => file.size <= MAX_UPLOAD_SIZE, 'Image size must be less than 1MB.' ) .refine( (file) => ACCEPTED_FILE_TYPES.includes(file.type), 'Invalid file type. Only JPEG and PNG are allowed.' ) ), });
export default function Home() { const form = useForm<z.infer>({
resolver: zodResolver(schema),
defaultValues: {
images: [new File([], '')],
},
});
function onSubmit(values: z.infer) {
console.log(values);
}
return (
); }
System Info
Before submitting