Click here to Skip to main content
12,248,978 members (26,541 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28.7K views
3K downloads
23 bookmarked
Posted

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

, 21 Feb 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Customized the look and feel of AsyncFileUpload from Microsoft Ajax control toolkit

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).

filup_approach1.png

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).

filup_approach2.png

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.

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 in your projects as well.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Simon Pang
Software Developer
Canada Canada
a believer of "One app worths thousand words" and a business application developer in Toronto Canada.

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Razi Syed14-May-12 7:42
memberRazi Syed14-May-12 7:42 
GeneralMy vote of 4 Pin
Steve Krile8-Dec-11 15:35
memberSteve Krile8-Dec-11 15:35 
QuestionSolution does not work in IE9 Pin
lat23311-Oct-11 23:15
memberlat23311-Oct-11 23:15 
AnswerRe: Solution does not work in IE9 Pin
Simon Pang12-Oct-11 22:03
memberSimon Pang12-Oct-11 22:03 
GeneralRe: Solution does not work in IE9 Pin
lat23313-Oct-11 17:31
memberlat23313-Oct-11 17:31 
Questionhow to bind a gridview after the file uploads? and how to validate a file clinetside? Pin
Vaibhav Saran16-Mar-11 3:09
memberVaibhav Saran16-Mar-11 3:09 
QuestionAny way to get it to work n a JQuery modal dialog? Pin
fred_1-Mar-11 3:54
memberfred_1-Mar-11 3:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160426.1 | Last Updated 21 Feb 2011
Article Copyright 2011 by Simon Pang
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid