Handle Blobs requests with Axios the right way
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?
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:
"message": "This file is invalid"
In order to render this message we need to retrieve it first from Axios response object:
If you are not sure about Axios error response format do not hesitate to double-check the docs.
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?
"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:
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? 😃
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!!