View Full Version : Automatic image upload

09-18-2005, 01:35 PM

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:

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>' +


In the HTML:

<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!