Customize AsyncFileUpload (Microsoft Ajax control toolkit), Cross Browser too

Download FileUploaderAjax40 - 1.06 MB (VS2010 + .NET 4.0)
Download FileUploaderAjax35 - 1.05 MB (VS2005 + .NET 3.5)

Introduction

This article is about how to customize the look and feel of AsyncFileUpload from Microsoft Ajax control toolkit. The source code for both VS 2010 and VS 2005 is available. A live demo is also available for you to see how it runs.

Background

Ajax control toolkit is a Microsoft open source project. Among the toolkit, there is a very useful control called “AsyncFileUpload”. You can see Microsoft's official demo of this control here.

It's powerful but hard to customize from its built-in properties.

I successfully customized it through two approaches. You can see my live demo here.

Using the Code

After you extract the source code, you can directly open the solution file (one for VS2010, the other for VS2005 just in case).

To keep it simple, they are both edited under "web site" project not "web application". You can directly run them by clicking "run" from IDE.

NOTE: VS2010 project needs .NET 4.0 installed locally for debugging. VS2005 project needs .NET 3.5 installed locally for debugging.

Points of Interest

The basic idea of customizing AsyncFileUploader is using mask trick:

You make the AsyncFileUploader transparent and have a button or image looks covered AsyncFileUploader. But actually, the AsyncFileUploader is on top of masked button/image. So the user seems to click the masked customized button/image, but actually clicks the AsyncFileUploader.

That's just basic idea. I implement it in two approaches.

Approach 1 is easy and quick. Basically, you make a customized button with similar size of AsyncFileUploader. The limitation of this approach is you cannot make big button because the size of AsyncFileUploader itself is hard to adjust (especially the height if it's even possible).

Approach 2 allows me to be proud for myself: The idea is that you cannot adjust AsyncFileUploader size easily, but you can move it. So I move it inside of the big image button. Whenever user clicks, the AsyncFileUploader gets clicked.

To make it more clear, I have a X/Y position box to show you the mouse position when it's in the image scope. If you really want to see how the internal control is moving, you can change the transparent value of the control (it's 0 to be totally transparent, you can change it to 50 as half transparent).

Things to be Aware of

I didn’t find a good way to gracefully catch the over size uploading issue. I tried global.asax application error catching, also tried AsyncFileUpload built-in error catching. It seems global.asax can catch the specific error, but cannot throw it gracefully. So I end up using warning UI and <httpRuntime maxRequestLength="500"/> from web.config. It’s not perfect, but works for all major browsers.

Another thing to be aware of: The solution also works under latest IE9 RC, but you have to run it under IE8 compatible mode.