1

I'm using image picker plugin to select an image then force it to download. I tried hard coding the PHP and it works as expected. Download pops-up and I managed to view the file. I'm not sure why it didnt work in AJAX. What am I missing?

    //get the image-source or URL
    function getImageSrc()
    {
        var req = $("div[class='thumbnail selected']").children('img');
            var imagessource = []; 
                $(req).each(function (datakey, datavalue) {
                                src =  $(datavalue).attr('src'); 
                                        imagessource.push(src);
                                              }); 
                      return(imagessource);
    }

Here's when I click the button

 $("#download_media").click(function() {
                    var file = getImageSrc();    

                    $.ajax({
                        type: 'POST',
                        url: '?page=downloadController&action=downloadMedia',
                        data: {'file_url': file},
                        success: function(data) {
                            console.log("success");
                        }   
                    }); 
                });

My PHP FILE

 public function downloadMediaAction()
 {   
    //get the file_url
    $file = $this->getRequest()->('file_url');

    header("Content-Description: File Transfer"); 
    header("Content-Type: application/octet-stream"); 
    header('Content-Disposition: attachment; filename="'.basename($file).'"');
    readfile($file);
}
asdasdas
  • 291
  • 1
  • 4
  • 13
  • 2
    You want the browser to display the download window etc? Then just redirect to that link. AJAX is not meant for that. – Sami Kuhmonen Apr 22 '15 at 06:47
  • when I try, window.location('ur'), it just display the page. it did not download. – asdasdas Apr 22 '15 at 06:50
  • Did you try searching before you posted this question? I came across plenty of answers addressing **your exact question** after spending only 15 seconds in [Google](https://www.google.com.au/search?site=&source=hp&q=ajax+force+file+download&oq=ajax+force+file+download&gs_l=hp.3..0j0i22i30l2.142.4160.0.4325.27.17.1.0.0.1.623.2589.2-2j3j1j1.7.0.msedr...0...1c.1.64.hp..20.7.2201.0.WdAWKKEFaK0): http://stackoverflow.com/questions/3502267/download-a-file-using-ajax – Christian Apr 22 '15 at 06:53
  • `content-disposition: attachment` should be all you need to tell the browser to ask the user what to do with it. – Sami Kuhmonen Apr 22 '15 at 06:53

1 Answers1

0

Ok, then from your AJAX request, return the URL of the document to download like :

{'url':'http://server:port/path/to/file.php?id=x'}

and then using javascript

document.location='http://server:port/path/to/file.php?id=x';

in file.php call your method : public function downloadMediaAction()

and to make sure the browser will download it add this line to the downloadMediaAction() :

header("Content-Type: application/force-download");

Ahmad Hajjar
  • 1,796
  • 3
  • 18
  • 33