Downloading files using jQuery, JSON, and PHP

Question

This is a continuation from a previous question, found here:

Display files in directory using PHP and jQuery

I am now able to display the files in a modal window as hyperlinks. What I need to do now is, instead of downloading the files, I need to display the file in a new tab.

Here is how displayFiles.php looks:

if(isset($_POST['editpartnercode']))
{
  $partnerCode = $_POST['editpartnercode'];
  $bookingNum = $_POST['editbooking'];

  $dir = "D:/CargoDocsPDFs/". $partnerCode . "/" . $bookingNum;   
  $ffs = scandir($dir);

  $files = array();       
  foreach($ffs as $ff)
  {               
    if($ff != '.' && $ff != '..')
    {   
      array_push($files, $ff);
    }
  }
  echo json_encode($files);
}

Using all of the above, I can grab the files from the selected directory and send back over to the JavaScript side, which looks like this:

$('#resultsTable').on('click', 'tr > td > a.uploadDocs', function(e)
{
  var editpartnercode = $(this).attr('data-editpartnercode');   
  var editbooking = $(this).attr('data-editbooking');   
  var directpath = "D:/CargoDocsPDFs/"+editpartnercode+"/"+editbooking+"/";

  $.post('process/displayFiles.php', {editpartnercode:editpartnercode,editbooking:editbooking}, function(data)
  {
    var obj = JSON.parse(data);
    $('#allFiles').empty();
    var htmlToInsert = obj.map(function (item)
    {
        return "<li><b><a href='"+directpath+""+item+"' target='_blank'>" + item + "</a></b></li>";
    });
    $('#allFiles').html(htmlToInsert);      
  });
});

Using all of the above, I can return the files to the page in a modal window.

But when I click on the link to open the file, I get the following error message:

Not allowed to load local resource: file:///D:/filelocation/editpartnercode/bookingnum/bookingnum.jpg

How do I fix this error?

To fix this you need to use relative URLs on your webserver, ie. don't use file:// paths as they are heavily restricted by the browser's security for obvious reasons — Rory McCrossan
– Rory McCrossan, Commented Dec 19, 2018 at 15:02
The files are on another server, let's call it serv1 on the D: drive in a folder called cargodocs. How would that relative URL look? — John Beasley
– John Beasley, Commented Dec 19, 2018 at 15:43
In that case you need to move those files to somewhere that's publically accessible. Whether that involves physically moving the files or simply creating a virtual directory would depend on your server infrastructure. — Rory McCrossan
– Rory McCrossan, Commented Dec 19, 2018 at 15:49

KOUSIK MANDAL · Accepted Answer · 2018-12-19 15:19:33Z

As for example, think you are trying to get a file from dropbox, so you have to click a link of dropbox. Now consider dropbox is running in a windows server and the file you are trying to get is located at D:/files/abc.txt of dropbox server.

Now will you get that file if you put D:/files/abc.txt on your browser? No, right? Because it will search file system from your computer not dropbox server.

So actually you are using the absolute path your computer. But the thing is that to get a file on your browser you should have one server.

I think you are developing something using local server which is running in localhost/something/somethingelse. First of all you have to conceptualize that the server is not running in your computer rather it is running somewhere else.

In dropbox, to get content of a file you have to put url something like; dropbox.com/download/abc.txt (It is for example only). Similarly you have to put some kind of link in href which is related with your localhost server. Like localhost/download.php/abc.txt. Now in download.php page you can write some code to provide you content of the file abc.txt.

The files are on another server called serv1. On the D: drive, there is a folder called cargodocs. Then in cargodocs, there are several directories that are named after a bookingnum. In each bookingnum directory are the files that I am trying to pull.

Hokascha · Accepted Answer · 2018-12-19 15:05:37Z

0

As the error message says, it's not allowed to load local resources from a website. You could use your server side as a proxy. Build the links so they point to a server script that simply echos the requested file. As long as the browser can handle the file type (images, videos,...) it will display the file.

answered Dec 19, 2018 at 15:05

Hokascha

2,3792 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

Downloading files using jQuery, JSON, and PHP

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related