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.
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.
No, there is no event for that.
beforeunload event will fire when that dialog opens.
It is possible, through a cookie. tl;dr Use a cookie to check the download status. This is the only place that respects the server response after the browser redirects to the download url.
This post explains everything. https://stackoverflow.com/a/29532789/7521854
Believe it, I did it and it works fine!
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
});
