The bold line above is the one that isn't working and I'm trying to get figured out. Here is the relevant HTML and javascript for that piece:
<button type="button" class="btn btn-primary" id="transform">
<span class="glyphicon glyphicon-wrench"></span>
Transform Uploaded Files
</button>
<a id="test_dl" href="" download="user_download.zip">
Download File
</a>
$('#transform').click(function (e) {
$.getJSON('/transform', {}, function (final_zip){
var zipfile = "file://" + final_zip.zip_filename
$('a#test_dl').attr("href", zipfile)
});
});
The user clicks the "Transform Uploaded Files" button, which then updates the href to the resulting zipfile location and then is able to download the resulting package by clicking on the "Download File" HTML.
I've tested this in Chrome so far and using the developer console I'm able to see that the href is being updated properly prior to clicking on the download button, but it always gives a "Failed - Network Error" dialog. What's odd is that when I click on "Show All Downloads" and then click on the failed download, it completes successfully.
Edit: I should add that the backend for this is currently running on Python's Flask
Apparently this is a Chrome issue with the data-URL getting too long. I'm still working through it myself, but there apparently are some solutions involving Blob-objects.
See here: Download Canvas as PNG in fabric.js giving network Error
And here: How to export JavaScript array info to csv (on client side)?
Based on How to export JavaScript array info to csv (on client side)? here is how I've implemented a solution for this issue:
Note that I only needed a solution for Chrome - web, so this is what I used. For a complete solution you'll need to check out the examples in the original answ
$.ajax({
url: "/getData",
dataType: "text",
success: function(data){
$("#download").attr({
"value": "Download",
"href": URL.createObjectURL(new Blob([data], {
type: "application/octet-stream"
})),
"download": "outputFile.csv"
});
}
});