Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts

    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.

  • #2
    New Coder
    Join Date
    Aug 2008
    Posts
    61
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ajax?

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    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:
    Code:
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    RedHouse (07-27-2009)

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •