ASPX FileUpload Control

[rn5a]

The ASPX FileUpload control displays a TextBox along with a 'Browse...'
Button. Setting the different properties of this control just reflects
the changes in the TextBox but not the Button.

For e.g. if the BackColor of a FileUpload control is set to blue, then
only the TextBox color changes to blue but the BackColor of the Button
doesn't change to blue. Or if the Font-Size of a FileUpload control is
set to 15pt, then only the size of the text in the TextBox becomes 15pt
but the 'Browse...' text on the Button retains the default size.

Is there any way by which the properties of the Button (like BackColor,
BorderColor, Font-Names etc.) in the FileUpload control can also be
changed along with the TextBox?

 

[Pandurang Nayak]

The HTML file upload control is a standard one and behavior for that cannot
be modified. That is why ASP.NET also does not allow you to do that by
changing properties.

What you could do is implement some JavaScript and DHTML to keep the file
upload control in a hidden DIV and have any image/link of your choice. When
clicked, the image or link invoke a click on the hidden control.

Several modern web email programs do this for attachments.

Regards
Pandurang

 

[rn5a]

What you could do is implement some JavaScript and DHTML to keep the file

upload control in a hidden DIV and have any image/link of your choice. When
clicked, the image or link invoke a click on the hidden control.

When the image or the link is clicked, it has to invoke a click of only
a part of the hidden control i.e. it has to invoke a click of only the
'Browse...' Button & not a click of the entire hidden control, isn't
it? But the FileUpload control comprising of a TextBox & a Button is
one control; so how do I invoke the click of only the Button when the
image or link is clicked?

 

[rn5a]

I did something similar to what you had suggested. This is it:

<script language="JavaScript">
function browseFile(){
document.getElementById('fudFile').click();
}
function setFile(){
document.getElementById('txtFile').value =
document.getElementById('fudFile').value;
}
</script>
<form onMouseEnter="setFile()" runat="server">
<asp:TextBox ID="txtFile" runat="server"/>&nbsp;
<input type="button" ID="btn" OnClick="javascript:browseFile()"
value="Browse..." runat="server"/>
<asp:FileUpload ID="fudFile" Style="display:none" runat="server"/>

Now I can set the different properties of the 'Browse...' Button using
the 'style' attribute.

Note that I have used the HTML Button control (<input type="button">) &
not the Web Server Button control (<asp:Button>). In the above code, as
soon as the dialog box for choosing a file closes (after a file is
chosen), the TextBox gets populated with the path & the name of the
file chosen. But if I replace the HTML Button control with a Web Server
Button control like so:

<asp:Button ID="btn" OnClientClick="javascript:browseFile()"
Text="Browse..." runat="server"/>

then though the dialog box for choosing a file opens up, the TextBox
doesn't get populated with the path & the name of the file chosen
immediately after the dialog box closes after a file is chosen.

Any idea why it's not working with the Web Server Button control?