ASP.NET AJAX Control Toolkit - Change Appearance of AsyncFileUpload Control?

Question

Hi,

I tried asking this at ASP.NET Forums but no one had a solution. I'm starting to think there isn't one.

What I'd like to do is customize the look and size of the AsyncFileUpload control's 'Browse' button while hiding its textbox. Alternatively, hiding the AsyncFileUpload entirely and calling its functionality from a button whose look I can customize would be splendid too.

Thanks,

Calvin

Answer 1

Read this article for a solution.

Answer 2

Thanks for your suggestion.

Unfortunately this method fails on the AsyncFileUpload control. Its opacity cannot be set by CSS, nor any other method I'm aware of.

Answer 3

Maybe this is a bit in left field, but perhaps a better solution would be to use a Flash-based solution. There are a few that are specifically made for ASP.NET and apparently have a fair amount of customization.

• Multiple File Upload With Progress Bar Using Flash
• ASP.NET Flash File Uploader

It's not a solution to your problem directly, but another way to achieve similar results.

Answer 4

Thanks, Josh.

Rather than being in left field, I think the choices you mentioned might be my only options.

Answer 5

This method worked for me.

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Answer 6

You can still use the solution that SLaks offered even for AsyncFileUpload control.

The code:

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

will be rendered this way:

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

Therefore by using a CSS selector #fileUploadDiv input[type=file] you can modify the style of the AsyncFileUpload control the same way you do it with regular <input type='file'> element.

I blogged about this solution in more details here.