How to Use a Simple Form Submit with Files in React
Jun 29, 2020 • 6 Minute Read
Introduction
Uploading images or files is a major function of any app. It is an essential requirement for creating a truly full-stack app. For example, Facebook, Instagram, and Snapchat all have the functionality to upload images and videos.
In traditional HTML sites, the file upload form forces a page refresh, which might be confusing to users. Also, you might want to customize the look of the file input in the form to make it resonate with your overall app design. When it comes to both of these issues, React can help you provide a better user experience.
This guide will get you up and running with file uploads in React.
Creating a Basic Form
In your App.js file, create a basic form that with a name field and a file input.
import React from "react";
const App = () => {
return (
<div className="App">
<form>
<input type="text" />
<input type="file" />
</form>
</div>
);
};
Now, add state in the component to store the name and the file data.
import React, { useState } from "react";
const App = () => {
const [name, setName] = useState("");
const [selectedFile, setSelectedFile] = useState(null);
return (
<div className="App">
<form>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="file"
value={selectedFile}
onChange={(e) => setSelectedFile(e.target.files[0])}
/>
</form>
</div>
);
};
Creating a Custom File Uploader Component
Now that the basic form is set up, create a custom file uploader component that can be reused across multiple forms in the app.
If you check the output of the current form, you will notice that the file input doesn't have a great look; that's because the browser defines its default styling. In this section, you will learn how to create a file upload component with custom styling.
const FileUploader = () => {
const handleFileInput = () => {}
return (
<div className="file-uploader">
<input type="file" onChange={handleFileInput}>
</div>
)
}
To create a custom file uploader, the first step is to hide the default input and trigger the change event using a ref.
import React, {useRef} from 'react'
const FileUploader = ({onFileSelect}) => {
const fileInput = useRef(null)
const handleFileInput = (e) => {
// handle validations
onFileSelect(e.target.files[0])
}
return (
<div className="file-uploader">
<input type="file" onChange={handleFileInput}>
<button onClick={e => fileInput.current && fileInput.current.click()} className="btn btn-primary">
</div>
)
}
You can style the upload button to match the theme of your overall application. Send the uploaded file back to the parent component using a callback prop; in this case, it is onFileSelect. Inside the handleFileInput method, you can do validations like checking for filesize, file extensions, etc., and based on that, send feedback to the parent component using callback props like onFileSelectSuccess and onFileSelectError.
const handleFileInput = (e) => {
// handle validations
const file = e.target.files[0];
if (file.size > 1024)
onFileSelectError({ error: "File size cannot exceed more than 1MB" });
else onFileSelectSuccess(file);
};
Adding the File Uploader Component to the Form
Add the file uploader component as follows :
import React, { useState } from "react";
const App = () => {
const [name, setName] = useState("");
const [selectedFile, setSelectedFile] = useState(null);
const submitForm = () => {};
return (
<div className="App">
<form>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<FileUploaded
onFileSelectSuccess={(file) => setSelectedFile(file)}
onFileSelectError={({ error }) => alert(error)}
/>
<button onClick={submitForm}>Submit</button>
</form>
</div>
);
};
Uploading Files Using FormData
Upload a selected file using the FormData object. Append the name and file using the append method of the formData object.
const submitForm = () => {
const formData = new FormData();
formData.append("name", name);
formData.append("file", selectedFile);
axios
.post(UPLOAD_URL, formData)
.then((res) => {
alert("File Upload success");
})
.catch((err) => alert("File Upload Error"));
};
That's pretty much it. You have successfully created and added a custom file upload component.
Conclusion
File uploading is an essential part of any web app. You can use other third-party libraries to create custom file upload inputs, but you should have a fair idea of how they are implemented under the hood.
There are several instances where file uploads are required, but with some customization. Third-party libraries may not always help you out in such cases, however, your custom file upload utility can.
Learn More
Explore these React courses from Pluralsight to continue learning:
