Show file names as the files has been processed

Question

I want to list each file that have been processed, in a DIV. Example: when file #1 has been processed, show the file name in the DIV. When file #2 has been processed, do the same thing but append it under file #1, and so on with each file.

jQuery

var request = $.ajax({
    url: 'manage-images.php',
    type: 'GET',
    cache: false,
    beforeSend: function() {
        $('#photos').html('<div class="centered color-blue">Processing. Please wait...</div>');
    }
});

request.done(function(s) {
    $('#photos').append(s);
});

request.fail(function(s) {
    $('#photos').html('Something went wrong!');
});

manage-images.php

$dir = new RecursiveDirectoryIterator('folder-name/here', FilesystemIterator::SKIP_DOTS);
$it  = new RecursiveIteratorIterator($dir, RecursiveIteratorIterator::SELF_FIRST);
$it->setMaxDepth(1);

foreach($it AS $fileinfo) {
    if($fileinfo->isFile()) {
        // functions and stuff...

        echo $fileinfo->getFilename().' - done<br>';
    }
}

score 0 · Accepted Answer · edited May 23 '17 at 12:27

The problem is that you are processing all photos on the server side at one time. I think you will need to reconsider your architecture, and process one photo at a time. When you get the response from your first processed photo, append the file name, and make another call to process the next photo.

Here is a good example: How to get multiple responses from PHP file via AJAX?

Edit: Your new question "How can the website know what file is next". My PHP is not great, but I hope this gets the idea across. Just have your server side page process one photo at a time.

$dir = new RecursiveDirectoryIterator('folder-name/here', FilesystemIterator::SKIP_DOTS);
$it  = new RecursiveIteratorIterator($dir, RecursiveIteratorIterator::SELF_FIRST);
$it->setMaxDepth(1);

//If there is a photo to be processed
if ( count($it) > 0)
{
  $fileinfo = $it[0];
  if($fileinfo->isFile()) 
  {
        // functions and stuff...    
        echo $fileinfo->getFilename().' - done<br>';
  }
}
else
{
     echo "NO_PHOTOS";
}

Then on client side, in jQuery, you would check the response to be "NO_PHOTOS". This is how you would know to stop processing from jQuery.

Thank you for your answer! It did the trick but I don't know how I can process only one file at the time in `manage-images.php`. How can the website know what file is next? — Airikr, May 23 '14 at 16:35
Your example didn't work but I know now how I'll continue with this :) Many thanks! — Airikr, May 23 '14 at 17:01

Show file names as the files has been processed

1 Answers1