Converting ZIP to a Blob - download

Question

In our Ruby on Rails application we have a controller action that sends a ZIP:
send_data File.read(zip_pathname), filename: zip_filename, type: 'application/zip'
We make this downloadable using the download attribute on a link like so:
<%= link_to zip_download_path(#object), download: zip_filename do %>
<i class="fas fa-download fa-fw"></i> Download ZIP
<% end %>
Which works fine, but can take up to 5-6 seconds before anything happens (due to the ZIP size)
To prevent the user clicking the link again and to show something is happening we have tried to retrieve the download using AJAX and then turn it into a Blob and use FileReader to download it:
const reader = new FileReader();
reader.onload = function(e) {
const anchor = document.createElement('a');
anchor.style.display = 'none';
anchor.href = e.target.result;
anchor.download = 'download';
anchor.click();
hideLoading();
}
$('[download]').on('click', function (e) {
e.preventDefault();
showLoading();
var download = $(this);
$.get(download.attr('href'), function (data) {
const blob = new Blob([data], { name: download.attr('download'), type: 'application/zip' });
reader.readAsDataURL(blob);
});
});
This successfully shows the loading screen and then downloads the ZIP and hides the loading screen again with the exception that the ZIP is returned as download error instead of the actual ZIP like before... it would seem the conversion of the ZIP to a Blob is where it fails...
Is it possible to convert a ZIP to a Blob? And is there anything wrong in the code above?
Looking at: e.target.result the content is:
data:application/zip;base64,...
So it looks like it has successfully created the data... however when I try and open up that in a browser window it doesn't show anything...

Answer 1

If you're downloading a non text file (like a zip file) via ajax, you have to specify a responseType, a binary one, in the example below I set it as blob so that the data you receive in the ajax response will be a blob.
A blob url is created and used in the anchor instead of a bulky data uri.
$.ajax({
url:download.attr('href'),
cache:false,
xhrFields:{
responseType: 'blob'
},
success: function(data){
var blobUrl = window.URL.createObjectURL(data);
const anchor = document.createElement('a');
anchor.style.display = 'none';
anchor.href = blobUrl;
anchor.download = 'download.zip';
anchor.click();
hideLoading();
},
error:function(){
}
});
jQuery 3+ needed for this to work.

Answer 2

Just wanted to share this for anyone who wants to do this without using jQuery3... based on the answer posted by Musa: https://stackoverflow.com/a/60510567/302533
$('[download]').on('click', function (e) {
e.preventDefault();
showFullScreenLoading();
var $this = $(this);
var request = new XMLHttpRequest();
request.open('GET', $this.attr('href'), true);
request.responseType = 'blob';
request.onload = function (e) {
var data = request.response;
var blobUrl = window.URL.createObjectURL(data);
var downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = $this.attr('download') || 'download';
downloadLink.click();
hideFullscreenLoading();
};
request.send();
});