Showing progress indicator when clicking on link

Question

I have an HTML link on my page.

 <a id="myDownLoadlink" data-bind="attr: { href: uRlPath }" style="visibility: hidden">Get data file</a>

When I click on the link I call the web API service and download some files. I can't understand how can I show the progress bar while something is getting downloaded. This is how I call my web API service

uRlPath("/api/GetMyData?id=" + 2
                + "&name=" + name.toString());
$('#myDownLoadlink').click();

location.href = $('#linkToDownload').attr('href');

It could have been easy to show the progress bar if I could have used Ajax call but in my case, I can't do it due for some reason. Please let me know if there is any way out.

Answer 1

Seeing that you have server access you can try to do this. A Little explanation. You should load the download link inside a iFrame. The download will then start but because the browser will not give a onload callback when the loaded url is an attachment, we need a server workaround.

The workaround will need you to send a token to the backend. Then when you send the file back you will have to set the client's cookie to this value with this response.

The cookie param should be called downloadtoken. The code will check every 200 seconds if this cookie is set. Which will only be set when the pageload is complete aka when you file is in.

Have fun .

function getCookie( name ) {
    var parts = document.cookie.split(name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
      encodeURIComponent( cName ) +
      "=deleted; expires=" +
      new Date( 0 ).toUTCString();
}



var downloadFile = function(url,completeCallback){
    var downloadToken = new Date().getTime();
    iframe  = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);



    iframe.src = url + '&downloadtoken=' +downloadToken;

    var checkServerFeedback = function(){
        var outcome = getCookie('downloadtoken');
        if(downloadtoken == outcome){
            expireCookie('downloadtoken');
            completeCallback();
        }
        setTimeout(checkServerFeedback,200);
    };
    setTimeout(checkServerFeedback,200);
};



/**
    Start of app code
**/
console.log('Add loader here');
downloadFile('http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip',function(){
    console.log('The file has been downloaded remove loader here.');
});