href image link download on click

Question

I generate normal links like: <a href="/path/to/image"><img src="/path/to/image" /></a> in a web app.

When I click on the link, it displays the picture in a new page. If you want to save the picture, then you need to right click on it and select "save as"

I don't want this behaviour, I would like to have a download box popping out when I click on the link, is that possible just with html or javascript? How?

If not I guess I would have to write a download.php script and call it into the href with the file name as parameter...?

Pompano

Here is an easy way of doing using this PHP class: tutorialchip.com/php-download-file-script – Bice

Answer 1

<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

It's not yet fully supported caniuse, but you can use with modernizr (under Non-core detects) to check the support of the browser.

Axletree

Thanks for your comment, it's a good thing to know. Although you need modernizr, I now use it in all my projects so... I'll accept your answer as the new answer – Pompano

I think you might have misunderstood the role of Modernizr here. In short, it doesn't add functionality that's missing... see this answer: #18682144 – Clique

@GauravManral what seams to be the problem? – Axletree

i just wanted to download a image on click of a link rather to open it in new link, – Gereld

@GauravManral: IE doesn't support it, as mentioned in the answer. Look at the caniuse link provided. – Aude

I tested this code on Chrome and Firefox, it still just downloads the file as the actual href name. The 'download="filename.jpg"' does not seem to work on either browser. I don't see the point of this. – Nne

IMPORTANT: download attributte attribute only works for same-origin URLs. MDN Docs – Sukey

only download attribute is enough. – Stopple

What about different origins? It's only opening the images but not downloading. Any solution? – Naevus

Answer 2

The easiest way of creating download link for image or html is setting download attribute, but this solution works in modern browsers only.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" is a name of file to download. Extension will be added automatically Example here

Chiquitachirico

Will this work for Windows Message Box? I tried, it seems not working, but maybe I did something wrong?! – Expatiate

Answer 3

<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

---

download.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>

Regiment

There is a security problem, should closed "application/force-download" Content-Type! which can download anything including server PHP source! – Castlereagh

@Castlereagh is right, this would allow you to download anything from the server using directory traversal: <a href="download.php?file=../dbparams.inc>">Download</a> for example. More info here: en.wikipedia.org/wiki/Directory_traversal_attack – Cambyses

@CharlesB:then whats the safest way...except the ticked answer?? – Beckiebeckley

Anyone feel like suggesting changes to the above code in order to get rid of the security problem? Perhaps set the default $ctype to null? – Tenney

To get around the security problem, don't take absolute or relative path information from the request; only get the file name. Strip the path, e.g using $file = pathInfo($_GET['file'] and then assemble the path by appending some known path with $file['basename']. If you need to provide files from various folders, use path tokens in your request, which you then map to the actual path in your download function. – Opposition

Is this thing can work ? if ($ext == "php"){ die('Not Allowed'); exit;} – Hyperopia

The only issue with a PHP solution like this is you can't force a download and still print the rest of the page. – Reparable

Or create a table with Id, Token, Path relationship, get the token from URL, check the Path in the database and return that file. That would be safer. But obviously more complicated. – Byng

after download, i want to return to some other page. Then, what will be the mechanism then.? – Destruction

Answer 4

If you are Using HTML5 you can add the attribute 'download' to your links.

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

Rothmuller

this only works for same-origin URLs – Microbiology

Answer 5

No, it isn't. You will need something on the server to send a Content-Disposition header to set the file as an attachment instead of being inline. You could do this with plain Apache configuration though.

I've found an example of doing it using mod_rewrite, although I know there is a simpler way.

Vixen

Hey, you say: "although I know there is a simpler way"... which one? ^_^ – Pompano

If I could find the details, I'd post them. I can't find them right now and don't have the time to devote to an extensive search. – Vixen

It's fine thanks for your help. I just created a php page that generates the download... – Pompano

Answer 6

Try this...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

Pregnant

Answer 7

HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.

This attribute is only used if the href attribute is set.

The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

Example code:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

Output:

Download Image >>

Html5 download or chrome

Download Image >>

Sebastian

Hey, thanks for the answer. Some people already proposed this but I think it's still not fully supported. On the other hand, your download link is not working for me on Chrome latest – Pompano

Hey Pierre, try this <a href="w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a> thanks – Sebastian

I tried your comment, but it does not work – Grievance

This doesn't work for images of different origins – Microbiology

that's not really working – Judo

Answer 8

You can't do it with pure html/javascript. This is because you have a seperate connection to the webserver to retrieve a separate file (the image) and a normal webserver will serve the file with content headers set so that the browser reading the content type will decide that the type can be handled internally.

The way to force the browser not to handle the file internally is to change the headers (content-disposition prefereably, or content-type) so the browser will not try to handle the file internally. You can either do this by writing a script on the webserver that dynamically sets the headers (i.e. download.php) or by configuring the webserver to return different headers for the file you want to download. You can do this on a per-directory basis on the webserver, which would allow you to get away without writing any php or javascript - simply have all your download images in that one location.

Circumjacent

No. Lying about the content-type is not the only way to achieve this. See the content-disposition HTTP response header. – Vixen

Answer 9

Simple Code for image download with an image clicking using php

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>

Fezzan

Answer 10

Image download with using image clicking!

I did this simple code!:)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>

Fezzan