Uploading Image Files (Revisited)

[snoodle]

I have read and tried so many different approaches to solving this problem but am still unable to get it working...

First let me describe the html page and what I'm trying to accomplish...
I have a table/list, populated by a database. Each record (row) has an associated picture that gets displayed when you click on a row in the list. That all works great (the picts are stored in a folder on the server and records in the db table are linked to the filenames). There are also a bunch of other controls on the page (sort by, filters, etc), so the rendering of the table is done the ajax way so all of the controls retain their values when the list is reset.

On this page you are also able to edit and add new records (also using ajax techniques) and that all works great.

The problem is the notorious File Upload gizmo. I would like to be able to select the desired entry in the list, hit the file upload button, and have their picture appear without the page being reset.

If I do it the "normal" way (form/submit) and keep the php code to upload the file on the same page, the page, of course, gets a postback and I have to deal with somehow resetting all the controls back to their origial values (ugly).

I did manage to do the upload via AJAX, but then had the problem of refreshing the screen with the new photo.

I know this topic has been beat to death (I've googled dozens of articles on the subject) but was wondering if anyone had any suggestions on how to approach the problem. There was one I found (Asynch image file upload without AJAX - http://www.air4web.com/files/upload/), but I (a) couldn't get the code to work, and (b) I believe you can see in their sample that the page is getting a postback and resetting controls.

Any help would be most appreciated. You guys have been great!

[snoodle]

ok... i'm back to the ajax upload. it all works fine... almost... you click on an entry in the list... hit the upload... select a photo file... and although the photo doesn't appear in the page, you can click on another entry in the list, then click back on the last entry and the new photo appears. it seems like it should be such a simple thing to simply update that one img element after the upload and photo processing is complete. there must be a way!

[Ahri]

Could you have the Ajax polling a php script that returns an image address? Script.php?uid=123 could return "images/no_image.gif" until such time as the upload has been completed by a separate Ajax 'thread', at which point it would return "images/123.jpg". This could be achieved with logic in the Script.php file (checking whether the relevant file exists yet).

Perhaps my suggestion is too simplistic though.

A better suggestion might be to investigate event models in js frameworks like mootools, jquery, etc. I think your post belongs more in the Javascript forum than PHP to be honest; you might get much better suggestions.

[snoodle]

Yes, your polling idea was on the right track and it turned out to be done in the javascript. It was a little more complicated because the file could already have existed. What I do is upload the file to an "uploads" directory, then resize and do a little massaging, then create a copy in another folder with a name that links it back to a database table record.

It took a bunch of trial and error but I finally got it working. Thanks for your comments. Next up on my todo list... the login system. yipes!