javascript image uploading and text replacement

Question

Weird to describe but here goes.

I have a table with several rows. One of the fields in each row, is for an image. Now i dont want to show the image itself, but rather the filename of the image as a link.

When i click that link, i want to popup a window that will let me upload or choose a new image from a list.

The key is, when im done, i want the new filename to show up on the table a-la inline edit style.

Now i know how to display the filename as a link, i know how to popup a window, i know how to upload images, or display some to select from. What i dont know how to do, is once i select or upload an image, to then go back and change that text.

Say the fieldname containing the filename text is #picfield1.(will be unique per field)
What would be the best way of building this. Should i use a layer on page like a modal, or should i use a seperate window?

Answer 1

When the popup is opened, you need to pass to it the row, or id, of the link that was clicked. Once the popup is done and prior to calling its window.close() function (if it's a real popup), have it do something like this:

window.opener.updateImageLink(row, fileName); //will call a function on the parent window

Where row is what was passed to this popup initially and filename is the effective filename with which to update the link.

This will call the following function:

function updateImageLink(row, fileName)
{
  document.getElementById("#picfield" + row).innerHTML = escape(fileName);
}

This assumes that the fields are enumerated as #picField1, #picField2, etc. You may need to add one to row when making this call.

This needs to be tweaked, of course, based on your specific needs.