How to upload files in React app using Axios?

Asynchronous tasks, such as sending HTTP requests, are essential in web development to prevent blocking other processes from happening.

In this guide, we'll learn how to upload files in React using Axios.

Setting up your React project

Before we can start uploading files in a React app using Axios, we need to set it up first. For this, we'll use create-react-app, a popular tool for creating React applications.

To create a new React project using create-react-app, follow these steps:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to create your new React project.
3. Type the following command:

sh
Copy
npx create-react-app my-app

This will create a new React project called my-app in your current directory. Now navigate to the my-app directory.

Next, we need to install Axios. To do this, run the following command in your terminal:

sh
Copy
npm install axios

Creating the File Upload Component

Now that we've set up our React project and installed axios, it's time to create the file upload component.

Create a new component for file uploading

To create the file upload component, follow these steps:

1. In your project directory, navigate to the src folder.
2. Create a new folder called components.
3. Inside the "components" folder, create a new file called FileUpload.js.
4. Now write a new functional component called FileUpload that returns a div element:

js
Copy
import React from 'react';
const FileUpload = () => {
  return (
    <div>
      {/* File upload form goes here */}
    </div>
  );
};
export default FileUpload;

Add event listeners

Next, we'll add the necessary event listeners to capture file inputs. Let’s use the File Upload API from the Rapid API hub for this particular example.

Please go ahead and subscribe to the File Upload API so you can easily call it in your React app.

js
Copy
import React from "react";
import axios from "axios";
const FileUpload = () => {
  const handleFileUpload = (event) => {
    // get the selected file from the input
    const file = event.target.files[0];
    // create a new FormData object and append the file to it
    const formData = new FormData();
    formData.append("file", file);
    // make a POST request to the File Upload API with the FormData object and Rapid API headers
    axios
      .post("https://file-upload8.p.rapidapi.com/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          "x-rapidapi-host": "file-upload8.p.rapidapi.com",
          "x-rapidapi-key": "your-rapidapi-key-here",
        },
      })
      .then((response) => {
		// handle the response
        console.log(response);
      })
      .catch((error) => {
        // handle errors
        console.log(error);
      });
  };
  // render a simple input element with an onChange event listener that calls the handleFileUpload function
  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
    </div>
  );
};
export default FileUpload;

The handleFileUpload function is triggered when the user selects a file using the file input field. It extracts the first file from the event target and creates a new FormData object to store it. Then, it uses Axios to send a POST request to the File Upload API endpoint with the formData as the data payload.

Head over to your App.js file and paste this code there:

js
Copy
import React from 'react';
import FileUpload from './components/FileUpload';
function App() {
  return (
    <div className="App">
      <FileUpload />
    </div>
  );
}
export default App;

Wrap Up

By using the Axios library to make HTTP requests, we can easily send file data to an API endpoint for processing. With the example implementation using the File Upload API, we were able to see how this process can be accomplished in a practical way.

We have also written a guide on how to send files to server with Fetch API, which explains how we can achieve something similar but with browser native fetch API.