CODEWITHSUNDEEP
javascriptgreasemonkey
supercoolville
supercoolville

Reputation: 9096

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

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"

Upvotes: 21

Views: 36679

Answers (7)

apc
apc

Reputation: 5586

If the files arn't too big you can do this by downloading the data into memory on the client and then serving them up to the browser as a data url:

  const response = await fetch(url)
  if (!response.ok) {
    return
  }

  const blob = await response.blob()
  const dataUrl = await blobToDataURL(blob) //npm i blob-util

  const a = document.createElement('a') // Create <a>
  a.href = dataUrl
  a.download = fileName // File name Here
  a.click() // Downloaded file

Upvotes: 0

Boris Mossounov
Boris Mossounov

Reputation: 4132

Just in case you are looking for such a solution for your nasty downloading chrome extension, you should look into chrome.downloads API, it needs additional permission ('downloads') and allows you to specify filename. https://developer.chrome.com/extensions/downloads

However there is a problem I'm facing right now. The chrome extension I'm refactoring has 600k+ user base and adding a new permission would disable the extension for all of them. So it is no-go solution for me, but if you are developing a new extension you definitely should use it.

Upvotes: 0

Micah Henning
Micah Henning

Reputation: 2185

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();

Upvotes: 23

Brock Adams
Brock Adams

Reputation: 93613

You can probably do this with a Chrome userscript, but it cannot be done (yet) with Greasemonkey (Firefox) javascript.

Workaround methods (easiest to hardest):

  1. Add the links with Greasemonkey but use the excellent DownThemAll! add-on to download and rename the videos.

  2. Download the videos as-is and use a batch file, shell-script, Python program, etc. to rename them.

  3. Use Greasemonkey's GM_xmlhttpRequest()Doc function to send the files to your own web application on a server you control.
    This server could be your own PC running XAMPP (or similar).

  4. Write your own Firefox add-on, instead of a Greasemonkey script. Add-ons have the required privileges, Greasemonkey does not.

Upvotes: 1

oezi
oezi

Reputation: 51817

The filename for downloading is set in the header (take a look at "Content-Disposition"), wich is created on server-side.

There's no way you could change that with pure javascript on a file you're linking to unless you have access to the server-side (that way you could pass an additional parameter giving the filename and change the server-side behaviour to set the header to match that... but that would also be possible with pure html, no need for javascript). Conclusion: Javascript is absolute useless to achive what you want.

Upvotes: 3

Saket
Saket

Reputation: 46157

AFAIK, you will not be able to do this right from the client itself. You could first upload the file onto the server with the desired name, and then serve it back up to the end user (in which case your file name would be used).

Upvotes: 0

Fenton
Fenton

Reputation: 251232

You can't do this with client-side JavaScript, you need to set the response header...

.NET

Response.AddHeader("Content-Disposition", "inline;filename=myname.txt")

Or PHP

header('Content-Disposition: inline;filename=myname.txt')

Also available in other server-side languages of your choice.

Upvotes: 5

Related Questions