36

If a user clicks on a downloadable link such as

<a href="downloadable.txt">Download</a>

Is there a client-side (html or javascript) way to change the name of the file before the 'Save As' dialog?

Intra
  • 2,089
  • 3
  • 19
  • 23
  • possible duplicate of [Changing the name of an html download](http://stackoverflow.com/questions/10037273/changing-the-name-of-an-html-download) – Mr Lister Apr 06 '12 at 21:16

3 Answers3

99

HTML5 provides the a[download] attribute which lets you rename a file. This example will download link.txt and rename it something.txt.

​<a download="something.txt" href="link.txt">asdf</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

Note that this only works on same-origin URLs (i.e. not across different domains).

deceze
  • 510,633
  • 85
  • 743
  • 889
Dennis
  • 32,200
  • 11
  • 64
  • 79
  • 1
    Not only Chrome anymore, it also works on my Firefox 28.0. You can see the compatibility list here : http://caniuse.com/download – Bonswouar Mar 20 '14 at 14:20
  • 1
    Works in Firefox starting in version 20.0, but only for files from the same domain (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) – deterb Mar 27 '14 at 17:04
  • http://caniuse.com/#feat=download Now is supported in Opera and android browser. – Akul Von Itram Sep 21 '15 at 06:18
  • do you guys know if it works for all file types or just something basic like .txt? – Elon Zito Nov 22 '15 at 05:24
  • 2
    @ElonZito Should work for anything - it's just a file name. Is something not working that you expect to? – Dennis Nov 27 '15 at 02:48
  • @Dennis I think my issue was IIS server rules overwriting the download naming convention. Thanks! – Elon Zito Nov 27 '15 at 20:01
  • 10
    download attribute is ignored if server side did sent Content-Disposition header with filename (as stated here: https://developer.mozilla.org/cs/docs/Web/HTML/Element/a ) – Jimmmy Dec 08 '16 at 13:56
20

No, you cannot change this from the client side (HTML or javascript). You need to change it from the server. One way is to use a server side script which will set the Content-Disposition HTTP response header:

Content-Disposition: attachment; filename=somecustomname.txt
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
4

You can use Filesaver.js script written by eligrey(Im using angularjs in the example here) You can achieve the same in classic javascript using XmlHttpRequest object

//In your html code , add these : ->
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
//In your Javascript:- 

$http({
        url: "url where the file is located",
        method: "GET",
        responseType: "blob"
    }).then(function (response) {

saveAs(response.data,"newfilename.extension");

})
Vibhu
  • 536
  • 1
  • 3
  • 11