How to use the download attribute

HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.

As you know, there are some files that the browser doesn’t automatically download; images, other web pages and depending on the settings in your browser, sometimes even PDFs. The download attribute gives the browser a native way to download these files automatically, without having to fall back on JavaScript. This is really useful for any app that deals with the downloading of images, such as image upload sites.

 

Using the download attribute

Since the download attribute doesn’t use scripts of any kind, it’s as simple as adding the attribute to your link:

<a href="myFolder/myImage.png" download>Download image</a>

What’s great about this attribute is that you can even set a name for the downloadable file, even when it’s not the name on your server. This is great for sites with complex file names, or even dynamically created images, that want to provide a simple and user-friendly file name. To provide a name, you just add an equals sign, followed by the name you want to use surrounded in quotes, like so:

<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

Note that the browser will automatically add the correct file extension to the downloaded file, so you don’t need to include that inside your attribute value.

 

Browser support

Currently, only Chrome 14+ and Firefox 20+ support the download attribute, so you may need to fall back on some simple JavaScript to detect if the attribute is supported. You can do so like this:

var a = document.createElement('a');

if(typeof a.download != "undefined")
{
   // download attribute is supported
}
else
{
  // download attribute is not supported
}

 

Conclusion

Taking into consideration everything that has been added to HTML5, the download attribute is a very small part, but in my opinion it’s an attribute that was long overdue, and definitely has its uses in today’s apps for both usability and simplification.

Have you implemented the download attribute? What are your unsung heroes of HTML5? Let us know in the comments.

Featured image/thumbnail, download image via Shutterstock.

  • Mohamed Elkebir

    Thank you for the great information Sara, but i think it’s not for the today. maybe we should wait some years til the browsers support it.
    Using JS for now is the best choice.

    • Sky Blue

      It should be supported for most by this year

  • http://twitter.com/DerCreak Niklas N

    I think you forgot to add the download-attribute in your examples :)

    • http://twitter.com/NikkitaFTW Sara Vieira

      Download image

      The dowbload=”myImage” is the download attribute,
      http://davidwalsh.name/download-attribute

      • http://twitter.com/DerCreak Niklas N

        I know, but in the beginning there was no download attribute at all in your examples :)

      • http://twitter.com/NikkitaFTW Sara Vieira

        The first time I saw the article it had it and in my copy of the article it also had that , don’t know what happened

      • victor lai

        Try make it into notepad++ file, then upload it to your cloud and share the sample link…I’m positively sure there won’t be anymore problem…This is just a suggestion…sorry for the inconveniences caused…

    • Benjie

      The download attributes have always been there in both examples. Can you see them now?

      • http://twitter.com/DerCreak Niklas N

        yes i can see them :)

  • http://dziurdzia.eu/ Dawid

    I think, there is some problem with examples: no download atribute at all…

    • http://twitter.com/NikkitaFTW Sara Vieira

      The attribute is in there is just download

  • http://twitter.com/smlombardi Steve Lombardi

    Neither of your examples actually is using the “download” attribute. They look like normal links to me. I am confused.

    • http://twitter.com/NikkitaFTW Sara Vieira

      To use it all you need to do is add download in it

    • Benjie

      Can you see them now?

  • http://twitter.com/hameedraha Hameed Rahamathullah

    I think the sample codes need to be updated.

    • http://www.summitweb.net/seo-inverness-scotland.html Martin Oxby

      The code has now been updated by the looks of things :-)

      • Benjie

        Actually we haven’t updated the code, the download attributes have always been there. Apologies for the inconvenience, we’re looking into why some people couldn’t see them.

  • thetrickster

    Hmmm.. am I missing something? I don’t see the download attribute in your code examples and it just looks like a regular ol’ anchor tag with an href… is it just my brainfart?

    • Benjie

      Can you see them now?

  • Janu

    Thank you…

  • Tanweer Akhtar

    this was a really nice post, thanks.

  • http://www.infoitindia.com/ Deshwal

    Yup, Not working in #IE

  • Anil

    what i need to do to support in IE and safari. is there any alternative approach.