File data is not available in the submit data with a Controller and file input

[felix-hubert-eai]

Describe the bug
When using a Controller component rendering a file input, the file data is not sent through the submit function, only the file name.

On version : 7.6.10

To Reproduce
See the codesandbox. Use both file inputs and add a file, then click on the submit button. Notice that the data that's printed out in the console is {file1: FileList, file2: "C:\fakepath\Screen Shot 2021-05-21 at 9.19.03 AM.png"}, working well for the first input but only keeping the filename for the Controller input with a custom rendering.

Codesandbox link (Required)
https://codesandbox.io/s/dazzling-chatterjee-2gvc6?file=/src/App.js

Expected behavior
The file data is sent properly

Screenshots

Desktop (please complete the following information):

• OS: mac
• Browser : chrome

Additional context
Add any other context about the problem here.

[bluebill1049]

This is due to what you have supplied to Controller during onChange.

render={({ filed }) => {
  <Input onChange={(e) => { filed.onChange(e.target.files) }} /> // instead e.target.value
}}

[bluebill1049]

https://codesandbox.io/s/long-sun-nsfbk?file=/src/App.js what about this?

[bluebill1049]

Controller is only meant to capture value and validate it.

[felix-hubert-eai]

That seems to work! Thank you so much

[obeka]

What I understand is that it is not doable with Controller component then, right?

[rppala3]

Yes it is doable! I solved writing like this

<Input
  // {...field} // <- Remove this line
  type="file"
  onChange={(e) => field.onChange(e.target.files?.[0])}
/>

This line {...field} caused days of pain...

[bluebill1049]

https://codesandbox.io/s/long-sun-nsfbk?file=/src/App.js what about this?

[meotimdihia]

file upload should have an example. I have searched like 10+ topics in Github issues, still have problems:

• I can't use it with useFieldArray.
• How multi-upload works
• How to submit the data.
• How to set default values with Filelist.
• Why is it behavior different with <Controller> in react-form-hook and useController. This problem is super confusing.
• ....

I will solve it finally but it'll take days to learn how to do with react-form-hook

[mustakimkr]

Thank you so much!

[alizaeda]

Not working for me

[asya-aisa]

Thank you!

[arimendelow]

Note that if you try to set value on the input like that in TypeScript, you'll get this: