JavaScript

How to upload a file in React.js?

File uploading in an application is an essential component that every developer takes into account while developing an application or webpage. File uploading simply means that a user uploads a file which can be an image, video, or document, just like we upload images or videos to our Instagram and Facebook. So, let’s see how to upload a file in React.js in this post but before going to the process let us see what React.js is.

React.js is a popular front-end JavaScript library for creating and designing user interfaces for single-page apps. The most intriguing part of React.js is that with the help of it we can change data on a web page without reloading the entire web page or application. React.js features include simplicity, fast and scalability.

PreRequisites

Before going on the coding part of how to upload a file in React.js let us first create a React.js project. For this purpose open Visual studio code terminal or Windows command prompt and execute the below-mentioned command which will create your app with the name of fileupload:

$ npx create-react-app fileupload

The next step is to change the directory to the file we just created which is fileupload.

$ cd fileupload

The next step is to install Axios which is a promise-based HTTP client and will help us in sending the selected file to a server. To install Axios execute the below given command in the terminal:

$ npm install axios

Now that we are done with creating the basics of our application and installing Axios let us open the App.js file and modify that file to achieve file uploading in React.js.

File Uploading in React.js

The first part is to design your webpage for file uploading. For this, we will be needing a header and two buttons that are; Choose File and Upload. When the user clicks the Choose File button, he/she should be redirected to choosing a file from the computer system and when they click the upload button, the file that was chosen should be uploaded to the server. Also, it should be noted that we need an event handler that will listen to any changes that are made to the file hence we used onChange which is referencing the onFileChange function. Now whenever the user selects a file, the onFileChange function will be triggered and the state will be changed accordingly.

Now that we have selected a file and handle the state change, let us now send the file to a server in an object named FormData for which we installed Axios earlier.

// importing axios
importaxiosfrom'axios';
// importing React and component
import React,{Component} from'react';

classAppextendsComponent {

    state = {
// file state is null in the start
selectedFile: null
    };
// When user selects a file, set state
onFileChange = event => {
this.setState({ selectedFile: event.target.files[0] });
    };
// when user uploads file this function should execute
onFileUpload = () => {
constformData = newFormData();
formData.append(
"myFile",
this.state.selectedFile,
this.state.selectedFile.name
    );
// console log uploaded file details
console.log(this.state.selectedFile);
// user send req to the server
axios.post("api/uploadfile", formData);
    };

    render() {

return (
<div>
<h1>Let's Upload Files using React.js</h1>
<div>

Upload</button>
</div>

</div>
    );
    }
}

export default App;

Conclusion

React.js is a front-end library handled by Facebook and using it we can develop very fast and scalable web applications. In an application like Instagram or Facebook, uploading files is an essential feature and every developer should know how to develop an application that has the upload files feature. To get a grip on the file uploading concept, we demonstrated how to upload files using React.js in this post and provide you with the code and screenshots on how it will work.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.