Indicate Loading In Browser When Downloading File

Question

On our web application, we have loads of attachments, some static (from DB) and some dynamic (generated), some of the generated files take really long (Content-Disposition: Attachment) to download, and the user will click away sometimes. is there anyway to show and HIDE a loader as soon as the file is actually served to the browser?

I have looked for similar questions on stackoverflow and there are, but none of them with useful answers: for example.

Is this a viable question or should i just try to increase the speed at which the files are generated?

Is this the delay between clicking the link and generating the file, or the actual downloading of a file? — TJHeuvel, Sep 13 '11 at 08:45
It is the delay between clicking and the file-download dialog box showing. — epoch, Sep 13 '11 at 08:49
Duplicate with answer: http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download — Poma, Jul 14 '15 at 16:17

score 4 · Accepted Answer · edited May 23 '17 at 12:14

4

For that you can use the following post from this community:-

JavaScript/jQuery to download file via POST with JSON data

Use javascript post method that I mentioned first. Hope this finally answers your question. :)

edited May 23 '17 at 12:14

Community

1
1

answered Sep 13 '11 at 09:54

Lav

96
2

i will use this solution, thanks for the input, im upvoting all your answers for your assistance, – epoch Sep 13 '11 at 10:06

score 2 · Answer 2 · answered Sep 13 '11 at 09:01

2

You can use ajax code for doing form submit. While the server processes the request, show a div with loading icon at top of the page.

Write following code in your jsp.

<div  id="submitPage">
  <img src="/images/loading.gif" alt="">Submitting order...
</div>

initially hide it by using this code

$('#submitPage').hide();

and on click of your submit button just show it.

$('#submitPage').show();

Hide it again when ajax response comes.

Hope it solves your problem.

Regards, Lav

answered Sep 13 '11 at 09:01

Lav

96
2

1

Thanks Lav, I have tried this but the page sending the request does not reload (hence the loading will not hide again), and an ajax request does not start up the download-dialog – epoch Sep 13 '11 at 09:10

score 2 · Answer 3 · answered Sep 13 '11 at 09:29

you need not load the page again. Simply play around with the ajax call with a bit of javascript manipulation. :)

$('#submitPage').show();

var url = "urlUsed";

$.post(url, $("#formName").serialize() , function(responseValue){                   

    $('#submitPage').hide();

});

If not this way, you can change ajax call as :-

function functionName(){
    ajaxRequest = createXMLHttpRequest(); 
    var url = "urlUsed";
    $('#submitPage').show();
    ajaxRequest.open('get', url , true);
    ajaxRequest.onreadystatechange = processAjaxResponseForMethodName;
    ajaxRequest.send(null);
}

function processAjaxResponseForMethodName(){
    if(ajaxRequest.readyState == 4) {  
           $('#submitPage').hide();

    }
}

It works (makes request to server and hides the loading) but the file data is now in ajaxRequest.responseText and is not 'downloaded' to the onscreen download file dialog. see this link : http://groups.google.com/group/ajax-world/browse_thread/thread/b7abc61c1f91376a/af58d68f0b706ae9?hl=en&pli=1 — epoch, Sep 13 '11 at 09:39

Indicate Loading In Browser When Downloading File

3 Answers3