Sometimes, we want to add upload progress indicators for fetch.

In this article, we’ll look at how to add upload progress indicators for fetch.

How to add upload progress indicators for fetch?

To add upload progress indicators for fetch, we replace fetch with axios.

To install it, we run

npm i axios

Then we use it by writing

const data = await axios.request({
  method: "post",
  url,
  data: myData,
  onUploadProgress: (p) => {
    console.log(p, p.loaded / p.total);
  },
});

in an async function to make a post request.

We add the onUploadProgress method in the object we call axios.request with to get the progress of our request.

p.loaded has the number of bytes and p.total has the total number of bytes for the request that needs to be sent.

Conclusion

To add upload progress indicators for fetch, we replace fetch with axios.