Axios File Upload example

In this tutorial, I will show you an Axios File Upload example (with/without progress) using multipart/form-data.

Contents

Axios Features
How to install Axios
Axios Response Object schema
Axios File Upload with multipart/form-data
Axios File Upload Response Body
Axios File Upload Error handling
Axios File Upload Error handling with async-await
Axios File Upload Progress
Get all uploaded files
Rest API for File Upload
Axios File Upload example
Conclusion
Further Reading

Axios Features

Axios can run in the Node.js and Browser with the same codebase.
– On the server-side it uses the native Node.js http module
– On the client-side (browser) it uses XMLHttpRequests

Additionally, there are important features that you should know:

Supports the Promise API
Intercept request and response (Axios Interceptors tutorial)
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

(from https://github.com/axios/axios#features)

How to install Axios

We can add Axios to our project/code with one of following simple ways:

– npm:

npm install axios

– bower:

bower install axios

– yarn:

yarn add axios

– CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Or:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios Response Object schema

The response for a Axios request contains:

data: parsed response body provided by the server
status: HTTP status code
statusText: HTTP status message
headers: HTTP headers (lower case)
config: the request config that was provided to axios
request: the last client request instance that generated this response

For example:

{
  "data": {
    "message": "Uploaded the file successfully: bezkoder.sql"
  },
  "status": 200,
  "statusText": "OK",
  "headers": {
    "content-length": "58",
    "content-type": "application/json; charset=utf-8"
  },
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "baseURL": "http://localhost:8080",
    "method": "post",
    "url": "/upload"
  }
}

Axios File Upload with multipart/form-data

We will use FormData object for constructing a set of key/value pairs: form fields and their values, this object is easily sent using the axios.post() method.
Remember to set the encoding type to "multipart/form-data".

let formData = new FormData();
formData.append("file", selectedFile);

axios.post('/bezkoder.com/upload', formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    }
  });

Axios File Upload Response Body

Axios Response Object has data field that contains the parsed response body.
We can use then or await to receive the response body as follows:

axios.post('/bezkoder.com/upload', formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    }
  })
  .then(function (response) {
    console.log(response.data);
  });

const { data } = await axios.post(url);

Axios File Upload Error handling

We use catch() for handling errors.

axios.post('/bezkoder.com/upload', formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    }
  })
  .then(...)
  .catch(function (error) {
    if (error.response) { // get response with a status code not in range 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // no response
      console.log(error.request);
      // instance of XMLHttpRequest in the browser
      // instance ofhttp.ClientRequest in node.js
    } else { // Something wrong in setting up the request
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Axios File Upload Error handling with async-await

If you want to use async-await, just wrap the axios call with try/catch block.

async function uploadFile() {
  try {
    const response = await axios.post('/bezkoder.com/upload', formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      }
    });
    console.log(response);
  } catch (error) {
    if (error.response) { // get response with a status code not in range 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // no response
      console.log(error.request);
    } else { // Something wrong in setting up the request
      console.log('Error', error.message);
    }
    console.log(error.config);
  }
}

Axios File Upload Progress

We pass onUploadProgress to exposes progress events. This progress event are expensive (change detection for each event), so you should only use when you want to monitor it.

The progress will be calculated basing on event.loaded and event.total.

async function uploadFile() {
  const onUploadProgress = (event) => {
    const percentage = Math.round((100 * event.loaded) / event.total);
    console.log(percentage);
  };

  try {
    const response = await axios.post('/bezkoder.com/upload', formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      }
      onUploadProgress,
    });

    console.log(response);
  } catch (error) {
    ...
  }
}

You can use Bootstrap Progress Bar for displaying the percentage:

.progress as a wrapper
inner .progress-bar to indicate the progress
.progress-bar requires style to set the width by percentage
.progress-bar also requires role and some aria attributes to make it accessible
label of the progress bar is the text within it (innerHTML)
aria-valuenow attribute for percentage (0-100)

<div id="progress" class="progress">
  <div
    id="progress-bar"
    class="progress-bar progress-bar-info"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>

let progressBarElement = document.getElementById("progress-bar");
progressBarElement.innerHTML = "0%";
progressBarElement.setAttribute("aria-valuenow", 0);
progressBarElement.style.width = "0%";

const onUploadProgress = (event) => {
  const percentage = Math.round((100 * event.loaded) / event.total);
  progressBarElement.innerHTML = percentage + "%";
  progressBarElement.setAttribute("aria-valuenow", percentage);
  progressBarElement.style.width = percentage + "%";
};

Get all uploaded files

We use Axios to send HTTP GET request to get the files’ information and assign the result to fileInfos array, which is an array of {name, url} objects.

To display List of uploaded files, we iterate over fileInfos array using map() function. On each file item, we use file.url as href attribute and file.name for showing text.

function getHTMLFiles(fileInfos) {
  if (fileInfos && fileInfos.length) {
    const files = fileInfos.map(
      (file, index) =>
        `<li key='` + index + `'>\
          <a href='` + file.url + `'>` + file.name + `</a>\
        </li>`
    );

    return (
      `<div>List of Files</div>\
        <ul>` +
      files.join("") +
      `</ul>`
    );
  }

  return `No file was found!`;
}

async function getFiles() {
  try {
    const res = await axios.get("/bezkoder.com/files");

    filesElement.innerHTML = getHTMLFiles(res.data);
  } catch (err) {
    ...
  }
}

Rest API for File Upload

Here is the API that our Axios Client will work with:

Methods	Urls	Actions
POST	/upload	upload a File
GET	/files	get List of Files (name & url)
GET	/files/[filename]	download a File

You can find how to implement the Rest API Server at one of following posts:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example

Or: Spring Boot Multipart File upload (to database) example

Note: You need to configure CORS with origin: "*" for working well with the example in this tutorial.