CODEWITHSUNDEEP
reactjsmaterial-uiyupreact-hook-form
B. Fateh
B. Fateh

Reputation: 363

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

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

Upvotes: 2

Views: 5018

Answers (2)

190303458
190303458

Reputation: 63

Instead of using Controller, you can also use register from useForm().

const {register} = useForm({
    defaultValues: {
        attachments: null
    }
})
<input {...register("attachments")} type="file" />

React-Hook-Form will take care of onChange so you don't need to specify it.

Upvotes: 0

Kapobajza
Kapobajza

Reputation: 2459

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

Upvotes: 9

Related Questions