How To File Upload In React JS

Websolutionstuff | Sep-05-2022 | Categories : React JS

In this article, we will see how file uploads in react js. File uploading means a user from a client machine wants to upload files to the server. We will see file uploading using react js. In this example, we will see the single file upload in react. Also, we will use Axios for image upload.

So, let's see react js file upload and how to upload a file in react js.

The process of uploading a file can be divided into two steps.

  • Select a File (user input): The first step is to add the tag to our App component to enable the user to pick a file. This tag should have the type attribute set as “file”. Now, we need an event handler to listen to any changes made to the file. This event handler will be triggered whenever the user selects a new file and will update the state.
  • Send a request to the server: After storing the selected file (in the state), we are now required to send it to a server. For this purpose, we can use fetch or Axios. (In this code, we use Axios a promise-based HTTP client for the browser and NodeJS). The file is sent to the service wrapped in a FormData object.
Install Axios

In this step, we will install Axios using the following command for react upload file.

npm install axios --save




After installing Axios, we will see an example of react file upload.

import axios from 'axios';
import React,{Component} from 'react'; 
class App extends Component { 

    state = { 
      // Initially, no file is selected 
      selectedFile: null
    // On file select (from the pop up) 
    onFileChange = event => { 
      // Update the state 
      this.setState({ selectedFile:[0] }); 
    // On file upload (click the upload button) 
    onFileUpload = () => { 
      // Create an object of formData 
      const formData = new FormData(); 
      // Update the formData object 
      // Details of the uploaded file 
      // Request made to the backend api 
      // Send formData object"api/uploadfile", formData); 
    // File content to be displayed after 
    // file upload is complete 
    fileData = () => { 
      if (this.state.selectedFile) { 
        return ( 
            <h2>File Details:</h2> 
            <p>File Name: {}</p> 
            <p>File Type: {this.state.selectedFile.type}</p> 
              Last Modified:{" "} 
      } else { 
        return ( 
            <br /> 
            <h4>Choose before Pressing the Upload button</h4> 
    render() { 
      return ( 
              How To File Upload In React JS - Websolutionstuff 
                <input type="file" onChange={this.onFileChange} /> 
                <button onClick={this.onFileUpload}> 
  export default App; 


You might also like:


Recommended Post
Featured Post
How To File Upload In Laravel 10 Example
How To File Upload In Laravel...

In this article, we will see how to file upload in laravel 10 examples. Here, we will learn about the laravel...

Read More


How To Count Days Excluding Weekends And Holidays In Laravel 9
How To Count Days Excluding We...

In this article, we will see how to count days excluding weekends and holidays in laravel 9. Here, we will learn to...

Read More


Laravel 8 Create Custom Helper Function Example
Laravel 8 Create Custom Helper...

In this article, we will see laravel 8 create a custom helper function example. As we all know laravel provides man...

Read More


How To Hide Toolbar In Summernote Editor
How To Hide Toolbar In Summern...

In this small tutorial i will show you How To Hide Toolbar In Summernote Editor, many times customer's have req...

Read More