How can i go about this?

[dele454]

[IMG]http://www.killerinstinct.co.za/gall.jpg[/IMG]

Hi,

I have a galleries page in the CMS am developing that looks like the above. This section of the page allows the admin to upload multiple pictures taken by a photographer. On clicking the 'edit' button on any thumbnail - whether a blank or already uploaded pic thumbnail, the custom pop-up window is seen. Which allows you to upload a thumbnail image with its corresponding large size.

On save from the pop-up window, images are uploaded and the thumbnail from which the edit button was clicked is replaced with the thumbnail of the uploaded image.

Am just wondering how i can go about coding this. I want to use AJAX + PHP since i dont want the whole page to reload on uploads. Do i need to use a javascript library like Dojo/JQuery to simplify things?

For the custom pop-up window - should that be a styled DIV with all input file element that gets since onclick of Edit button?

Am very new to AJAX - though i understand the concept. Please help is needed on how i can tackle this. Thanks

[langsor]

Hi,

I've just been working with a CMS for a client involving image-management, ajax, mysql, et.al ...

You need to know that you can not upload files using Ajax. The best work-around (that I know of) for this is uploading the file with a page inside an iframe and having the iframe document talk to its parent document (onload) with JavaScript.

So this way the upload page is inside an iframe in the main page. The user clicks the upload submit and the image uploads to the server-side script (optionally PHP on the same page ... ) and when the server-side script is done handling the upload it tells it's parent window what is necessary to make the changes in the main window.

Quick example of child iframe onload call to parent function ...
window.onload = function () {
parent.image_uploaded( image_path );
}

Hope this saves you some head-banging, let me know if you have any more questions.