Is it possible to catch browser's File Open/Save dialog event using Javascript
Solution 1
No, there is no event for that.
Solution 2
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.
lazy functor
Updated on July 09, 2022Comments
-
lazy functor almost 2 years
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.
-
Darin Dimitrov over 13 yearsWhy a let down? I would say it's a very good thing which protects users privacy. +1 by the way.
-
Matthew Flaschen over 13 yearsI 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.
-
lazy functor over 13 yearsI 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
-
Brock Adams over 11 years@BryanDowning, The
beforeunload
event will fire when that dialog opens. -
Matthew Flaschen over 11 years@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.
-
Brock Adams over 11 years@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.
-
Markiv over 8 yearsThis works as needed. Not sure why this answer is not rated high.