Homepage » Web Development » Uploading files with progress bar without server-side callbacks

Uploading files with progress bar without server-side callbacks

By Jonathan + March 21st, 2007

I’ve been looking for an easy way to add uploading to WhyYouShould for a while now. My main problem is that I built the site completely in ASP.NET, and without buying some expensive Control (or spending months writing it myself ;)), it’s hard to do uploading with a progress bar. Also, it seemed next to impossible to get away from the ugly “Browse…” button.

I came across SWFUpload on Ajaxian today. The author has solved this problem (for all frameworks, not just ASP.NET) by combining the easy-of-use of Flash 8 for image uploading, with some tie-ins to Javascript. When you click your “browse” button (which can be skinned however you like), Javascript launches the file browser built into a hidden Flash file to select a file (or multiple files at once). Then, when you are ready, the hidden Flash file starts the upload and displays the upload progress. The file upload itself is done via a POST, so it will work for any web framework.

Pretty slick, eh! I know Jay is going to say, “Yah, Flash is awesome for file uploading. Didn’t you know that?” ;)

SWFUpload

SWFUpload

1 Comment at "Uploading files with progress bar without server-side callbacks"

Mike Sukmanowsky April 1st, 2007 (#)

Hmm…ever thought about just doing some kind of div that pops up with an animated gif saying “uploading”. Granted it doesn’t display the progress, but at least it is providing some kind of feedback to the user.

Something like this image ought to do the trick:
http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif

Lemme know what you think!

Comment Now!

Name* Email* Blog / Website

Latest Posts

When NOT to start an online store November 21st, 2008

When NOT to start an online store

Today I was asked by a client how to start an e-commerce store on their website. I’ve shown them the Wordpress e-commerce plugin in the past. [...] Read the rest »