EN
React - file input example
3
points
In this article we would like to show you how to upload files in React.
Below example shows simple Form with <input type="file" /> element that helps us to select file from computer and upload it using FormData class and Ajax request.
Runnable example:
// ONLINE-RUNNER:browser;
//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
const Form = () => {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
fetch("/example/upload", {
method: "POST",
body: formData,
})
.then((response) => {
response.text().then((text) => console.log(text));
})
.catch((error) => {
console.error("File upload error!");
});
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="userfile">Upload file:</label>
<input type="file" id="userfile" name="userfile"></input>
<input type="submit" value="Submit!"></input>
</form>
);
};
const root = document.querySelector("#root");
ReactDOM.render(<Form />, root);