File Uploads in React
Learn how to handle file input, previews, and multipart upload requests in a React form.
File inputs (<input type="file">) are inherently uncontrolled in React, since browsers don't allow JavaScript to programmatically set a file input's value for security reasons — you read the selected file(s) via the input's files property (accessed through a ref or directly from the change event's event.target.files), rather than driving it with a value prop like other form fields.
A file input is like a physical mail slot where the browser (not you) decides what letter gets dropped in — you can look at what arrived and describe it to others, but you can't reach in and swap the letter yourself; sending it onward via FormData is like properly boxing and labeling that physical letter for shipping, rather than trying to fax a photograph of it (JSON) instead.