How to monitor html a download event?

Question

The HTML looks like this:

<a href="http://example.com/file.pdf" download>Download</a>

I want to display a loading icon on the page, and hide it after the file starts to download.

The JavaScript looks like this:

$.fancybox.showLoading();
// after download started
when_download_started( function(){
    $.fancybox.hideLoading();
});

Is there any event that is triggered when a download starts? Thanks!

http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download and http://stackoverflow.com/questions/2343418/browser-event-when-downloaded-file-is-saved-to-disk and http://stackoverflow.com/questions/19041447/ajax-file-download-progress-event-for-download might be related to this (although they're not duplicates). You might have to remodel your code if you want to track when the download finishes, but `onclick` should generally be enough (although you can't necessarily know if the user started the download so idk). — mechalynx, Jul 22 '14 at 01:24
@PM77-1 It has several seconds before download started, so it is not a good idea.. — linjunhalida, Jul 22 '14 at 01:26
I got another idea, display a "Please wait for file download started" window other then loading page. — linjunhalida, Jul 22 '14 at 01:28
and, could be possible to make some ajax code and http://php.net/manual/en/function.readfile.php? — kraysak, Jul 22 '14 at 01:49

score 0 · Answer 1 · answered Jul 22 '14 at 01:57

There might be a possible workaround. Detecting the File Download Dialog In the Browser

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />    
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all.js" />

Javascript

Ext.onReady(function(){
    Ext.get('submit').on('click', function(e){
        Ext.MessageBox.show({
           title: 'Saving',
           msg: 'Please Wait...',
           buttons: Ext.Msg.OK,
           progressText: 'Saving the file...',
           width:350,
           wait:true,
           waitConfig: {duration:2000,interval:200,increment:20},
           icon:'Ext.MessageBox.INFO', //custom class in msg-box.html
           animEl: 'Submit'
       });
        setTimeout(function(){
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'The file download starts');
        }, 8000);       
    });
});

CSS

/*message box */
.messagebox{position:relative;width:auto;margin-left:30px;border:1px solid #c93;background:#ffc;padding:3px;font-weight:normal;color:#0000FF; font-stretch:condensed; font-size:xx-small;}
.messageboxok{position:relative;width:auto;margin-left:30px;border:1px solid #349534;background:#C9FFCA;padding:3px;font-weight:bold;color:#008000; font-stretch:condensed; font-size:xx-small;}
.messageboxerror{position:relative;width:auto;margin-left:30px;border:1px solid #CC0000;background:#F7CBCA;padding:3px;font-weight:bold;color:#CC0000; font-stretch:condensed; font-size:xx-small;}

You can get to know more about EXTJS.

How to monitor html a download event?

1 Answers1