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 1 of 1
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Automatic image upload

    Hi.

    I am trying to write a bit a javascript that will allow me to create an "automatic" file upload, as follows (from the user's point of view):

    Example of uploading an image:

    On a webpage there is an image displayed and a file upload widget.

    The user selects an alternative image to be displayed, using the "browse" button on the file upload element. when the user clicks "open" in the browser, I want to be able to automatically commence upload of the selected file, and change the image on the web page.

    The method I have chosen is to have a pop-up window associated with the onchange method of the file upload widget. The code is as follows:

    In the javascript:
    Code:
    function AutoUpload(id)
    {
      newwin = window.open("");
    
      path = document.getElementById(id).value;
    
      newwin.document.write('<html>' +
    			'<head><title>"Image Upload"</title></head>' +
    			'<body>' +
    			'<form name="fe" enctype="multipart/form-data" method="post" action="my-upload-processor.php">' +
    			'<input type="file" name="' + id + '" value="' + path + '">' +
    			'<input type="submit">' +
    			'</form>' +
    			'</body>' +
    			'</html>');
    
      newwin.document.fe.submit();
    }
    In the HTML:
    Code:
    <input type="file" id="my-file-uploader" onchange="AutoUpload('my-file-uploader');">
    This is all well and good, however:

    (1) path = document.getElementById(id).value;. This does not seem to be picking up the user's file selection from the file upload widget in the HTML (instead it is assigning an empty string to path).

    (2) As soon as the form is auto-submitted, the pop-up window is cleared and remains blank until the client/server have completed the upload process. I would like to display something along the lines of "Your file is being uploaded ... please wait", together with a "cancel" button for when the user gets bored of waiting! How do you do this??

    (3) I would like my-upload-processor.php to automatically trigger the parent document (ie. the page that launched the pop-up in the first place) to be refreshed when upload is complete. How do I get at the parent window from the pop-up window in this case? (ie. the contents of the pop-up window will have been replaced by this time).

    Any help will be gratefully received! Perhaps I'm being a bit far-fetched with what I'm trying to do here; and may be my temporary measure of having an old-fashioned "submit" button to upload the image will become permanent!

    TIA,
    Mike.
    Last edited by mlse; 09-18-2005 at 01:54 PM.
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!


 

Posting Permissions

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