I’ve being working with the application where users can post their property listings and then upload unlimited number of photos for their property. As the web site has being around for quite a few years, previous solution was straight forward – form with multiple file input fields. As digital cameras started producing images with more and more megapixels, and larger images as a result, this method was getting worse and worse. When user uploads multiple photos, they have no way to tell what the progress is, so people sometimes were re-submitting more and more of the same images. We added pop-up with fake progress bar (animated image saying that upload in progress), but started looking for a better solution.

First find was Java applet which allows user to select multiple files from their hard drive and then uploads those files with FTP. After upload is completed, user is redirected to the web page which does the processing of uploaded files. This solution appeared to be quite good and worked fine for a couple of years. Well, when user opens page, they are warned that there is Java applet which may be a security/privacy issue, so they have to confirm that applet is Ok. There were also reports that it was not working on Macs, which may be issue of their browser/java configuration, but you probably still want users to be able to use your page with no extra tweaking on their computers.

Finally, the age of AJAX is here, and most “big” web sites are using some fancy uploaders for the files (think Gmail attachments, etc), which makes us wonder if we should join the crowd. My quick research brought Dojo fileUploader widget to the spotlight. I worked with Dojo framework before, so it sounded like a good idea. The idea is simple – there is Flash component which does files selection and upload, and JavaScript methods which are called on events like File Selected, Upload Progress, Upload Complete, so you can report progress back to user, execute action when upload is complete, etc.

It appeared quite easy to setup uploader, I started with stable release of Dojo 1.2 and in a bit of time had working solution.

Unfortunately then the problem started. First of all, this solution seems to be quite fragile – as it was tested on different browsers it started getting broken one way or another. We tried to upgrade Dojo libraries to 1.3 beta 2 and then 3 releases, which appeared to work better, but still was very sensitive. For example, for computers with older versions of Flash it was causing issues throwing JavaScript errors, overfilling stack and memory. Another problem seems to be with the upload itself – when uploading many files at once, it appeared to use a lot of resources on the users computer and some users were reporting crashed browsers. I tried to play with versions 1.2 and 1.3 (detecting flash version, for example, and providing Flash 9 users with version 1.2 of Dojo, and Flash 10 users with 1.3), but it still was quite unreliable.

After spending lot of time with troubleshooting, I looked at alternative solution from Yahoo User Interface Library, version 2.7.0. Their Uploader widget uses the same idea behind the scenes, but, after installation and minor troubleshooting (won’t start working immediately, was doing nothing first – same when I ran example from their official web site) it appeared to be quite stable, working in all browsers we tried (XP, Vista, Mac OS, Firefox, IE 6 and 7, Flash 9 and 10). And most of all – they have variable to limit number of simultaneous uploads, which allows you to limit resources usage. User interface is nicer out of the box (sure you can do same thing with Dojo, but not when you are lazy and want quick solution…)

So, for the time being, if someone asks me how to implement multiple file uploads with progress bars – my answer would be YUI uploader.