How to access and download a file from a server using HTML 5

Question

I am currently working on a website that users can download binary media files from (mainly .mp3). We need a way for a "Download" button to save the file to the user's specified location in their browser's preferences, and it needs to somehow display a progress bar.

Currently, all I'm worried about is finding a way to implement this using HTML5 and doing it in such a way that in future versions we will later be able to access that stream so that once we get this basic download part coded, we can somehow implement a progress bar in the future.

I know HTML5 has a File API, but very few browsers currently allow its implementation, and we need this to work on IE 7+ and regularly used versions of Chrome and Firefox.

Thanks for your help!

Answer 1

HTML5 supports the download attribute: http://webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html

Example:

<a href="http://.../bad-romance.mp3" download="Bad Romance.mp3">Save "Bad Romance" to your computer</a>

Clicking on this will allow the browser to handle the download (instead of opening the file using whatever application is associated with the mimetype), including a progress bar.

Note: You really want to be careful not to deviate from normal user expectation by trying to create your own implementation. This is synonymous with forcing a link to open in a new tab--it can be confusing to the user if they are expecting one behavior but receive another. In your case, try to specifically explain that this will be a "download" link, not a "play" link. The example above does this, but a "download" icon might also suffice.

Answer 2

If you want to make the download link a button instead, you can just place an <input> element inside an <a>:

<a href="example.mp3" download="EnterSongNameHere.mp3">
  <input type="button" value="<!-- enter song name here -->" />
</a>

And you can also use DOM to dynamically change the href of the element. Example from my blog, where the download button in question is basically a "Save as" button:

<a id="downloadThisPage" download="OpenMe.html>
  <input type="button" value="See for yourself" />
</a>
<script type="text/javascript">
  document.getElementById("downloadThisPage").href = window.location.toString();
</script>

Hope this helps...