How do I execute some javascript after a file is downloaded?

Question

I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:

$('#TerritoriesToExcelLink').click(function() {
    $('#TerritoriesToExcelLoading').show();
    window.location.href = $(this).attr('href');
});

I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.

I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.

How can I hide the loading message once the file has been completely downloaded?

Doesn't assigning to window.location.href just blow away away your whole loaded page? What else is going on here? — Plynx, Feb 19 '13 at 09:36
I'd say: you can't, because JS by its own is not able to know when a Download has been finished. — sascha, Feb 19 '13 at 09:37
Possible duplicate of [Detect when browser receives file download](http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download) — Sᴀᴍ Onᴇᴌᴀ, Jan 19 '17 at 18:28

score 3 · Accepted Answer · answered Feb 19 '13 at 09:46

3

Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.

answered Feb 19 '13 at 09:46

Plynx

11,341
3
32
33

This looks interesting. So the cookie wouldn't turn up until the file has completely downloaded? – George Duckett Feb 19 '13 at 09:53
@GeorgeDuckett No, not necessarily. The browser will get the cookie in the header just before the bytes in download. Whether they write the cookie right away or not is implementation specific. From what I've seen they wait. You know at least that a successful connection is established and near completion. If you want proof of the completion, you need to poll the server for this information rather than the cookie, which requires you to (probably) override the static file streaming behavior of your web server to track completion on a given stream ID defined by your initial client page. – Plynx Feb 19 '13 at 10:09

score 2 · Answer 2 · answered Feb 19 '13 at 09:48

2

If you aren't opposed to using flash...

You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.

answered Feb 19 '13 at 09:48

Dean North

3,741
2
29
30

I'd prefer something without external dependencies, but if there's no other option I'll probably go with this so thanks for the answer. – George Duckett Feb 19 '13 at 09:50

score 1 · Answer 3 · answered Feb 19 '13 at 09:40

1

This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.

I don't think tracking the progress can be done with server side languages either.

answered Feb 19 '13 at 09:40

Matt Cain

5,638
3
36
45

How about something like setting off a jquery ajax request and doing something once it's downloaded? Or is that different for downloads compared to pages/json? – George Duckett Feb 19 '13 at 09:47

How do I execute some javascript after a file is downloaded?

3 Answers3

Linked

Related