3

<html>
  <body>
    <a href="https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download> download</a>
  </body>
</html>

Hello! Any suggestions to force save-as dialogue for image w/o .htaccess?

Унгамист Долматов
  • 113
  • 1
  • 8

4 Answers4

3

This is a browser (chrome ? ) feature.

Your users may configure it as they wish.

Screenshot of Chrome's settings

Neither you nor even FileSaver.js can do anything about it...

Kaiido
  • 123,334
  • 13
  • 219
  • 285
-1

Adapted from the post: force browser to download image files on click

Since the html5 'download' attribute will still only work for compliant browsers. (As per @RichardParnaby-King's answer)

You can try:

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();

(Thanks to @DrowsySaturn's answer) It's also worth mentioning that since it's JS, some older browsers won't support this.

Since browsers each have their own way of handling links, generally browsers will aim to display an image if specified by a URL on an tag and not automatically download them. This is aimed to be rectified with the download attribute in HTML5 but obviously some browsers wouldn't have yet implemented (and some may never).

PS: Try search for your question first to prevent duplicates!

Community
  • 1
  • 1
jarodsmk
  • 1,876
  • 2
  • 21
  • 40
  • 1
    Did you tried to test it? https://jsfiddle.net/ezsk8bvb/ still does not runs "save as" dialogue. – Унгамист Долматов Mar 23 '17 at 04:32
  • @УнгамистДолматов what browser & version are you using? https://jsfiddle.net/ezsk8bvb/1/ works for me (Chrome 57.0.2987.110 (64-bit)). – jarodsmk Mar 23 '17 at 04:48
  • 1
    You are confusing the question of whether a particular link represents a file to be downloaded, with that of whether the app can force the "Save as..." dialog (which it can't). –  Mar 23 '17 at 04:54
-1

The most reliable approach is to force it on the server side.

For your convenience, the browser will automatically handle particular content in specific ways. In particular, the browser will automatically handle an image by displaying it inline, which is what you are trying to avoid.

How does the browser know that it’s an image, as opposed to some other content. The server sends a header to say so. In the case of png image, the server sends something like this:

Content-Type: image/png.

The trick is to get the server to also send a preferred method of handling the content. In your case you need a header like this:

Content-disposition: attachment; filename=…

This will tell the browser to download it.

A simple PHP script to do this would be something like this:

//  assuming png
$filename=@_GET['filename'];
$data=file_get_contents($filename);
header("Content-disposition: attachment; filename=$filename");
header('Content-type: image/png');
print $data;
Manngo
  • 14,066
  • 10
  • 88
  • 110
-1

Solved by @Kaiido's comment:

This is a browser (chrome ? ) feature. Your user may configure it as he wishes. i.stack.imgur.com/BvOD8.png And even FileSaver.js can't do anything about it...

Most chrome-based browsers (Opera in my case) has this option enabled by default.

Community
  • 1
  • 1
Унгамист Долматов
  • 113
  • 1
  • 8
  • Cool, glad you solved it. If that option was enabled by default though, why didn't it ask you to save before? – jarodsmk Mar 23 '17 at 05:03