7

The basic problem is this: I have a link to an image file. The desired behavior when I click on the link is to get the download dialog which would allow me to launch an associated image editor. This doesn't happen because the image file is rendered by the browser.

Is there any html magic which I can use to force the browser to offer a download dialog when the user clicks on a link?

Any help or pointers would be much appreciated.

4 Answers 4

3

Two approachs:

  1. Using Data URIs in the href of an anchor tag:

    <a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOnAAADpwBB5RT3QAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMi8yNS8xMapAVMwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABjklEQVQ4jZWTwWoTURSGv5lMp1OmxUIUXISCCbW06daNtGuh7uMbCHaeoOBSzBMEN92LXXThohVtoAshOyuKJQkaXWRjKi7aBjPT9v6uEsbpTGp/OHDPvf/5zjmLa0niCo0zWMODA2BZVqZTEkG1RdwhoLaxMKqTBJKWJO1JOpN0Iek8EQqeNxVXLP8jqS7pniXpe+1V9+yw058ft19yoqHKJb+9XikcOcDcYadvj4Mki+P68q1/F5hz4s1qGwsABNUWszMOD+7nWS75THk5wshw0DzhbeM3x/3zJG/CiWdBtTU6r63kuZ2f5NnmD8LI4Lk2TyoFHq7mefnm56XJMldaLE5T2+oSRgaAQWR4sdWlXJpO9WeCbvi5EWSoQWSYmkwvyQRdGOG5/z57rn0JfiWo8emY4FFhBPNcm/VKgQ/Nk1S/k3oLvN4/Ym31Jk8f38FzbQah4fPXU3be/8oEGSCXfBhEhu16j+16L6tXXKENfFwq+u3/caepXPLbwDsk3ZK0G/tr14lTSTuSin8BUMr8td343bwAAAAASUVORK5CYII=">Download</a>

  2. In some specific browsers, like Google Chrome and Firefox, you can do:

    <a download="image.jpg" href="http://www.domain.com/image.jpg">Download</a>

0

Not possible with just HTML however you can force the file to be downloaded via modifying headers with a server side language such as PHP.


// grab the requested file's name
$file_name = $_GET['file'];

// make sure it's a file before doing anything!
if(is_file($file_name))
{

    /*
        Do any processing you'd like here:
        1.  Increment a counter
        2.  Do something with the DB
        3.  Check user permissions
        4.  Anything you want!
    */

    // required for IE
    if(ini_get('zlib.output_compression')) { ini_set('zlib.output_compression', 'Off'); }

    // get the file mime type using the file extension
    switch(strtolower(substr(strrchr($file_name,'.'),1)))
    {
        case 'pdf': $mime = 'application/pdf'; break;
        case 'zip': $mime = 'application/zip'; break;
        case 'jpeg':
        case 'jpg': $mime = 'image/jpg'; break;
        default: $mime = 'application/force-download';
    }
    header('Pragma: public');   // required
    header('Expires: 0');       // no cache
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Last-Modified: '.gmdate ('D, d M Y H:i:s', filemtime ($file_name)).' GMT');
    header('Cache-Control: private',false);
    header('Content-Type: '.$mime);
    header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: '.filesize($file_name));    // provide file size
    header('Connection: close');
    readfile($file_name);       // push it out
    exit();

}
4
  • But does that mean that simply by navigating to this page that the user will be forced to download the image? Jul 2, 2010 at 15:05
  • No what you would have to do is change your image link to point to this php file sending via $_GET['file'] where the image is. and then yes the file will be forced to download
    – Scott
    Jul 2, 2010 at 15:09
  • It's mediawiki, so I'm not sure I can easily manipulate the http headers from the context of a mediawiki-extension Jul 2, 2010 at 15:12
  • No what you would do is save this code as a php file and place it in your images folder. then to force an image to download you link to the file like: example.com/images/downloadimage.php?file_name=myimage.jpg instead of example.com/images/myimage.jpg No need to modify code mediawiki
    – Scott
    Jul 2, 2010 at 15:27
0

if you want to show up download dialog, you need to put special headers to your image

in PHP it will be:

header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=image.jpg');
header('Content-Transfer-Encoding: binary');
-1

Another solution would be to add this to an htaccess file in the folder with your images:

AddType application/octet-stream .jpg

2
  • Wouldn't that force all jpg files to be treated as raw binary?, I'd like to be able to render the images in the browser as well... Jul 2, 2010 at 15:14
  • yes it would force all images to be downloaded. With this solution you would put the images you want to be forced downloading into a seperate folder and apply this code to that folder only. If you cannot do this for what ever reason then a PHP or similar solution is the only way.
    – Scott
    Jul 2, 2010 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.