Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old October 1st, 2003, 11:33 AM
Registered User
 
Join Date: Jun 2003
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default HTMLInputFile control

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

Reply With Quote
  #2 (permalink)  
Old October 1st, 2003, 12:42 PM
Imar's Avatar
Wrox Author
Points: 67,581, Level: 100
Points: 67,581, Level: 100 Points: 67,581, Level: 100 Points: 67,581, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,269
Thanks: 66
Thanked 1,428 Times in 1,408 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old October 1st, 2003, 02:59 PM
Imar's Avatar
Wrox Author
Points: 67,581, Level: 100
Points: 67,581, Level: 100 Points: 67,581, Level: 100 Points: 67,581, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,269
Thanks: 66
Thanked 1,428 Times in 1,408 Posts
Default

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.
Reply With Quote
  #4 (permalink)  
Old October 1st, 2003, 06:28 PM
Registered User
 
Join Date: Jun 2003
Location: , , .
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Imar,

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

Regards,
Geeta

Reply With Quote
  #5 (permalink)  
Old October 13th, 2003, 01:49 AM
Registered User
 
Join Date: Oct 2003
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
Reply With Quote
  #6 (permalink)  
Old November 4th, 2003, 06:34 AM
Authorized User
 
Join Date: Nov 2003
Location: , , United Kingdom.
Posts: 78
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Reply With Quote
  #7 (permalink)  
Old November 4th, 2003, 07:00 AM
Authorized User
 
Join Date: Nov 2003
Location: , , United Kingdom.
Posts: 78
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Reply With Quote
  #8 (permalink)  
Old November 4th, 2003, 08:42 AM
Imar's Avatar
Wrox Author
Points: 67,581, Level: 100
Points: 67,581, Level: 100 Points: 67,581, Level: 100 Points: 67,581, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,269
Thanks: 66
Thanked 1,428 Times in 1,408 Posts
Default

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.
Reply With Quote
  #9 (permalink)  
Old November 4th, 2003, 11:57 AM
Authorized User
 
Join Date: Nov 2003
Location: , , United Kingdom.
Posts: 78
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

Reply With Quote
  #10 (permalink)  
Old November 4th, 2003, 12:42 PM
Authorized User
 
Join Date: Nov 2003
Location: , , United Kingdom.
Posts: 78
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Change Caption HtmlInputFile Israr ASP.NET 1.0 and 1.1 Professional 4 November 8th, 2006 02:32 AM
HtmlInputFile g_vamsi_krish ASP.NET 1.0 and 1.1 Basics 2 July 25th, 2006 07:40 AM



All times are GMT -4. The time now is 01:25 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.