8

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!

trevorhinesley
  • 845
  • 1
  • 10
  • 36
  • 3
    Most browsers already implement file download w/progress bar. I'm confused by the line *"save the file to the user's specified location in their browser's preferences"* -- If you want the user to be able to download the file, simply provide a link to it. – Justin ᚅᚔᚈᚄᚒᚔ Oct 05 '11 at 20:52
  • Alright, but they want the progress bar next to the "Download" button, so separate from the browser's progress bar. Does that make sense? – trevorhinesley Oct 05 '11 at 21:00
  • Not at all. What is the progress bar next to the Download button supposed to track progress of? The file download? – Justin ᚅᚔᚈᚄᚒᚔ Oct 05 '11 at 21:02
  • Yes, it's a second progress bar by all intents and purposes. When you click download, a little progress bar will pop up on the browser page (similar to Ajax fashion) and show the progress of the download from 0 to 100%. – trevorhinesley Oct 05 '11 at 21:33
  • 4
    The only conceivable way to do this browser-side would be to request your file via AJAX and write it to disk via JavaScript. Unfortunately, most (if not all) browsers prevent this for reasons of security. Alternatively, you can set up some complex server-side code that reports how much data has been sent to the client, but this would be much more effort than it's worth. Your best bet is to convince "they" that it's best to simply provide the link and let the browser handle the download. – Justin ᚅᚔᚈᚄᚒᚔ Oct 05 '11 at 21:46

3 Answers3

6

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.

Jason
  • 3,379
  • 25
  • 32
1

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...

realkstrawn93
  • 722
  • 1
  • 6
  • 13
1

Just put the download attribute to your anchor tag in HTML5.

<a href="https://www.w3schools.com/images/picture.jpg" download>Download</a>
Imad Ullah
  • 929
  • 9
  • 17