Carl Tyler's Blog :: Showing an animated GIF after submit has been hit in IE

Category None

I recently had a situation where I was building a database where people will be possibly uploading large images or files. So thinking it would be nice to show some little animated icon that this was happening, I built a form that contained some of the Yahoo YUI tools code for displaying a popup message and placed in that message an animated gif. This worked great in Firefox, and whilst the file was uploading the gif would remain animated. Sadly with IE, as soon as you hit the submit button the gif was stop being animated, so it would actually look like the upload was no longer happening.

Anyway, after searching the web I found a solution, which is basically to start a timer after the users presses submit, and then reload the image into itself. This did the trick and now the file upload has a nice Yahoo dialog showing that it is uploading. Not as good as a progress bar with a real status, but the next best thing.

Here's the database:
UploadDemo.zip

And here's a live demo.
http://www.epilio.com/uploaddemo.nsf/uploaddemo?openform

Comments

1 - Hi,

YUI has just (yesterday) released a cool Uploader widget that has a javascript frontend and a flash backend, and can therefore give you real status on uploads. After reading the last sentence in your post, I thought it might be something you would be interested in.

As listed on the main YUI page for Uploader, here are the key features:
{ Link }

YUI Uploader provides file upload functionality that goes beyond the basic browser-based methods. Specifically, the YUI Uploader allows for:

1. Multiple file selection in a single "Open File" dialog.
2. File extension filters to facilitate the user's selection.
3. Progress tracking for file uploads.
4. A range of file metadata: filename, size, date created, date modified, and author.
5. A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc.
6. Inclusion of additional data in the file upload POST request.
7. Faster file upload on broadband connections due to the modified SEND buffer size.
8. Same-page server response upon completion of the file upload.

Thanks,
Nate
YUI Team, Yahoo!

Posted by Nate Koechley At 05:32:00 PM On 02/21/2008 | - Website - |

2 - Carl,

It doesn't work in Apple Safari FYI.

Posted by Bruce Elgort At 08:18:40 AM On 02/22/2008 | - Website - |

3 - @2 Thanks Bruce, I will have to download Safari for windows. Does the file upload or does the animation not work?

Posted by Carl Tyler At 08:26:44 AM On 02/22/2008 | - Website - |

4 - @2 I downloaded Safari and see what you mean, the animated icon just shows as a ? mark. I've now tried a few things to fix it with no luck, I will have to see if anyone else has ever documented this issue with Safari. It also stops the Blink html tag form blinking.

Posted by Carl Tyler At 09:07:27 AM On 02/22/2008 | - Website - |