Display files in directory using PHP and jQuery

Question

I am trying to use PHP and jQuery to display files in a directory.

I have incorporated Datatables to list all records in a database. Some of these records have files linked to them. The user would click a link which opens a modal window which should then display all the files in that record's directory.

Starting with the PHP

<?php
if(isset($_POST['editpartnercode']))
{
    $partnerCode = $_POST['editpartnercode'];

    $dir = "D:/CargoDocsPDFs/" . $partnerCode;

    $ffs = scandir($dir);

    foreach($ffs as $ff)
    {               
        if($ff != '.' && $ff != '..')
        {   
            echo $ff;
            // echo json_encode($out); // <-this didn't work either
        }
    }       
}
?>

Here is the jQuery that uses $.post to pass the editpartnercode variable:

$.post('process/displayFiles.php', {editpartnercode:editpartnercode}, function(data)
{
    console.log(data);
    var obj = JSON.parse(data);
    $('#allFiles').empty();
    var htmlToInsert = obj.map(function (item)
    {
        return '<li><b>' + item.ff + '</b></li>';
    }).join('');
    $('#allFiles').html(htmlToInsert);      
});

The HTML looks like this:

<div class="row">
    <div class="col-lg-12">
        <p>Uploaded Files</p>
        <ul id="allFiles">
        </ul>
    </div>
</div>

I can see the file names in the console, but I am also getting this error:

VM2087:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
at JSON.parse (<anonymous>)
at Object.success (genhome.js:210)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
at k (jquery.js:2)
at XMLHttpRequest.<anonymous> (jquery.js:2)

To reiterate, all I am trying to do is list the files associated with the editpartnercode (which is the directory name).

What am I missing that will get rid of that error and print the files on the screen?

Edit

Here is how the files are being printed in the console:

TEST1234567.TIFFTEST1234567_121218_100637.TIFFThumbs.db

Please post what the console.log(data); is showing in console. — Nawed Khan
– Nawed Khan, Commented Dec 13, 2018 at 21:09
so you are trying to parse a simple string into JSON, hence the error. The displayFiles.php have to return JSON string. — Nawed Khan
– Nawed Khan, Commented Dec 13, 2018 at 21:13

cssBlaster21895 · Accepted Answer · 2018-12-13 21:20:31Z

1

When trying to return json array from pure php script you could also set the header of the response

header('Content-type: application/json');
echo json_encode($ff);

But I would also populate the array first and return whole result in the end.

answered Dec 13, 2018 at 21:20

cssBlaster21895

3,70022 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Giacomo Scarpino · Accepted Answer · 2018-12-13 21:24:45Z

1

Try this

$partnerCode = $_POST['editpartnercode'];
$dir = "D:/CargoDocsPDFs/" . $partnerCode;
$ffs = array_diff(scandir($dir), array('..', '.'));
echo json_encode($ffs);

answered Dec 13, 2018 at 21:24

Giacomo Scarpino

6576 silver badges17 bronze badges

Comments

John Beasley · Accepted Answer · 2018-12-14 15:30:18Z

I was able to solve my problem by by altering the JQuery to look like this:

$.post('process/displayFiles.php', {editpartnercode:editpartnercode}, function(data)
{
    $('#allFiles').html(data);      
});

On the PHP side, I removed the json_encode and just echoed the list items:

foreach($ffs as $ff)
{               
  if($ff != '.' && $ff != '..')
  { 
    echo "<li><a href='".$path."' download target='_blank'>".$ff."<a></li>";
  }
}

Using the above, I am now able to see the files in a modal window as links. I will have a part 2 to this question.

Collectives™ on Stack Overflow

Display files in directory using PHP and jQuery

Edit

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit

3 Answers 3

Comments

Comments

Comments

Linked

Related