How to upload files in React using Axios

In this tutorial, I will discuss how you can upload documents, images or videos in React using Axios

Consider you have a <Form /> component that contains an input element of type="file" and an upload file button, which uploads the selected file to the server using the Axios post method.

import React from 'react';
import axios from 'axios';

const Form = () => {
  // a local state to store the currently selected file.
  const [selectedFile, setSelectedFile] = React.useState(null);

  const handleSubmit = async(event) => {
    event.preventDefault()
    const formData = new FormData();
    formData.append("selectedFile", selectedFile);
    try {
      const response = await axios({
        method: "post",
        url: "/api/upload/file",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      });
    } catch(error) {
      console.log(error)
    }
  }

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0])
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileSelect}/>
      <input type="submit" value="Upload File" />
    </form>
  )
};

export default Form;

Let's break the above solution into multiple steps

1. First, you create a local React state selectedFile using useState() hook to store the currently selected file,

2. Second, the handleFileSelect event handler updates the selectedFile value using the setter function setSelectedFile and,

3. Third, the handleSubmit function handles the post request to upload file using Axios.

Related Solutions

• How to get the size of a file in React

• How to accept only image files in react file upload

• How to submit form data in post request using axios

• How to handle an error in async await in JavaScript

• How to loop through an array of objects in React