JonathanSvärdén

“Right click and save as” needs to go away

🕒 2 min read

For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while trying to download and display the file.

From a UX perspective though, adding instructions on how to click a link is not optimal, and feels like a hack. Not to mention that lots of people are literally afraid of the right mouse button. My mother is anyway.

Luckily there’s a correct way of doing this now, though it hasn’t seen widespread adoption yet:

The HTML5 download attribute

You use it like this:

<a href="hugemothereffinpdf.pdf" download>Download file</a>

Any file the browser would normally try to display natively or through a plugin can be forced to download using this attribute.

You can also give the attribute a value, like this:

download="filename"

This is useful if you’re serving up a dynamically generated file with a horrific filename like 9fd-f32ff322.pdf.

<a href="9fd-f32ff322.pdf" download="invoice">Download file</a>

The file will be saved as invoice.pdf.

Support

The download attribute is supported in Chrome 14+ and Firefox 20+. You can easily test for support like this:

if('download' in document.createElement('a')) //supported

Firefox quirk

When specifying a value for the attribute, Firefox will not automatically give the file the correct file extension like Chrome does. For this reason you should specify the extension explicitly. Chrome does not suffer from doing this.

download="filename.txt"

Old IE

For IE9 and older you can provide a fallback of sorts with a conditional comment:

<!--[if IE]><p>Right click and save as.</p><![endif]-->

Server-side solutions

There are or course other ways of forcing file downloads, such as adding certain configuration to your .htaccess file, but I think server-side solutions to front-end problems should be avoided whenever possible.

Discuss on Hacker News or reddit.

Archived comments

Erik Eng May 14, 2014
Serving the file with the right headers will also do the trick, as you mentioned. It's not really a client side thingy, just good practise HTTP :)
Daniel Jurek February 09, 2015
This one simple header will make browsers display a download dialog regradless of content type: Content-Disposition: attachment; filename="fname.ext" Source: https://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html However, I'm very pleased to see there's a way to do this with the frontend! Things like UX are in the domain of those designing/writing the frontend... so it makes sense that those same designers can craft the desired UX without necessarily having to refer to, edit, specify, or negotiate with the backend.
Brett Morris May 18, 2016
Conditional comments have stopped working in IE10, so this wasn't very helpful. I'm learning that you can add some code to make the browser react like it should. IE9 support stopped a while ago and according to W3schools its use is below.5% so screw that. I'm currently using a CMS ModX and not even the solution I've linked is working. I think theres other code canceling it out, but hopefully this is useful to someone
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN
niccolo.mineo February 02, 2016
What about Safari?
jef November 11, 2015
This is so brilliant! Thanks for the great overview.
John August 13, 2015
thanks Jonathan! download="file-description" worked great!
James Ashford July 20, 2015
Perfect thank you. Could have saved me 30 minutes of my life dicking about with useless plugins if I'd found article earlier. Cheers, James
DJ Lein April 02, 2014
Very helpful! Thanks for the write up.
Fadli Saad March 27, 2014
Great! this is what I am looking for as even the browser can preview image, pdf etc, it is not for zip file as my site serve various type. Also for the fallback, pity IE :)
Amanda Veenhuis November 07, 2013
Thank you - this is just what I was looking for.
David October 30, 2013
Thanks for this post...simplicity rocks!
Daniel Puglisi July 16, 2013
I forgot about this one. Thanks for the heads up!
Rene Lortie December 29, 2014
Best solution found so far for this common "problem". Many thanks!