How to send one or more files to an API using axios in ReactJS?

Last Updated : 04 Apr, 2023

Assuming that you want to send multiple files from the front-end, i.e., the React app, to the server using Axios. For that, there are two approaches as shown below:

Send multiple requests while attaching a single file in each request.
Send a single request while attaching multiple files in that request itself.

We are going to follow the second approach, and here are a few points to justify the action:

In the first approach, we will have to make extra requests to send multiple files across the server, whereas, in the second approach, we will only have to make one request.
The first approach will lead to the wastage of computing power, and it might add to extra costs if you are using cloud service providers like Google Cloud Platform(GCP) or Amazon Web Services(AWS).
The first approach isn’t easy to handle the back-end server’s files, whereas it is simpler in the second approach.

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app multiple_files

Step 2: Move to the directory containing the project using the following:

cd multiple_files

Step 3: Install axios module using the following command:

npm install axios

Step 4: Start the server using the following command:

npm start

Project structure: Here is the directory structure of the project:

Project Structure

Code for the 2nd approach:

Filename: App.js

Javascript

import React from "react"; 
import axios from "axios"; 
  
class App extends React.Component { 
  state = { 
    files: null, 
  }; 
  
  handleFile(e) { 
    // Getting the files from the input 
    let files = e.target.files; 
    this.setState({ files }); 
  } 
  
  handleUpload(e) { 
    let files = this.state.files; 
  
    let formData = new FormData(); 
  
    //Adding files to the formdata 
    formData.append("image", files); 
    formData.append("name", "Name"); 
  
    axios({ 
      // Endpoint to send files 
      url: "http://localhost:8080/files", 
      method: "POST", 
      headers: { 
        // Add any auth token here 
        authorization: "your token comes here", 
      }, 
      // Attaching the form data 
      data: formData, 
    }) 
      .then((res) => { }) // Handle the response from backend here 
      .catch((err) => { }); // Catch errors if any 
  } 
  
  render() { 
    return ( 
      <div> 
        <h1>Select your files</h1> 
        <input 
          type="file"
          multiple="multiple"  //To select multiple files 
          onChange={(e) => this.handleFile(e)} 
        /> 
        <button onClick={(e) => this.handleUpload(e)} 
        >Send Files</button> 
      </div> 
    ); 
  } 
} 
  
export default App;