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.