How do I change a filename on-download with javascript?

javascript greasemonkey
supercoolville picture supercoolville · Sep 23, 2011 · Viewed 15.9k times · Source

The script adds a download link for videos (on a specific site). How do I change the filename to something else while downloading? 

Example URL:
"http://website.com/video.mp4"

Example of what I want the filename to be saved as during download:
"The_title_renamed_with_javascript.mp4"

Answer

Micah Henning picture Micah Henning · Jan 16, 2013

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 set to that URL, set the download property to whatever you want the filename 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();

Related questions

window.close and self.close do not close the window in Chrome

The issue is that when I invoke window.close() or self.close() it doesn't close the window. Now there seems to be a belief that in Chrome you can't close by script any window that is not script created. That …

Read More
Get image data url in JavaScript?

I have a regular HTML page with some images (just regular <img /> HTML tags). I'd like to get their content, base64 encoded preferably, without the need to redownload the image (ie. it's already loaded by the browser, so …

Read More
alert a variable value

How do I display the value of a variable in javascript in an alert box? For example I've got a variable x=100 and alert(x) isn't working. the script used in grease monkey is here var inputs = document.getElementsByTagName('input'); …

Read More