FancyUpload – AJAX Uploader with Progress Bar

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar.

It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

It is fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)

Features

• Select and upload multiple files
• Filter files by type in the select dialog
• Optional Events to add your own behaviour
• Show and filter useful file information before the upload starts
• Limit uploads by file count and/or file size
• Platform and server independent, just needs Flash 8+ (> 95% penetration)
• Unobtrusive, since the element is replaced after the swf loaded successfully
• Cancel running uploads, add files during upload
• Everything is optional, documented and easy editable

[ Demo ] [ Website ]

 

Animated GIF bug in Internet Explorer 7

Today I attempted to get a progress indicator to work in IE7. My idea was that I’d have an animated GIF on a page, hidden with style=”display: none;”. Then, in the onclick event I’d toggle it visible again using JavaScript, so that the progress indicator would animate as the page was submitted and the next page was loading.

Surprise, surprise, it didn’t work. IE simply refused to animate the GIF when the form was submitted. I googled and googled with no avail – until I ran into a simple and working solution. I won’t present the non-working ones here, they can be found with any relevant keywords.

The working one is the following in its entirety: Use a div to display the indicator as a background image. In addition to toggling display, also toggle visibilty.

In my HTML, I have two divs, one with an id of Indicator, and in it another one with id image and some text. The JavaScript goes as follows.

1. First, in the function called from the onload event of body I hide the outer div:

document.getElementById(‘Indicator’).style.display = ‘none’;

document.getElementById(‘Indicator’).style.visibility = ‘hidden’;

2. Then, in the function called from the onsubmit event of the button input in the form, I show the outer div and set the background image for the inner one:

document.getElementById(‘Indicator’).style.display = ‘block’;

document.getElementById(‘Indicator’).style.visibility = ‘visible’;

document.getElementById(‘image’).style.backgroundImage = ‘url(indicator.gif)’;

That’s it!

I have tested this in IE7, but it might also work in IE6.