A file input lets a user choose a local file for upload or processing. In React, it must remain uncontrolled because the browser protects its value: JavaScript can read the selection, but cannot set or change it. section 9.3.2
Do not control the file value
This looks like an ordinary controlled input, but it cannot work: <input type="file" value={file} />. The browser rejects attempts to set a filename programmatically. Let the user select the file instead; the value can only be cleared. section 9.3.2
Treat file inputs differently from ordinary React form controls:
- Keep the input uncontrolled; do not provide a value prop. section 9.3.2
- Read the file only after the user selects it. section 9.3.2
- Clear the input when needed, but do not try to assign an initial filename or replace the selection. section 9.3.2
- Use controlled inputs for other form fields when their values need validation, limits, formatting, or state-driven updates. section 9.6
