22

Using Javascript is it possible to listen for browser's file open/save dialog box event. I want to perform an action when I am notified that the save file dialog box has opened now. Specifically I want to hide a loading spinner when dialog box opens (but this could very well be any other action )

I believe I can do that for a dialog box that I create, not sure if it can be done for the browser's standard dialog box.

Any pointers for that would be really helpful.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
lazy functor
  • 2,118
  • 2
  • 15
  • 16

3 Answers3

18

Yes! You can take advantage that most browsers (Tested okay on Chrome, Firefox, and IE) fire the beforeunload event just before the Individual-file Download dialog opens.

So code like this will work:

$(window).bind ("beforeunload",  function (zEvent) {
    // PERFORM DESIRED ACTIONS HERE.
    /* This code will fire just before the Individual-file Download 
       dialog opens.
       Note that it will also fire before the tab or window is closed, 
       but that should not be a problem for this application.
    */
} );


Open and run this snippet to see it in action:

$(window).bind ("beforeunload",  function (zEvent) {
    $("#dwnldStatus").text ("This code runs just before the file open/save dialog pops up.");
} );

$("#directDwnload").click ( function () {
    fireDownload ();
} );

$("#ResetTimer").click ( function () {
    $("#dwnldStatus").html (
        'Download will start in <span id="timeleft">3</span> seconds.'
    );
    fireTimer (3);
} );

function fireDownload () {
    window.location.assign (
        "//phs.googlecode.com/files/Download%20File%20Test.zip"
    );
}

function fireTimer (secondsLeft) {
    this.secondsLeft    = secondsLeft || 30;
    this.countdownTimer = this.countdownTimer || null;

    if ( ! this.countdownTimer) {
        this.countdownTimer = setInterval ( function() {
                this.secondsLeft--;
                $("#timeleft").text (this.secondsLeft);
                if (this.secondsLeft <= 0) {
                    clearInterval (this.countdownTimer);
                    this.countdownTimer = null;
                    fireDownload ();
                }
            },
            1000
        );
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Activate one of the download buttons.  The timer button is just like any other javascript initiated download, no additional  click is needed.</p>
<p>The javascript detects when the File/Save dialog pops up and changes the status to "This code runs just before the file open/save dialog pops up.".</p>
<p>Note that it is not necessary to download the file. You can cancel the download.</p>

<div id="dwnldStatus"></div>
<button id="ResetTimer">Set timer to 3 seconds.</button>
<button id="directDwnload">Download the file now.</button>

Note that beforeunload will also fire before the tab or window is closed, so plan accordingly. That should not be an issue for this question as stated.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
11

No, there is no event for that.

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
  • 2
    Why a let down? I would say it's a very good thing which protects users privacy. +1 by the way. – Darin Dimitrov Nov 16 '10 at 19:13
  • 1
    @BryanDowning, [The `beforeunload` event will fire when that dialog opens](http://stackoverflow.com/a/13698030/331508). – Brock Adams Dec 04 '12 at 07:39
  • @BrockAdams, that does hit one useful scenario. But it only works if they navigate to a zip, not if they hit Ctrl-O, Ctrl-S, right-click save image as, etc. – Matthew Flaschen Dec 04 '12 at 18:44
  • 1
    @MatthewFlaschen, The question appears to be for the scenario when the page/app is preparing an individual file to download. Ctrl-O and Ctrl-S do not apply. Right-click would not apply either in the most common applications. – Brock Adams Dec 04 '12 at 21:27
-1

Watch all elements that can invoke the file dialog.

For example, handle click events on <input type="file" /> elements. something like:

$('input:file').click(function(){ // onclick of file input
    $('.spinner').hide(); // hide spinner
});
Josiah Ruddell
  • 29,697
  • 8
  • 65
  • 67
  • I think he's talking about the regular File->Save, File->Open dialog boxes, and you can't watch e.g. the browser's toolbar or menubar. – Matthew Flaschen Nov 16 '10 at 19:20
  • I am talking about the dialog box you get when you download a file with content disposition as attachment. I think you can't watch that event. Thanks – lazy functor Nov 16 '10 at 19:28