Handle Blobs requests with Axios the right way

Photo by Philip Swinburn on Unsplash

It is very common for a javascript engineer to handle xhr requests where Blobs are involved in his/her daily routine. Many applications let the user to upload or download files and this is where an HTTP client comes into play.

Axios library is probably the go-to HTTP client for many developers out there. It is really handy, offers lots of cool features and it helps us doing pretty common stuff like sending XMLHttpRequests from the client-side or even cancel a request we ‘ve just made. How cool is that right?

Uploading Blobs

Of course we can use Axios to send files to a server and vice-versa so let’s see a small snippet where we upload a Blob file by using FormData API:

The tricky part here is that we need to specify that we are sending FormData in the Request Headers. The response will be in JSON format as it is specified in Axios by default.

Maybe you wonder where is Axios and what is that request utility method i am using over there. This is a new Axios instance i created with custom configuration options so i don’t have to repeat myself over and over again:

We can easily override all default configuration options in our requests. Check how i changed that timeout value up there 😉

Now that we have our request in place we may use it in a Redux action creator. For this typical Redux action creator i am using redux-thunk and async-await pattern because i really like how readable my code stays:

Nothing fancy here. We are dispatching some actions and we show a message accordingly. If we don’t get a proper response from our API maybe because of a timeout issue or sth, then we will show a dummy message:

alert('Something went wrong while uploading this file');

Else if the server spots an issue, the client will receive an error with Content-Type: application/json in the following format:

Status: 400
Response:
{
  "message": "This file is invalid"
}

In order to render this message we need to retrieve it first from Axios response object:

alert(error.response.data.message);

If you are not sure about Axios error response format do not hesitate to double-check the docs.

Downloading Blobs

We have to create first our request:

The most tricky part here is to change the responseType. We don’t want to get a response with Content-Type: application/json which is the default one, since we are waiting to download a Blob right?

Time to create our action creator:

Ok so we used downloadFileRequest method to download the file’s data from the API. In order to download these in the browser i created a utility method called fileSaver where i used FileSaver.js library:

In case something goes wrong client-side, we will show again a dummy message.

alert('Something went wrong while downloading this file');

But what happens when sth goes wrong server-side and the API sends over a JSON object with an error message like this?

Status: 400
Response:
{
  "message": "This file is invalid"
}

How are we going to read this since we have explicitly told Axios that we are expecting for a Blob and NOT for a JSON response? Hmm, we simply cannot read that error message in JSON format without making some extra changes in there.

We need first to read the Blob response, parse the result, try to read the error message and then show it to the end-user:

Since i am using async-await and i really hate callbacks mess, i created another utility method named fileReader using FileReader and Promise APIs, in order to read the Blob’s contents:

All this is wrapped in a try…catch in order to show a dummy message if sth goes wrong while parsing that Blob error response. Awesome right? 😃

Photo by Morgan Sessions on Unsplash

That’s it. As you see, we can easily upload and download Blobs using Axios from our client-side applications. Most important thing is to understand what’s going on per occasion, set the right headers and content-type and then handle the response accordingly. Cheers!!