Ajax File download Issue

Question

I am downloading a dynamic file in my application, simulating ajax using iframes. What I am doing is, when the download request is made, I will create a dynamic invisible iframe, and set the src of my iframe as the download url.I am able to successfully download the file, but the requirement is to show a download indicator once the download starts and that should finish as soon as the download dialog comes up.I provided call back after iframe creation to show the download indicator, which is successfully working, and provided another method on the 'onload' of the iframe, expecting it will be invoked, when the download dialog comes up. But unfortunately, that is not working, and because of that even after the download completes, my progress indicator is still there. I am not able to remove that. Then I came to realize that the since the content type of the response is not html, it will be served by a separate process, which leads to the download dialog and because of that my onload method is never getting called. Please let me know a solution for this.

Answer 1

I created the jQuery File Download plugin (Demo) which also fixes the problem and provides some other nice features. It basically gives you a "full Ajax-like" experience for file downloads (complete with callbacks even) that isn't normally possible for file downloads. It works pretty similarly to some other answers with an iframe but has some cool features that I have found quite handy:

• User never leaves the same page they initiated a file download from whether it is successful or there is an error
• successCallback and failCallback functions allow for you to be explicit about what the UI behavior is in either situation
• In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring, disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred. See the Demo for an example of this.

Here is a simple use case demo using the plugin source with promises. The demo page includes many other, 'better UX' examples as well.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });