We’re building a CMS at work and one of the requirements is a half decent file manager. Having seen how easy the wordpress upload tool is, we wanted to replicate it. Clients don’t want to sit there having to individually select and upload 50 files from a folder!

There are a number of options available to do this:

1. Using a flash (swf) file to perform the upload
2. Using a java applet to perform the upload
3. Using an HTML file input box to create a hidden array of file input boxes

My issue with #3 is that you still have to individually select all the files in a folder before clicking upload. If you want to upload 50 files, thats 100 clicks and a case of RSI. So, I ignored #3 entirely.

Ideally,  I wanted solution #1, but I found a lot of answers to solution #3,  followed by #2. In the end I tried out four different solutions, all open source.

SWFUpload

By far my favourite, and the one we ended up using, this is the same tool wordpress use for their image upload plug

in. It is the most difficult to configure, but its got the most flexibility. SWFUpload uses a .swf file for the actual file uploads, which get posted to a script you specify in the setup. There are then a load of javascript callbacks that allow you to track the progress of files and update your page with the results. All in all, very impressed.

Check it out and download it here: http://www.swfupload.org

There are also demos at: http://demo.swfupload.org

UPDATE: I stumbled across a blog post with a tutorial for creating your own flash file, incase you don’t

want to use SWFUpload. It looks pretty simple, so check it out: Multiple File Upload Using Flash

jUpload

jUpload was the first tool I tried, but couldn’t get the Firefox Java plugin working on my desktop (ubuntu) and so gave up. I’m sure the tool would have done the job, but I’d have needed to compile it and more importantly, it looks ugly.

Check it out at: http://jupload.sourceforge.net

jQuery-transmit

Had this worked for me, I think it could have been pretty good. It works on the same principal as SWFUpload, but with seemingly less features. The fact that it used jQuery made me want to use it.

Check it out at: http://code.google.com/p/jquery-transmit/

jQuery multiple file upload plugin

This uses option #3 from the list above, and I couldn’t get it to work. It may have been something silly I was doing but, because it uses method #3, I didn’t spend too long trying to fix it.

If you’re still interested in trying it, check out: http://www.fyneworks.com/jquery/multiple-file-upload/

In conclusion, if you have the knowledge and patience to set up SWFUpload, it really pays off. Once the file manager is done I’ll put up a demo, I’m unashamedly impressed. For now I’ve got a screenshot. Ignore how ugly it is (and the garish colours), I haven’t given it to the designers yet!

SWFUpload concept demo