Basic summary of what I'm trying to do:

• Take files from user (using "dropzone" drag and drop bootstrap module to recieve files)
• Modify and do some "work" on the files
• Zip files together for single file for download
• Send download back to user for download (either automatically or in a link, detailed below)

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.

Questions I hope to get answered

• What appears to be going wrong here?
• Is this even the right way to do this? All I'm trying to do is send a file back to the user when the process is done with it. I'm worried that "file://" is not correct anyways and will fail me when the server is actually remote from the user using it (currently it's local, as I'm developing it)

Edit: I should add that the backend for this is currently running on Python's Flask

Basic summary of what I'm trying to do:

• Take files from user (using "dropzone" drag and drop bootstrap module to recieve files)
• Modify and do some "work" on the files
• Zip files together for single file for download
• Send download back to user for download (either automatically or in a link, detailed below)

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.

Questions I hope to get answered

• What appears to be going wrong here?
• Is this even the right way to do this? All I'm trying to do is send a file back to the user when the process is done with it. I'm worried that "file://" is not correct anyways and will fail me when the server is actually remote from the user using it (currently it's local, as I'm developing it)

Edit: I should add that the backend for this is currently running on Python's Flask

• javascript
• jquery
• python
• html
• flask

2 Answers 2

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"
        });
    }
});