Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif

Question

I'm using jQuery to download some files that take some time to create, so I show a loading gif to tell the user to be patient. But the problem is, the loading gif is currenntly shown and hidden all within a split second.

Is there a way for me to hide the loading gif after the download is complete and the user has the Save File popup on the screen?

HTML

<tr data-report_id="5">
    <td>
        <input type="button" id="donwload"></input>
        <img class="loading" src="/Images/Loading.gif"/>
        <iframe id="hiddenDownloader"></iframe>
    <td>
</tr>

JS

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
iframe.src = url;
$(".loading").hide();

THE SOLUTION I ENDED UP USING

<script>
$("#download").on("CLICK", function () {
    var button = $(this);
    button.siblings(".loading").show();

    var rowNumber = GetReportId();
    var url = GetUrl();
    button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />');
}

function loadComplete(rowNumber) {
    var row = $("tr[data-row_number=" + rowNumber + "]");
    row.find(".loading").hide();
}
</script>

<tr data-report_id="5">
    <td>
        <input type="button" id="download"></input>
        <img class="loading" src="/Images/Loading.gif" style="display:none;"/>
    <td>
</tr>

UPDATE

I was having problems with this method in Chrome so I changed all my jquery code to look for a cookie that the back end code set when the download had finished processing. When the jquery detected the cookie, it turned off the loading gif & whiteout.

Detect when browser receives file download

score 3 · Accepted Answer · answered Jun 10 '13 at 11:05

3

Have the iframe onload event call your code:

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    iframe.onload = function() {
        $(".loading").hide();
    };
    document.body.appendChild(iframe);
}

iframe.src = url;

answered Jun 10 '13 at 11:05

epoch

16,396
4
43
71

this code work but it's not working for text file(.txt). please share code to download text file for all browsers – Manoj Rana Mar 08 '18 at 10:16
@ManojRana It is best to ask a new question. – epoch Mar 08 '18 at 13:43

score 2 · Answer 2 · answered Jun 10 '13 at 11:02

2

iframe.src = url;

$(iframe).load(function() {
    $(".loading").hide();
});

answered Jun 10 '13 at 11:02

Alex

9,911
5
33
52

score 0 · Answer 3 · answered Jan 24 '17 at 07:33

I suggest to separate the file generation from downloading.

There should be one call which request server to generate file. Server should respond with unique id to get it downloaded.

Another call should be simple get call that can be embedded into iframe/launch new window which directly download the generated file.

Just show loading screen till you receive the response for first call.

Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif

3 Answers3

Linked