6

i want to create a downloadscript which allows Force Download of JPGs. This is my php script:

<?php
    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Content-Description: File Transfer");
    header("Content-Type: image/jpg");
    header('Content-Disposition: attachment; filename="'.basename($GET['a']).'"');
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".filesize(($GET['a']));
    readfile(($GET['a']);
?>

This is a code segment of my js code:

function downloadFile(a){
    document.location = "download.php?a="+ a;
}

With this code sample nothing happens. If i append the result into a HTML-tag, it shows the content of the file.

Any ideas how to teach the browser to download this file?

EDIT: SCRIPT UPDATE

2
  • 1
    Add console.log(msg);.
    – jantimon
    Feb 8, 2013 at 14:06
  • Hello. It seems you have errors in your script.
    – Patlatus
    Nov 2, 2013 at 18:10

5 Answers 5

22

You can't download files with ajax. So, if you have something that should happen on ajax, you should return url in response and apply it like document.location = "url"to start download process.

One note here. As I remember, browser will block file download if it is initiated not by user click. So, this will work fine:

.click(function(){
   document.location = "download url"
})

But if it is started not by user click, it will be blocked. So, code like this:

.click(function(){
       $.ajax({...,
       success:function(download_url_from_server){
           document.location = download_url_from_server;
       }});           
    })

will be blocked by browser. So, if you want to pass some data with a post, you may submit a form into hidden iframe or to blank page using <form target="...":

 function checkToken(token){
    var $form = $("#downloadForm");
    if ($form.length == 0) {
        $form = $("<form>").attr({ "target": "_blank", "id": "downloadForm", "method": "POST", "action": "script.php" }).hide();
        $("body").append($form);
    }
    $form.find("input").remove();
    var args = { a: "checkToken", b: token }
    for (var field in args) {
        $form.append($("<input>").attr({"value":args[field], "name":field}));
    }
    $form.submit();
}

And in script.php you need to execute code from download.php immediately, if token is Ok, or do a redirect to download script:

header("Location: download.php?a=" . $filename)
16
  • Yeah, but i want to force download JPGs and not to show it in the browser. Is there no way to do it with PHP-headers?
    – Sylnois
    Feb 8, 2013 at 14:10
  • Content disposition: attachment should do that.
    – Viktor S.
    Feb 8, 2013 at 14:11
  • As you can see in the question bellow, that i added this already.
    – Sylnois
    Feb 8, 2013 at 14:12
  • 1
    Yeah. But are you still trying to do that with ajax?
    – Viktor S.
    Feb 8, 2013 at 14:15
  • 1
    I just checked it on my project, and content-disposition: attachment; works fine. But you must do document.location = "url to php file"
    – Viktor S.
    Feb 8, 2013 at 14:17
3

Setting the mime type to image/jpeg will most probably not work. So, you need application/octet-stream instead to force the download.

Replace the content type header in your php with the following:

header('Content-Type: application/octet-stream'); 

Also, One nice solution instead of using document.location is to inject an iframe. Use the following function in your success callback

function downloadFile(url)
    {
        var iframe;
        iframe = document.getElementById("download-container");
        if (iframe === null)
        {
            iframe = document.createElement('iframe');  
            iframe.id = "download-container";
            iframe.style.visibility = 'hidden';
            document.body.appendChild(iframe);
        }
        iframe.src = url;   
    }
4
  • 2
    This seems overly complicated. If you simply redirect the user to a page that downloads the file, so long as you have the appropriate headers set, it will download the file in the exact same way without navigating them away from the page. The two examples achieve the same result, but one with less complexity. Feb 8, 2013 at 14:19
  • But, wouldn't it change the url in the address bar? :)
    – dlock
    Feb 8, 2013 at 14:21
  • No, it will simply prompt them to save the file without navigating away. The URL should remain unchanged. Feb 8, 2013 at 14:35
  • I really like this solution, far more flexible when dealing with a special situation like no jQuery and doesn't depend on being inside a click callback exclusively. Thanks!
    – Aditya M P
    Apr 25, 2014 at 3:02
1

It seems you have errors in your script. First of all, correct speliing for GET variable is $_GET['a'], not $GET['a']. The second issue here is that you have extra opening parenthesis, when I copied your code, I received 500 Internal Server Error response. If we correct mistakes, it seems to work fine. Just try corrected version of your code.

<?php
    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Content-Description: File Transfer");
    header("Content-Type: image/jpg");
    header('Content-Disposition: attachment; filename="'.basename($_GET['a']).'"');
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".filesize($_GET['a']));
    readfile($_GET['a']);
?>
1
  • This was the missing piece of the puzzle for me, what the server should send down. Dec 11, 2014 at 21:31
0

You're getting it confused a bit. As FAngel pointed out, you can't download files via AJAX. What you need to do is redirect the user to another page that then has your above PHP code in it. That PHP code should then allow the user to download the file directly. What you're attempting is absolutely possible, you just need to approach it from another direction, ie not with AJAX.

0

You can force download file with Mouse middle event:

const url = "https://www.google.com.vn/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png";

const forceDownload = url => {
 try {
    const link = document.createElement('a');
    const fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
    const event = new MouseEvent( "click", { "button": 1, "which": 1 });

    link.href = url;
    link.download = fileName;
    link.dispatchEvent(event);
  } catch(e) {
     document.location = url;
  }
}

forceDownload(url);
1
  • Actually it works in WebKit browsers but not in Firefox Aug 21, 2020 at 22:57

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.