Building a File Uploader with React (2024)

File Uploading is the process of putting images, videos, and files onto a web server. This means a user from the client machine wants to upload files to the server. The ability to upload files seamlessly and efficiently is essential in a web application.

React is a popular JavaScript framework that helps a developer build interactive and seamless web applications. This article will guide you on the steps to take while uploading files with React.

Importance of File Uploading

• File uploading provides an efficient and convenient process of data collection.
• Social media platforms, such as Facebook, Twitter, and Instagram depend heavily on user-generated content. Without a file uploader, users will be unable to upload pictures, videos, and other files, which will make these platforms less interactive, boring, and less engaging.
• File uploading is prone to error and saves time compared to manual data collection and processing.
• Without the file-uploading feature, some cloud storage services like Dropbox and Google Drive would not exist. These applications help users, upload, save, and share files seamlessly.

File uploaders are used in document sharing, resume uploads, data import or export, media sharing, cloud storage services, and so on.

Creating a Basic File Upload Component in React.js

This involves creating a form with an input of type ‘file’. A simple example is shown below

import React from 'react';
class FileUpload extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 selectedFile: null,
 };
 }
 onFileChange = event => {
 this.setState({ selectedFile: event.target.files[0] });
 };
 onFileUpload = () => {
 // Create an object of formData
 const formData = new FormData();
 // Update the formData object
 formData.append(
 "myFile",
 this.state.selectedFile,
 this.state.selectedFile.name
 );
 // Details of the uploaded file
 console.log(this.state.selectedFile);
 // Request made to the backend api
 // Send formData object
 // axios.post("api/uploadfile", formData);
 };
 render() {
 return (
 <div>
 <h3>File Upload using React!</h3>
 <div>
 <input type="file" onChange={this.onFileChange} />
 <button onClick={this.onFileUpload}>
 Upload!
 </button>
 </div>
 </div>
 );
 }
}
export default FileUpload;

In this example, the state of the component selectedFile holds the file object from the user input. The onFileChangethe function is triggered, once the user selects a file, this function updates the selectedFile` state with the chosen file.

The onFileUpload function is triggered when the user clicks the 'Upload' button. This function creates an FormData object and appends the selected file to it. The FormData object can then be sent to a server using an HTTP request.

In this example, we’re just logging the file details to the console. In a real-world scenario, you’d use a function axios.post to send the formData to a server.

Writing the react file uploader handler involves some steps. These steps include:

• Create a component that includes a file input element (<input type="file">). This component will allow users to select the file they want to upload.

import React from 'react';
function FileUploadHandler() {
 const handleFileChange = (event) => {
 const file = event.target.files[0];
 // Process the file
 };
 return (
 <div>
 <input type="file" onChange={handleFileChange} />
 </div>
 );
}
export default FileUploadHandler;

In this code above, the `FileUploadHandler` component, includes a file input element. TheonChange event handler will be triggered when the user selects a file.

• Handle the File Change Event

Any necessary validation can be performed at this point. You can access the selected file using event.target.files[0]. In this example, the image should be in PNG or JPEG, and should not be more than 1MB, else it displays an alert message or returns early.

const handleFileChange = (event) => {
 const file = event.target.files[0];
 if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
 alert('Please select a PNG or JPEG image file.');
 return;
 }
 if (file.size > 1024 * 1024) {
 alert('File size should not exceed 1MB.');
 return;
 }
 // Perform further processing or upload the file
};

• Upload the File (Integration with Backend)

You have to make a HTTP request, to upload a file to a server. You can handle a request by using Fetch API or Axios library. We will use Axios in this example.

• Install Axios by running this command below

npm install axios --save

• In this example, we’re using Axios to send a POST request to /api/upload the endpoint with the selected file. The file is wrapped in an FormData object, which allows sending files and other form data. The server-side implementation of the /api/upload endpoint will depend on your backend technology.

import axios from 'axios';
// ...
const handleFileChange = (event) => {
 const file = event.target.files[0];
 // Create FormData object
 const formData = new FormData();
 formData.append('file', file);
 // Send the file to the server
 axios.post('/api/upload', formData)
 .then((response) => {
 // File upload successful
 console.log(response.data);
 })
 .catch((error) => {
 // File upload failed
 console.log(error);
 });
};