Michael Narinsky

The standard HTML <input type=”file”> element does not work inside ASP.NET update panel due to security reasons and restrictions a browser implies (It is not allowed for JavaScript to directly access files in a user's system and it is not allowed to access the details of the selected file). ASP.NET AJAX Toolkit AsyncFileUpload control seems to be an easy way to solve this issue – it works out-of-box (well, after you add AjaxControlToolkit binaries to your project) and provides an excepted functionality to the end-user.

One problem I faced during my work with AsyncFileUpload was inability to customize the look of the control. This is a pretty common issue with a <input type=”file”> element in general and a pretty neat solution for this is described here. The basic idea of this solution is that you place <input type=”file”> element on top of another custom element (picture, button, etc.) and then set <input type=”file”> element’s opacity to 0, so it will be transparent and the user will only see the element underneath (picture, button, etc.), but clicking on that element will causes <input type=”file”> to fire off it’s click event.

This technique seems to work fine when working with regular <input type=”file”>, however AsyncFileUpload control does not allow to set its opacity…

So in order to solve this let’s take a look at how AsyncFileUpload control is being rendered.

Turns out that this code:

<div id="fileUploadDiv">
    <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />
</div>

will be rendered as:

<div id="fileUploadDiv">    
    <span id="MainContent_AsyncFileUpload1">    
        <input type="hidden" name="ctl00$MainContent$AsyncFileUpload1$ctl00" id="MainContent_AsyncFileUpload1_ctl00" />    
        <div id="MainContent_AsyncFileUpload1_ctl01" name="MainContent_AsyncFileUpload1_ctl01">    
            <input name="ctl00$MainContent$AsyncFileUpload1$ctl02" type="file" id="MainContent_AsyncFileUpload1_ctl02" id="MainContent_AsyncFileUpload1_ctl02" onkeydown="return false;" onkeypress="return false;" onmousedown="return false;" style="width:355px;" />    
        </div>    
    </span>    
</div>    

This means that using a CSS selector #fileUploadDiv input[type=file] you can modify the style (including opacity) of the AsyncFileUpload control the same way you do it with the regular <input type=”file”> control therefore you can still use this nice solution I mentioned before to give AsyncFileUpload control a custom look you want.

I’ve decided to add the new ASP.NET 4.0 Chart Control to one of my web apps. Everything worked fine during the testing on my local machine, but once I published it to remote IIS 7.0 server I’ve got the following error:

HTTP Error 500.23 - Internal Server Error
An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.

Turns out that it occurs because ASP.NET modules and handlers should be specified in the IIS <handlers> and <modules> configuration sections in Integrated mode.

So the simple solution that worked for me was just to remove the following entry from web.config <system.web> section:

<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
    System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"
    validate="false" />
</httpHandlers>

Also make sure that <system.webServer> section has the following:

<handlers>
	<remove name="ChartImageHandler" />
	<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
        path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
        System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</handlers>