0

I have an angularjs application that has an export feature. Export generates a file dynamically server side. The generation of this file could be seconds to minutes. I would like to be able to give the user some sort of status that the server is generating the file. Even if its just a spinner on the page letting the user know something is happening.

My problem however is this. I am not making a 'GET' request as a resource in angular. I am just setting:

window.location.href

to point at the url on the server that will start the file generation an send it back to the client.

This means that if the file takes 1 minute to generate the download dialog for the browser does not pop up until that minute passes and the file is ready to download.

Is there a way to make a GET request for file download and then get a callback when the get request was successful?

lostintranslation
  • 23,756
  • 50
  • 159
  • 262

1 Answers1

1

You can initiate downloading the file in an hidden iframe and show a loader, and hide the loader when iframe is loaded using onload event handler.

Sample code below just to give you an idea - 

hiddenIframe.src = url;
loader.show();

hiddenIframe.onload = function() {
   loader.hide();
};
Prasad K - Google
  • 2,584
  • 1
  • 16
  • 18
  • Seems pretty tricky, I like it! However I am not seeing the onload function get fired when the src changes. – lostintranslation Nov 11 '13 at 20:50
  • It doesn't fire when the source changes but when the file is downloaded. There is an example here - http://stackoverflow.com/questions/13952942/iframe-readystate-does-not-work-in-chrome – Prasad K - Google Nov 12 '13 at 04:37
  • Will this work if I am generating the file server side? Or does the file already need to exist? Seems like this works great for files that exist on my server, yet if I dynamically generate a binary file and ship it back it does not work. – lostintranslation Nov 12 '13 at 17:22
  • Umm, it should work in both the cases. Iframe doesn't know whether the content is readily available in the server or is prepared dynamically, but its onload handler will just wait for the content to be loaded and called when loaded. – Prasad K - Google Nov 13 '13 at 06:38
  • Doesn't work in newer Chrome browsers. Ended up using https://github.com/johnculviner/jquery.fileDownload. Same solution with addition of cookie. Works great. – lostintranslation Jan 04 '14 at 17:46