Download attribute with a file name not working?

Download attribute is used to make browsers download the resource an anchor points to rather than navigate to it. And as an option, a new file name for the downloaded file can be provided.

Note that not all browsers support this. See http://caniuse.com/#feat=download

Let's suppose we had the following anchor link:

<a href="http://video-js.zencoder.com/oceans-clip.mp4" download="video.mp4"> download </a>

By clicking the link, I would expect to download the file with the name, video.mp4. But the actual file name, which is oceans-clip.mp4 was used for the downloaded file. Do you know why the new file name was not used here? (I tested this with Chrome)

Thanks!

Solution 1:

According to HTML element reference->[a]

Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).

If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.

If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.

This attribute is only honored for links to resources with the same-origin.

It's not from the same-origin, therefore it won't work.

Solution 2:

This actually is possible with JavaScript, though browser support would be spotty. You can use XHR2 to download the file from the server to the browser as a Blob, create a URL to the Blob, create an anchor with its href property and set it to that URL, set the download property to whatever filename you want it to be, and then click the link. This works in Google Chrome, but I haven't verified support in other browsers.

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest(),
      a = document.createElement('a'), file;

xhr.open('GET', 'someFile', true);
xhr.responseType = 'blob';
xhr.onload = function () {
    file = new Blob([xhr.response], { type : 'application/octet-stream' });
    a.href = window.URL.createObjectURL(file);
    a.download = 'someName.gif';  // Set to whatever file name you want
    // Now just click the link you created
    // Note that you may have to append the a element to the body somewhere
    // for this to work in Firefox
    a.click();
};
xhr.send();