HTMLInputFile control

geeta · October 1st, 2003, 10:33 AM

Hi,

I am creating a HTMLInputFile control in ASP.Net to upload a file. But I am not able to change the appearance of the browse button using style sheets. Is it possible to change the background color of Browse Button in HTMLInputFile control.

I used the following statement and it changes the appearance of the HTMLInputFile control's text box field but not the Browse button that accompanies it.

<input id="inpFileUp" type=file runat=server style="BORDER-RIGHT: purple 1px solid; BORDER-TOP: purple 1px solid; FONT-WEIGHT: bold; VERTICAL-ALIGN: baseline; BORDER-LEFT: purple 1px solid; COLOR: purple; DIRECTION: ltr; BORDER-BOTTOM: purple 1px solid; FONT-FAMILY: Verdana; LETTER-SPACING: 2pt; BACKGROUND-COLOR: silver; TEXT-ALIGN: center">

Please help.

Thank You.
Geeta

Imar · October 1st, 2003, 11:42 AM

Hi Geeta,

You ran into a little problem in the <input type="file"> control. Indeed you can't change the button; all you can change is the text box. However, you can cheat around it a little bit. Here's what to do:

1. Add an input type="file" to your page
2. Make it hidden by setting its display style-attribute to none
3. Add a text box to your page that will replace the text part of the file control (it's just used as a fake text box)
4. Add a normal button to your page. Set its style to whatever you want, using the style or class attributes.
5. In the onclick of the second button, fire a JavaScript function that fires the onclick of the HTML file control
6. Once the user has chosen a file, copy the contents of the hidden file control to the second and visible text box, so the user knows what file has been selected.

The following code does exactly that:

Code:

<html>
<head>
    <title>File Upload Example</title>
    <script language="JavaScript" type="text/javascript">
    function HandleFileButtonClick()
    {
        document.frmUpload.myFile.click();
        document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
    }
    </script>
</head>
<body>
  <form name="frmUpload">

    <input type="file" name="myFile" style="display: none">

    <input type="text" name="txtFakeText" readonly="true">

    <input type="button" onclick="HandleFileButtonClick();" value="Upload File" style="background: red;">
  </form>
</body>
</html>

I also added a readonly="true" attribute to the second text box. This is to prevent users from directly changing the contents of the fake file text box. If you allow them to change it directly, your real, and hidden, file text box will get out of synch.

It's quite a bit of work, it's not completely backwards compatible to ancient browsers, but I'm sure it will do the trick in most circumstances.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Imar · October 1st, 2003, 01:59 PM

One addition to my previous post: I really believed this example was pretty much cross browser. However, after a bit of testing, it turns out that it only works in Internet Explorer, but not in Netscape, Mozilla, Opera etc.

Not sure why yet, but if I ever figure out the reason, I'll post an update here.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

geeta · October 1st, 2003, 05:28 PM

Imar,

This solution surely is a good work around for the problem. Thanks for your time and appreciate your help.

Regards,
Geeta

alaywara · October 13th, 2003, 12:49 AM

Using code below + an ASP button on ASP.NET, when the ASP-button clicked, the value of htmlinputfile = blank.

Quote:

quote:Originally posted by Imar
Hi Geeta,

You ran into a little problem in the <input type="file"> control. Indeed you can't change the button; all you can change is the text box. However, you can cheat around it a little bit. Here's what to do:

1. Add an input type="file" to your page
2. Make it hidden by setting its display style-attribute to none
3. Add a text box to your page that will replace the text part of the file control (it's just used as a fake text box)
4. Add a normal button to your page. Set its style to whatever you want, using the style or class attributes.
5. In the onclick of the second button, fire a JavaScript function that fires the onclick of the HTML file control
6. Once the user has chosen a file, copy the contents of the hidden file control to the second and visible text box, so the user knows what file has been selected.

gp_mk · November 4th, 2003, 06:34 AM

I am also having problems with the suggested solution. When I click on the "normal" button, the file browse dialog does indeed appear. However, when I select a file it does not get returned, i.e. document.frmUpload.myFile.value is blank! It works fine if I click on the original browse button of the HTMLInputFile control.

What am I doing wrong? I am using v1.1 of the .NET framework and IE6

gp_mk · November 4th, 2003, 07:00 AM

I think the problem may be due to the fact that I am using "runat=server" with the HTMLInputFile control, but I need to do this for a reason. Any help would be much appreciated

Imar · November 4th, 2003, 08:42 AM

Yeah, you do indeed need the runat="server" attribute, or your ASP.NET app won't be able to see the control.

What is the ID of the control in the HTML page at run-time? ASP.NET will add a prefix to controls when they're not unique.

You have to make sure that the ID of the hidden control in the HTML page matches that of the one you're trying to fill with the JavaScript.

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

gp_mk · November 4th, 2003, 11:57 AM

Thanks for your reply.

I think I know what's causing the problem, but don't have a solution:

The original code I wrote uses the OnPropertyChanged()event of the HTMLInputFile control to respond to the user selecting a file, and this works fine. However, the main code for handling the event is server-side, and that's where the problem is. On the server I register a javascript function using RegisterClientScriptBlock, which I call from the clent-side event handler. This allows me to write code on the server to handle this by trapping the postback event.

The problem is: the RegisterClientScriptBlock line in the server-side code seems to prevent the HTMLInputFile from having it's value set correctly after a file has been selected. If I comment this line out it works fine otherwise the control does not contain a value after file selection, and therefore the OnPropertyChanged()event never gets called. However, due to the nature of my application I need to use server-side code to deal with the event.

Any ideas? I know this scenario is quite complicated, but if you have come across a similar problem before please let me know.

Thanks for your help.

gp_mk · November 4th, 2003, 12:42 PM

..I forgot to mention: When I use the HTMLInputFile control normally everything works fine. There seems to be an conflict in using RegisterClientScriptBlock with the control AND calling the onclick() event dynamically (to simulate the user clicking on the control)