Share This Using Popular Bookmarking Services

Google ads


network monitoring software

Programs & websites tailormade for you.

An MS-Ajax-safe version of asp:FileUpload 

Saturday, August 13, 2011 6:59:00 PM

The asp:FileUpload control is a nightmare for both designers and programmers.

  • Designers cannot style it, because every browser renders it different.
  • Programmers have to make full postbacks to get the file contents, but if any validation of other input fields require user handling then the file will be lost on the next postback.

Since I right now have 2 projects that needs a better solution for this, I have set out to solve the problem one and for all.

The goal - making an ASP.NET control that allows:

  • Full control of styling the upload button, including translation to different languages of all texts (Danish, English etc.)
  • Safe to use in an UpdatePanel (uploaded files is remembered between postbacks)
  • Able to handle both one or multiple files
  • Degrade nicely (that is: at least a message like "please enable JavaScript to upload files")
  • Compatible with all major browsers on PC, Mac and mobile phones
  • For single-file uploads it should be able to replace the old asp:FileUpload control without requiring code changes.

Well, after researching for some days, I think I have found some components to give me a head start.

First has an excellent piece of JavaScript that allows full styling of the upload button (down to specifying custom HTML tags), possibility for translation, advanced options that I need for doing my own stuff, and it seams to work correctly in all the browsers I have tested so far.

Secondly gives an ASP.NET implementation for receiving the file uploads.

Now I am working on combining those two with a database backend and a 'simple' control that can replace the old FileUpload control, and transparently manage the handling of references to the uploaded files while the user is correcting his input.

So far I think I have put about 30 hours of work into researching, and I think I am on the right track...

If anybody is interested in the result, drop a comment and I'll try to package the finished product into an OpenSource project.


Update at 2:14 in the night: Success!

I now have a working proof of concept on the first test website (it is not yet made public so I will not link to it).

Lots of fine tuning is still needed to make it generic, and lots of testing to see if all browsers really handle it consistently, but it is (more or less) routine work for the coming week.


Update Monday the 15th of August 2011:

Have progressed to having the first complete demo-solution for my AjaxSafeUpload control including translation for Danish and English, so that I can maintain the code of the control separate from the two other projects that I need it in.


Update Monday evening at 23:45:

While one of my own projects is a custom made ASP.NET 4.0 web application, I also needed the control to work with DotNetNuke for ASP.NET 3.5 - and after a day of rewriting and re-integrating stuff, it now also works there.

But the code is somewhat ugly - it is visible it was not made from any great design, but just kind of evolved as I learned what was needed to do what I wanted.


Update Tuesday at 16:30:

The cat is out... I finished cleaning up the code (somewhat), read about licenses, wrote a manual/introduction, expanded this website with a page to promote/download it and a support forum to receive questions and FAQs, and posted a link to it in those LinkedIn groups that I am member of - so now my baby is publicly available!

Treat it well, please.


Update Tuesday evening:

How do you convert a DataSet (.xsd file) from one type of database to another (MySQL to MS SQL Server)?

You change the connection string on the table adapter and then configure the main SQL statement so fresh automatic code is generated!

And with that, there is now a MS SQL Server 2005/2008 version available too. It does also not include the database (that one file would fill 10MB) but there is a new sql script to create the table.


To see the final result, go to:

Allan K. Nielsen, Kindbergs Program Udvikling
Tweet This