react hook form and MUI file input

[Amberchen8892]

I am using RHF and MUI file input, and have have the below error. I have been googled but still cannot fix it. Can anyone help me?
This is my Controller
<Controller name="photoIdPath" control={methods.control} render={({ field }) => ( <TextField {...field} variant="standard" label="Photo of ID" margin="dense" type="file" fullWidth onChange={(e: any) => { methods.setValue('photoIdPath', e.target.files[0].name); field.onChange(e.target.files); }} InputLabelProps={{ shrink: true, }} error={!!methods.formState.errors.photoIdPath} helperText={methods.formState.errors.photoIdPath ? methods.formState.errors.photoIdPath?.message : ''} /> )} />
And here is the error

react-dom.development.js:1734 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
at HTMLInputElement.set [as value]

Thank you

[Moshyfawn]

By spreading {...field} to your TextField component you're passing your photoIdPath field's value into the input element of type file, but the input of this type only takes in a string with the filename, not the actual FileList object.

By doing

<Controller
  name="photoIdPath"
  control={control}
  render={({ field }) => (
    <TextField
      {...field}
      type="file"
      onChange={(e: any) => {
+        setValue("photoIdPath", e.target.files[0].name);
+        field.onChange(e.target.files);
      }}
    />
  )}
/>

you first assign the filename value to your photoIdPath (which is a string, so far so good) and on the next line you re-assign the actual FileList to the same photoIdPath field (which is an object, so, here's your problem).

[Moshyfawn]

You can use the UploadButton MUI example to create an upload input component without the overhead of TextField

See this CSB

[Jenrikk]

there is a way to upload the picture and get the name of the file with the onChange ?