Providing user a image download with javascript

Question

lets say i have some url to a image on the web. lets say... url is "http://hd.wallpaperswide.com/thumbs/abstract_crystal_structure-t2.jpg"

Now I want when a user press a download button, he the image will be downloaded.

I've tried this..

window.location.href = Link;

But sometimes it just opens the image on the browser.. sometimes download is provided as it's expected.

How to achieve..

score 1 · Answer 1 · answered Feb 04 '13 at 03:29

The only way to do this is with the Content-Disposition header, server-side.

Content-Disposition: attachment; filename="somefile.jpg"

You cannot force this behavior with JavaScript. (You also cannot 100% rely on having this control, even with the Content-Disposition header. Support varies from browser to browser.)

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Assuming a HTML5/ES5 browser, you can make use of the download attribute of the <a> element.

Set the download attribute on an <a> to your desired filename.
Set the href to the location of the image.
Simulate a click on it.

If you're already using an <a> as your download button, you don't have to simulate the click, just use that element.

Please see my answer here for more, remember you don't need to do any dataURI stuff as you have a direct link.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 04 '13 at 04:04

Paul S.

64,864
9
122
138

+1, nice! Looking forward to using this as more browsers adopt. – Brad Feb 04 '13 at 04:38

score 0 · Answer 3 · answered Feb 04 '13 at 03:36

0

If you're willing to rely on Flash, this library could solve the problem.

https://github.com/dcneiner/Downloadify

answered Feb 04 '13 at 03:36

jthomas

858
6
19

Does this work with images? The comment at the top says it works with text files. – Brad Feb 04 '13 at 03:42
Downloadify has a base64 option that might get the ball rolling. – jthomas Feb 04 '13 at 04:36

score 0 · Answer 4 · answered Feb 04 '13 at 03:44

You could, if you're willing to sacrifice the speed of the download, create a server-side script that acts as a proxy: it would download the file to your server and then pass it along to the client's browser with the appropriate headers (Content-Disposition: attachment) as mentioned in Brad's answer. Instead of linking to the file itself you would instead link to the "gateway" on your own server. The exact implementation will depend on your infrastructure and the language/libraries you choose to use.

There are numerous arguments against this approach (liability-wise, security-wise, and performance-wise) and I would not recommend it unless you have no alternatives.

Providing user a image download with javascript

4 Answers4

Linked