detecting when the “File download” popup is closed

Question

I have a web page (made with JSF) where some links allow the user to get a PDF file.

When the user clicks on such a link, a waiting popup (it is a modal panel) is displayed (because the generation of the PDF can be long), and once the file is created, IE displays the "File download" popup that proposes "Open", "Save" and "Cancel" options.

Is there a way in Javascript to know from my web page when this popup is closed, i.e. when the user has saved (or opened) the PDF file?

To be a little more precise, in the web page that displays the link to the PDF file, a modal popup is displayed (the "waiting popup") in order to make the user waits for the "File download" popup. The problem is that when the user Saves (or open) the PDF file, the "File download" popup closes, but the user then "returns" to the original webpage, with the waiting popup still displayed.

Note that my application runs only in IE6, so I am not against a IE(6)-only solution...

I have also no problem with solutions that need jQuery ;)

Edit: If a solution exists to catch any event that is fired exactly when the "File download" popup is displayed to the user (i.e. before the user chooses to Save, Open or Cancel), it will be fine for me too!

Answer 1

No such event exists. You need to take a different approach to solve this.

1. target the download link to a hidden iframe with a name (target="myhiddeniframe")
2. on click of the download link, show your loading spinner
3. set the onload attribute of the iframe to a callback that hides your spinner

Net effect: you "spin" while the pdf is generated, and "unspin" when the "File download" dialog appears (as opposed to when the "File download" dialog is closed).

Answer 2

I had to work on this kind of issue, on another project. I finally found a smart solution, as explained in another Stackoverflow question.

The explanation is given in the following post: http://gruffcode.com/2010/10/28/detecting-the-file-download-dialog-in-the-browser

The idea is to "simply" use a cookie to define when the file is downloaded.

Answer 3

I am very sure that the answer is no, unless you want to consider some sort of ActiveX plugin to the browser (in which case the answer might still be no...)

Answer 4

All of the answers that I read here and in related question on stackoverflow and elsewhere only solve the first part of the problem, the time it takes for the server to prepare the file. The second part of the problem, which is the time it takes for the file to actually finish downloading on the client, is not so trivial.

In our application we followed the following approach. We already have a notification push mechanism based on cometd (you can read more about cometd here: What is Cometd ? Why it is used and how to work on that), but I suppose you could also use WebSockets or something similar. We use Java in the back-end, but it can be anything. So:

1. Client initiates download sending a flag/token containing the user ID and some other unique value that is application and download specific. It hides the download button.
2. Server receives the request, prepares the file for download and starts the response, setting appropriate headers as discussed in other solutions (e.g. using a cookie).
3. Client receives the response, but does not show the button, it just knows that the server has successfully created the file and the download started.
4. Server knows when the download actually finishes (because it's in a loop streaming the file to the output, as described here: https://stackoverflow.com/a/2343483/134120). When the server knows that the file has finished downloading, it pushes a notification to the client with the token from step 1 using cometd.
5. Client receives notification that the download finished and shows the button again.

Answer 5

• open waiting popup
• do AJAX query to generate file returning only a direct URL to the generated file.
• in callback, close waiting popup then redirect to that URL

Example:

$('.generate_file_asynchronously').click(function(){
    var url = $(this).attr('href');

    show_loading_message();

    $.get(url, function(file_url) {
        hide_loading_message();
        window.location.href = file_url;
    });

    return false;
});