Displaying an "uploading..." image when uploading an image...

[jpmoriarty]

I've got my form that uploads an image no problems, but my users aren't entirely computer savvy and aren't happy that it just displays a blank page until the image has gone up (and some are uploading 2 or 3 meg photos over a 128k line, so it can take a while).

What I want is to be able to display a page that says "please wait, uploading" etc and outputs my animated gif image that makes the user think something is happening. it doesnt have to be a progress bar or any thing that complicated, just something that moves! Oh, and if the page that display's the form for them to enter the data into could "invisibly" pre-load the animated gif too, that would make it appear quicker and not need to download a quite big gif whilst simultaneously uploading a big jpg - that would be excellent too.

I dont mind if it's in the browser window or if it opens up a new window and then closes itself (if possible) when it's uploaded.

I've had a look at a previous thread (http://www.phpbuilder.com/board/showthread.php?s=&threadid=10210057&highlight=upload+display+image+whilst) but really couldn't make head or tail of it, and wasn't too sure that it was correct anyway.

Any advice would be very gratefully received - many thanks in advance.

[gil davis]

There is a "preload page" script on the javascript source (http://javascript.internet.com/page-details/preload-page.html ) that you could adapt for your purposes. You can put your animated gif in place of the words "Page loading ... please wait". All you have to do is make the div visible when you want to show the animation, and hidden when the download has finished. I assume you already have a way of telling when it is done.

[jpmoriarty]

thanks for the preload tip.

the problem is with the uploading - the script for the next page is only run once the file has been transferred, so i cant hide or unhide any div bits until after the slow upload has occurred - and obviously by then there wont be a need for a "please wait, uploading" bit anyway.

[gil davis]

If you could detail what the user sees maybe I would understand what you are trying to do.

There aren't any events on the client side to indicate that the upload has finished. I would assume that the server knows.

When does the page specified by the action attribute appear? Is it immediately, or is it at the end of the upload?

I presume that there is some action that starts the long load. Whatever page is displayed while the load occurs is where you want to put the "preload page" script.

When I upload files to my ISP, the following occurs:
1) I click the "upload" button.
2) I wait a long time
3) an information page appears (in the same window) saying the file upload was successful.

The form tag has an action attribute that calls a page called "pp_uploader" which is the inform page. So I see the "browse" page until the "pp_uploader" appears. If this is what happens in your scenario, then I would think you could show the gif when they click the submit button, and it would automatically go away when the confirm page appears.

[jpmoriarty]

Whatever page is displayed while the load occurs is where you want to put the "preload page" script.
yes that's just the problem - no page is displayed until the upload has completed. my form has an action which is a PHP page that resizes the image, copies it etc. But that page only runs when the file has been transmitted - it's in the interim that I want this image to be displayed.

I'm thinking along the lines of an onClick action that brings up a new window with the animated gif in it. then an onLoad action that closes that window when the new file ahs been uploaded.

Also, if there's a way (using java or whatever) that I can tell the size of the file that I've selected for upload before it starts to transmit, that would be handy too.

[gil davis]

Javascript does not have any file handling capabilities. You could load the image using new Image() but that would only give you height and width, not filesize. There are probably IE proprietary things available, but I don't recommend using them.

Maybe you are working the wrong end. The server is probably the only place where you can really control things. I would think that the server would be able to send something to the client when the upload starts. But then I am not a server guy.

[gil davis]

I thought of another idea.

When the user clicks the submit or upload button, you open a new window with the gif in it. Make sure you use the name option in the window.open() function. When the new page loads in the original window, you use window.open() to get a handle for the "wait" window and then close the "wait" window.

Page 1:

<script>
var preload = new Image();
preload.src = "theAnimated.gif"; // puts picture in cache

function openWait() {
window.open("theAnimated.gif", "wait", "whatever");
}
</script>
...
<form ... >
<input type="file">
<input type="submit" onclick="openWait()">
</form>
Page 2:

<script>
var wait = window.open("", "wait"); // no URL necessary
wait.close();
</script>

You could get as fancy as you like with the wait page. You could write an html page, or just load the gif. You can specify the window size in the open command features. You could make the window the same size as the user's screen, or just center a small window.

[jpmoriarty]

that's exaclty what i was after gil, thanks.

Can i just ask though, being new to java and all - what's the "whatever" for? What goes in there?

[gil davis]

The third parameter for the window.open() function is the featureset for the window. Here is a link to see what goes there:

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/open_0.asp

They include the x, y position of the window (top=, left=), the size (height=, width=) and other options.