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

 

 

Example

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: event.target.files[0] }); 
    }; 
     
    // On file upload (click the upload button) 
    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); 
    }; 
     
    // File content to be displayed after 
    // file upload is complete 
    fileData = () => { 
      if (this.state.selectedFile) { 
          
        return ( 
          <div> 
            <h2>File Details:</h2> 
            <p>File Name: {this.state.selectedFile.name}</p> 
            <p>File Type: {this.state.selectedFile.type}</p> 
            <p> 
              Last Modified:{" "} 
              {this.state.selectedFile.lastModifiedDate.toDateString()} 
            </p> 
          </div> 
        ); 
      } else { 
        return ( 
          <div> 
            <br /> 
            <h4>Choose before Pressing the Upload button</h4> 
          </div> 
        ); 
      } 
    }; 
     
    render() { 
      return ( 
        <div> 
            <h1> 
              How To File Upload In React JS - Websolutionstuff 
            </h1> 
            <div> 
                <input type="file" onChange={this.onFileChange} /> 
                <button onClick={this.onFileUpload}> 
                  Upload! 
                </button> 
            </div> 
          {this.fileData()} 
        </div> 
      ); 
    } 
  } 
  
  export default App; 

 


You might also like:

 

Recommended Post
Featured Post
How To Validate Phone Number Using jQuery
How To Validate Phone Number U...

In this article, we will see how to validate phone numbers using jquery. We will learn different methods of validat...

Read More

Oct-24-2022

How to Filter Datatable using Dropdown in Laravel 10
How to Filter Datatable using...

Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter th...

Read More

Feb-07-2024

Laravel 9 Foreach Loop Variable Example
Laravel 9 Foreach Loop Variabl...

In this article, we will see laravel 9 foreach loop variable example. Laravel provides a simple blade template...

Read More

Jul-22-2022

How to Search Object by ID and Remove It from JSON Array In JavaScript
How to Search Object by ID and...

In this example we will see how to search object by id and remove it from json array in javascript. we need to add ...

Read More

May-26-2021