How does ebay's image upload system work?

Iv'e been thinking about it but can't find any resources on the internet.

I was wondering how the original page you are on gets updated with a thumbnail picture of what you uploaded because I need to reproduce something similar?

When you upload a picture on ebay you click upload then a new browser window opens. you then select your image on this form contained in the new window and select upload. when you upload the browser window closes and a thumbnail of your picture appears on your original page without reloading the page.

I'm guessing it uses JavaScript to dynamically create a new div with the new image in it but how does it pass information about the uploaded picture from one browser window to another? I'm not worried about how to manipulate the image server side, but am interested in how it passes the data around to update the client page without reloading it.

Ajax?

Yer ajax could be involved somewhere. Can you pass a variable from one browser window to another using the window.something with javascript? I'm not great with JavaScript.

the exact details are a bit complicated, and require tight co-operation between server and client, but here is a rough sketch for you.

from the popup, the main window is called opener, and from the main page, the popup is given a variable.
the variable's value is set to the popup's window object by using the window.open command which creates the popup and returns the child window object.

an onsubmit event in the popup's upload form can say something like:
opener.monitorDL(this.action);

where monitorDL is a function which can re-ajax every 3 seconds until the server returns the HTML to show the image.

you might need to pass additional urls ids, etc to steer the requests.

like i said, it's quite complicated for something seemingly so simple, and lots of commercial solutions are out there.

Let me know if you need more info about any particular step.

Most image uploaders are either Java Applets or Flash based since they offer the most options.

I have not see the ebay one so I can not tell you what they use. I would say look at the source with webdeveloper toolbar or firebug and see what is happening.

Eric

@rnd me
Thanks that's most helpful. I've managed to get something working using that method, it is indeed a lot more complicated than I first thought it would be and have spent many hours on this.

@A1ien51
Will look into using a Java Applets or flash in the future thanks.