CODEWITHSUNDEEP
javascriptajaxcakephpprogress
pawelmysior
pawelmysior

Reputation: 3250

CakePHP, AJAX - showing progress of a method run in the background

I'm not sure how to go about this.

I have an administration panel for a small gallery script. You create galleries, and then upload images through FTP (to a specified folder, with 100 images for every gallery, its just easier with FTP).

On the list of galleries, next to each one, there is a "create thumbs" link, which goes to /admin/images/thumbnails/gallery_id. Everything is working well, the thumbnails are being created, the method redirects to the list page with setFlash info, that they were created.

But the thing is, creating those small images takes time, and if it's more than ten pictures - it can be annoying to just wait for the browser to reload.

I would like to add a progress bar of some sort. Or maybe just a count of the images that were already processed.

The method basically looks like this (there more in it, but not relevant):

function admin_thumbnails($gallery_id)
  {
  $files = $this->File->listDir('/example/www/directory');

  foreach ($files AS $file)
    {
    $this->Attachment->thumbnail('/example/www/directory/'.$file, '/thumbs/', '150', '100', 'resizeCropTop');
    }

  $this->redirect(array('controller' => 'galleries', 'action' => 'index'));
  }

I could run something in the foreach loop, but what? And how to show it to the user?

Any pointers would be fantastic.

Regards, Paul

Upvotes: 0

Views: 1667

Answers (2)

DarkThrone
DarkThrone

Reputation: 1964

A good option could be creating a temporary file before the foreach, then in every (succesful?) iteration apending a line. In js with a simple poll function count the number of lines/tokens/whatever and draw the progress bar. When the process is done, delete the temp file.

I would solve it that way.

Upvotes: 0

Mark Fruhling
Mark Fruhling

Reputation: 606

This isn't a straight forward thing to do. MVC frameworks need to render the entire view before they send the HTTP response. You have two options.

First, you can just use javascript to call this function via ajax and display a progress indicator (animated gif) to let the user know something is happening. It won't tell the user where in the process the server is, it will just let them know there is work being done. That is cheap and easy, tons of examples out there for that.

The second option is to kick off the thumbnail creation and then "poll" your server, via ajax, for it's progress. You would have to think about how your server could report back how it's progressing as it's creating the thumbnails. You should also be able to find examples of that by googling. Here is another SO question that is similar.

Upvotes: 1

Related Questions