Bug: 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.

[Redskinsjo]

uploading a file that I read with readAsDataUrl creates this error

React version:
"react": "18.2.0",
"react-dom": "18.2.0",

Steps To Reproduce

1. Create an input type=file
2. Upload a file and read it with readAsDataUrl
3. Store the result in a state
4. Use this state to display the result

Link to code example: https://stackblitz.com/edit/stackblitz-starters-u1i4q1?file=app%2FhomeChild.tsx

The current behavior

creates an error

The expected behavior

not creating an error, being able to upload a file

[AntoineKM]

Hey @Redskinsjo,
To avoid errors, don't use as when you don't have to. Here's an example:
https://stackblitz.com/edit/stackblitz-starters-rvhudz?file=app%2FhomeChild.tsx

[eps1lon]

This seems like a usage question for the DOM APIs not React itself.

Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:

Coding Questions
If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.

https://stackoverflow.com/questions/tagged/react

Talk to other React developers
There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.

https://react.dev/community

[Redskinsjo]

to anyone searching for this issue, setting the value of an file input is forbidden for security reasons. If you mean to set that value to get it in the FormData of a result of a form, it is useless. Simply keep that input with a type=file (not type=hidden), you can instead set css display:none, and the file uploaded will render in the formData.

Thank you @eps1lon

[eps1lon]

@Redskinsjo Thank you for following up on this! This will help future readers.