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

Question

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

Kapobajza Kapobajza · Accepted Answer · 2021-07-11T12:31:37

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

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

1 Answers