• 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 MS ajax control toolkit. Source code for both VS 2010 and VS 2005 is available. A live demo is also available for you the 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 Ms 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 extracted 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 can not make big button because the size of AsyncFileUploader itself is hard to adjust (especially the height if it's even possible)

Approach 2, Allow me to be proud for myself: The idea is that you can not 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 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 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 can not 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.

SUMMARY

All codes are tested under major browsers: IE8/IE9 RC/Firefox 3.6/Chrome 9. It's nice to have such a built-in control to work with.

Hope this is helpful to your projects as well.

History

 No history yet