react-hook-form material ui file upload not giving FileList

user_12459969 0
Viewed 2077

i have an issue with react hook form and material-ui file uploading when submiting the form i got string path of one file instead of FileList instance

        <Controller
          name='attachments'
          control={control}
          defaultValue=''
          render={({ field }) => <input {...field} type='file' multiple />}
        />

full code on codesanbox:

https://codesandbox.io/s/xenodochial-bhaskara-9vo13?file=/src/App.js

yup react-hook-form material-ui reactjs
1 Answers

For it to work, you will have to implement your own onChange property. You can use the field.onChange callback for this purpose and pass it the file list as an argument. Here's how it can be done:

<Controller
  name="attachments"
  control={control}
  defaultValue=""
  render={({ field }) => (
    <input
      type="file"
      onChange={e => {
        field.onChange(e.target.files);
      }}
      multiple
    />
  )}
/>

Here is the link to the forked source code

user_50497990
Related