ASP.NET AJAX Control Toolkit - changing the appearance of AsyncFileUpload control?
I tried asking for this on the ASP.NET forums but no one had a solution. I'm starting to think that there is nobody.
What I would like to do is customize the look and size of the AsyncFileUpload Browse button, hiding its textbox. Alternatively, hide the AsyncFileUpload completely and invoke its functionality with a button, whose look and feel that I can tweak will also be great.
source to share
You can still use the solution provided by SLaks even for the AsyncFileUpload control.
Code:
<div id="fileUploadDiv">
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />
</div>
will display like this:
<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, using the CSS selector #fileUploadDiv input [type = file] , you can change the style of the AsyncFileUpload control the same way you do with a regular <input type = 'file'> element.
I wrote about this solution in more detail here.
source to share
It might be a bit on the left margin, but perhaps the best solution would be to use a Flash solution. There are a few that are specifically built for ASP.NET and seem to have a fair amount of customization.
This is not a direct solution to your problem, but another way to achieve similar results.
source to share
This method worked for me.
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
source to share