Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"Failed - Network Error" When trying to provide download in HTML5 using 'download' attribute

Tags:

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

like image 843
IceBox Avatar asked Mar 22 '17 17:03

IceBox


People also ask

How do I fix a network error?

Restart your device. Open your Settings app and tap Network & internet or Connections. Depending on your device, these options may be different. Turn Wi-Fi off and mobile data on, and check if there's a difference. If not, turn mobile data off and Wi-Fi on and check again.

Why do I get failed network error?

This error is known to be caused by Security Software, Browser Extension/Plugins or due to certain Apps and programs, preventing Chrome browser from downloading files on your computer. In certain cases, the problem can also be caused due to presence of Malware and Rogue Adware programs on your computer.


1 Answers

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)?

like image 169
Canis Avatar answered Oct 14 '22 23:10

Canis