In the previous post, we looked at how to send binary files as attachment downloads from your ASP.NET applications. In this episode, we’ll look at how we can control binary file responses that you receive from an API, in your client-side Vue.js applications. Although my example is in Vue, there is nothing Vue specific in this solution – it’s plain vanilla JavaScript. While you can fire off an API request and have the server simply ship out the binary data to your browser, you may want to grab that file response and do some processing on it on the client-side, prior to offering it to your user. Perhaps, you may want to present that file with a different filename than what you got from the server. You may want to download multiple files and present those in a particular way. Let’s look at how we can grab a byte-array sent from the server and control the presentation of it on the client-side.
Response-Type
For my example, I’m utilizing the ubiquitous Axios library as my HTTP client for interacting with my API to send requests and receive responses. Also, as shown in my previous post on how to Implement File Download Capabilities in ASP.NET, the server is sending the binary data – the file, as a byte-array. By default, Axios will consider each response as a text/json payload. However, in this case, we want to tell Axios that the response we are receiving from the server is raw binary data in the form of a byte-array. We do so by setting the responseType property to blob.
const http = axios.create({
baseURL: 'https://dummyimage.com/600x400/000/fff',
timeout: 10000,
responseType: 'blob'
});
let responseFile = await http.get();
Process File
In the example snippet above, we are downloading a JPG image from dummyimage.com and storing it in a variable. Now that we have that data here, we can do all sorts of processing on it and present it to your end-users in a manner of your own choosing. For our example here, I will simply pass this file to the end-user as a file download attachment. And for that, I first covert the binary data that I received as a Blob object. You can learn about the File API and the blob data type from MDN, here: File API – Web APIs | MDN (mozilla.org). Next, I use the createObjectURL method to dynamically generate a URL for this resource, dynamically add a link to the DOM, add that dynamic URL to the new link and programmatically click that link to trigger the file download.
const url = window.URL.createObjectURL(responseFile);
var docUrl = document.createElement('a');
docUrl.href = url;
docUrl.setAttribute(
'download',
'example.png'
);
document.body.appendChild(docUrl);
docUrl.click();
Closing Remarks
Modern day JavaScript provides some nice constructs to handle non-text-based data that we receive from our APIs or other web endpoints enabling developers to craft user-friendly experiences for end-users. Check out a fully working example of this in my GitHub repo, here: