How do you serve a file without leaving the page?

Question

Aims

I'm trying to let users download a file (myfile.zip in this case) by clicking a button on the page, without them leaving the page - ie the browser must stay on the current page, and leave them in a position where they can continue to use the page, including clicking the button again (should they wish to get a new copy of the file).

I need this to work across all browsers (IE6-8, Firefox, Chrome, Opera, Safari).

Background

Packaged inside the zip is a selection of stuff based on their other interactions (some of which may be partially complete) from the same page (this is all done via ajax) and I don't want them to leave the page as they would lose any unsaved changes.

Kean

Note: these days browsers may trigger a warning when the user initiates a second or subsequent download from the same page for security reasons, in case the user has been tricked into starting downloads. It does this by showing a "stop allowing this page to download files?" warning. I've noticed this in Chrome. I don't know much more about this though. It sucks that some websites abuse download links (by disguising them) to make this necessary. – Mccaleb

Answer 1

To avoid leaving the page (if you do this the page tries to close itself first, so that it's sure that you've saved everything, and you get warning messages if you haven't) or leaving blank tabs (which I don't like, nor the use of the depreciated target attribute) I've used an iframe, whose src attribute is changed in javascript.

This works everywhere except some versions of Opera, which I have considered an acceptable loss (I might fix that via the use of one of the other solutions plus browser detection later).

Kean

Answer 2

Add the following header when the download file is served:

Content-disposition: attachment; filename=filename.zip

Most browsers will wait to see what type of thing they are loading before they clear the current page, and if it something that should be downloaded as a file they won't navigate away from the current page (they'll show a Save As dialog in front of the page, which can be dismissed to return to the page).

If however you find that a certain browser does navigate away from the current page, you may try having the link to the download contained in a small iframe, so only that frame changes.

I think it's a better solution to opening the link in a new window, because some browsers will leave the new window up even once it's determined that it is a file that should be downloaded, so you end up with a blank window.

Mccaleb

Answer 3

If you make the link open in a new window/tab (e.g. via the <a> tag's target="_blank" attribute), it won't disturb the contents of the current window.

The target attribute is deprecated, but widely supported. Depending on the browser, you may also be able to use the CSS3 target-name property.

If your goal is to absolutely guarantee that the main window is undisturbed, this is likely the safest method, as it's resilient against download errors.

Railing

Answer 4

I believe if you direct the user to a file and the MIME type is something the browser knows it must download vs render, the browser will not leave the page. For instance if you were serving a zip file the browser would know it was a zip file and prompt for download. But if you were going to serve a zip file from a page request (i.e. /file.aspx?file=myinfo.zip) then file.aspx would need to change the MIME type to be "application/zip" before send back the response in order to prompt the user for the download.

One major caveat here is if the file didn't exist for some reason the user would get a 404 and be directed to the error page.

As a sure-fire way of not redirecting the user you could open a pop-up for downloading.

Atonality

Answer 5

We do this on postback on an aspx page by setting ContentType to "application/octet-stream", then streaming the zipfile with Response.BinaryWrite(..) and Response.Flush().

Gives the user a popup "do you want to open or save" the file.

Page is still available.

Tacit

Answer 6

By the way, specifying the appropriate content disposition header alone might not work in all browsers. Specifically, I've seen it not work in Opera, and IE7 displays the yellow security warning bar.

In addition to the appropriate header, as described by thomasrutter, The way I've done this is by using a hidden form:

<form id="download_form" method="get" action=""></form>

When the user clicks a button, you can manipulate the "action" attribute of the form with the URL of the file.

This seems to work in all browsers, even IE7!

Allyce

does the form then get submitted, or does simply changing the action property cause the file to be fetched? – Kean

Answer 7

in my case to create 1 page app without reload and download files, I used ajax to get the file blob from server and create URL for the user, so instead user click in link to new route that send the file he will click in js button that get the file using ajax and create download "a" element for user (note this element created will not deleted except you do so user will clicking the button again (to get a new copy of the file).

please note you can use AJAX to upload files to server or download files or both in same request and response as I did

Porett