Howto Style the Button of a input type="file" Control


NOTE: the concepts presented in this article are now considered obsolete possibly because better alternatives are available.

Update!! 12-20-2003
There seems to be a problem with the code presented in this article. When you click the new and styled Browse button, the Browse for File dialog is opened, and when you select a file, both text boxes (the hidden and the fake field) are displayed with the file's full path and filename. However, when you click the submit button, the real (and hidden) file box gets cleared and the form will not submit. When you click the submit button again, the form will eventually submit, but because the file box is empty, your file will not be uploaded to the server. This problem has been discussed extensively on various forums on the web, including the one run by Wrox.

So far, I haven't been able to isolate the problem or come up with a solution. It looks like this problem is caused by some security mechanism in Internet Explorer. I haven't tested various versions of IE yet, but I am sure it doesn't run on IE 6, SP1 (well, it doesn't run on *my* IE 6, SP1 ;-) )

If you do find a browser that runs this code fine, please let me know.

When you are using Cascading Style Sheets (CSS) in your Web pages, it is likely that you want to change the appearance of your HTML buttons as well. After all, the dull looking gray buttons give your site a bit of an old fashioned look. Usually, changing the style is as easy as setting a style or a class attribute, like <input type="button" value="Send Form" style="background-color: red";> to give the button a red color. However, this won't work with the Browse button that is attached to an input box that allows a user to upload a file. This article will demonstrate a so

Prerequisites

This example has been checked for Internet Explorer 6. Earlier versions of Internet Explorer may support this as well. It does not seem to work on various flavors of Opera, Netscape and Mozilla, so it is most useful in an Intranet environment where you can control the browser your visitor is using. If you find a browser that runs this code fine, and it is not listed here, please send me a message with the browser type and platform it runs on, and I'll add it to the Works With list at the end of this article.
Since this code example uses JavaScript, your user must have a browser capable of running JavaScript and have it enabled.

The Code

Take a look at the code for this article in plain text format. Alternatively, you can download a zipped version of a working example at the end of this article.

The trick to style the Browse button, is to not use this button at all. This may sound a bit confusing, but it is the only way to do it. There is no way to directly apply style information to the Browse button for the <input type="file"> control. Instead, you should hide the entire file control using CSS. Once you have hidden the file control, you should add an ordinary text box and a button with the text Browse on it to your page, so your users think they are looking at a normal file control. In the onclick handler of the button, you can call the click event of the real file button, so the user is still presented with a Choose File dialog. When a file has been selected, you can copy the contents of the file control to your second and visible text box. Although the file control is hidden with CSS, it is still a functional control, so the file that the user has selected, will still be available in the control's value attribute. Let's look at the code to see how this all fits together.

<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">
    <!-- Real Input field, but hidden-->
    <input type="file" name="myFile" style="display:none;">

    <!-- Fake field to fool the user -->
    <input type="text" name="txtFakeText" readonly="true">

    <!-- Button to invoke the click of the File Input -->
    <input type="button" onclick="HandleFileButtonClick();"
         value="Upload File" style="background: red;">
  </form>
</body>
</html>
The <head> section defines one simple JavaScript function that is called when you click the visible and styled button. The first line of code calls the click() handler of the <input type="file"> control. This causes the Choose File dialog of the browser to appear, so a user can browse for a file. As soon as they have chosen a file, the second line of JavaScript fires. All this line does, is copy the file name from the file control into the visible text box, so the user knows what file he or she has selected.

With this bit of JavaScript in place, the rest of the code is pretty easy to understand:

  <form name="frmUpload">
  <!-- Real Input field, but hidden-->
    <input type="file" name="myFile" style="display: none;">
An <input type="file"> is added to the page. It's hidden using CSS by setting its display property to none. This makes sure that the control is hidden, and doesn't take up any space in the browser.

Next, the replacement text box and button are added to the page:

    <!-- Fake field to fool the user -->
    <input type="text" name="txtFakeText" readonly="true">
    <!-- Button to invoke the click of the File Input -->
    <input type="button" onclick="HandleFileButtonClick();"
         value="Upload File" style="background: red;">
The text box, called txtFakeText is just an ordinary text box, capable of holding simply text. The readonly="true" attribute is used to make sure that the user can't change the contents of this text box directly. Because there is no way to copy the contents of this text box back to the hidden file control, any change the user would make would cause the two HTML controls to get out of sync. By locking the control, the only way the user can select a different file is by using the Browse button again.

The Browse button is a plain HTML button, so you can use any style information you require. In this example, all that is styled is the background color of the control by setting it to red, but you can change whatever you want on this button; font, size, borders, placement, etc. just as you can with most other HTML elements.

This is all that is necessary to have a styled Browse button. Your users will think they are looking at an ordinary file control, while you have now full control over the looks of the button.

Works With

  • Internet Explorer 6

Download Files


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Monday, December 20, 2004 9:22:10 PM chen said:
Hello there,

The idea is great!

I still have one problem. How to process the PostedFile?
HttpPostedFile postedFile = MyFile.PostedFile;
// get size of the file
int nFileLen = postedFile.ContentLength;
nFileLen is 0.

In fact my question is how to get the PostedFile, not only the name. So I can, in ASP.NET
string strFileName = Path.GetFileName(postedFile.FileName);
postedFile.SaveAs(Server.MapPath(strFileName));

Thanks.

Chen
On Wednesday, April 13, 2005 9:33:32 PM Gareth said:
I've hit the same problem as Chen. Invoking the click() of the htmlInputFile works fine, and setting the value of the visible control to that of the hidden file input works.

However, on the server side I get no PostedFile.FileName. I can still Save the file because it appears to contain data in the HtmlInputBuffer. However, inspection of the saved file on the server reveals it to be 0Kb in length - not good.

I also get the strange Submit button behaviour - click once, nothing happens, click twice - server-side event handler runs. But no FileName. Perhaps the first click IS clearing the value of the hidden input file ?
On Wednesday, April 13, 2005 9:33:38 PM Imar Spaanjaars said:
Yes, this appears to be a known issue with the file upload control in recent / patched versions of IE. Please read the first Update paragraph at the top of the article, and follow the link to http://p2p.wrox.com/topic.asp?TOPIC_ID=4772

That forum post also introduces a new way to style the control....
On Wednesday, October 26, 2005 5:37:46 AM Haroon Wangde said:
It works fine but it needs a double click to submit the form. And after double click HttpPostedfile loses its contents.
On Wednesday, October 26, 2005 5:53:45 AM Imar Spaanjaars said:
Hi Haroon Wangde,

Yeah, that is a known issue. Please read the "Update!! 12-20-2003" section at the top of this article and follow the link to the Wrox forum. What you're experiencing is described in full detail....


Imar
On Tuesday, November 22, 2005 3:37:54 AM NamDG said:
Hi all
Now , i don't want to intead of input file. I use a input file and set readonly to
file. But the readonly property not run when i click to browser.
I'm using keycode and ok. Only for delete button and backspace is not ok.
you can support for me.
Thanks
On Tuesday, November 22, 2005 6:40:28 AM Imar Spaanjaars said:
Hi NamDG,

I am sorry, but I have *no* idea what you're talking about. Can you rephrase your question please?

And is this related to the original article "styling an input button"? If not, can you take this question to a forum like http://p2p.wrox.com?

Cheers,

Imar
On Friday, August 18, 2006 3:10:26 PM Malu said:
i am not able to get contect of selected file when i click on upload button (web server control), please send code if any one have.

regards,
malu
On Friday, August 18, 2006 3:15:10 PM Imar Spaanjaars said:
Hi Malu,

I don't think you read the article well enough....

Imar
On Wednesday, September 06, 2006 9:17:37 PM Pinky said:
Hi Imar:

Did we get any solution to this problem....It works exactly as you have mentioned in the article..but is there any solution to it yet...

This does not work in "FireFox" browser so we revert our codes back to the orignal one default button with "css" border style.

please let me know if you have figured out a way to submit the file on one go.
-Pinky
On Thursday, September 14, 2006 5:55:48 PM PurpleX said:
I have the same problem. I set the htmlform property enctype to "multipart/form-data" for upload a file to the server but the result is an "Access denied".
On Friday, September 15, 2006 2:14:24 PM Imar Spaanjaars said:
Hi Pinky and Pinky,

Follow the link to the Wrox web site at the beginning of the article. It describes the problem in  more detail, and also suggests a new way to fix the problem.

Cheers,

Imar
On Friday, September 15, 2006 2:33:28 PM Pinks said:
Hi Imar:

The code which you have mentioned works good for .net stuff. Since we are working with portal the developer sees a problem with the sumbit button. First time there is no action taken place but the second time an empty file is passed with no datas. [xx(]

What is your suggestion on this, since we need to use our company standard guidelines.

-Pinky[}:)]
On Friday, September 15, 2006 2:45:37 PM Imar Spaanjaars said:
Hi Pinks,

Yes, I know that. That's what the UPDATE!! intro of the article is all about. The code from this article is no longer valid. Follow the link to the Wrox site, and you'll find code that does work....

Cheers,

Imar
On Tuesday, March 20, 2007 12:23:01 PM Chitra said:
Hi to all,

           I am working on C#.NET.
To upload the file, i am using the file upload control. I got that control from Blue-Veda software. I want to display the selected path in a seperate text box. (ie. Whenever i will select the path, that should come in another textbox also).
I tried but i am not getting. I know surely that i am missing something.
Please any one of them help me...

With Regards,
Chitra
On Friday, March 23, 2007 8:22:28 AM Ky said:
http://www.quirksmode.org/dom/inputfile.html
Best styling. Work with more browser.
On Wednesday, August 08, 2007 8:53:01 AM San said:
the HTML file button in firefox doesn't look good as compared to IE?
On Thursday, October 25, 2007 12:06:59 PM sasikiran said:
Is there any way through which I can change the title of the file chooser from "Choose File" on the top of browse window in IE and "File Upload" title on top of browse window in Firefox.

Let me know if there is a way.


Thanks.
On Thursday, October 25, 2007 12:10:22 PM Imar Spaanjaars said:
Hi sasikiran,

AFAIK, you can't. This is an OS title....

Imar
On Friday, October 26, 2007 4:42:39 AM Selva said:
Hi,

This file file click is not working in firefox. It works fine in IE.

Could you find the solution for this.

Thanks
On Friday, October 26, 2007 5:45:14 AM Imar Spaanjaars said:
Hi Selva,

Read the intro at the beginning of this article. It doesn't even work on IE anymore....

Imar
On Tuesday, April 15, 2008 5:43:58 PM system said:
Your method is good, but it contains separate javascript function.
Here is a good article that describe how to style file input box without javascript.

http://www.burhankhan.com/css_tricks/styling-file-upload-input-box-in-css/
On Tuesday, April 15, 2008 6:25:58 PM Imar Spaanjaars said:
Hi there,

Please read the intro and the comments again. My method is *not* so good, and better alternatives haven been suggested....

Imar
On Tuesday, April 22, 2008 6:48:26 AM mis robot said:
problem with firefox when click button Browser
On Tuesday, April 22, 2008 6:57:48 AM Imar Spaanjaars said:
Hi there,

Please reread the article, with the Update section in particular. Firefox is not the only problem with this code; therefore, it's now obsolete.

Imar
On Wednesday, May 07, 2008 6:17:13 PM ]Nali[ said:
It's not working on my Mozilla Fire Fox from the beginning so I think something is wrong with this code. Could any help me ? A fight with this problem sins i reamember :) THX
Responses please wrote to my email 89Nali@wp.pl THX :)
On Wednesday, May 07, 2008 6:40:58 PM Imar Spaanjaars said:
Hi Nali,

Sigh.... Don't you guys read the actual article and its comments before you start writing your own comments??

Please read the intro again and all the comments I posted earlier. This method is now OBSOLETE and I have provided links to better alternatives.
Pfffff.....

Imar
On Thursday, February 12, 2009 6:45:26 AM Den said:
Just what I've looking for.
On Thursday, February 12, 2009 9:07:43 PM Imar Spaanjaars said:
Hi Den,

Is it? Did you see the "obsolete" remark at the top? And did you follow the links to the p2p.wrox.com article? This code no longer works....

Imar
On Friday, May 15, 2009 9:50:50 AM Srikantha Rao Marri said:
Sub - Reagrding Fire Fox Issue

In the above mentioned html example, the file field which is not working in Fire Fox broswer. could you please help in this. I am very thankful to you.

Regards
Srikantha Rao Marri.
On Friday, May 15, 2009 10:13:03 AM Imar Spaanjaars said:
Hi Srikantha,

You may want to reread the intro of this article. The code does not work on any browser anymore.

Cheers,

Imar
On Friday, May 15, 2009 10:21:24 AM Srikantha Rao Marri said:
I know you already mention that its not usful for further.

But any solutions for Fire Fox. Can you please help in that.

Thanks
Srikantha Rao Marri
On Friday, May 15, 2009 10:40:11 AM Imar Spaanjaars said:
Hi Srikantha,

Please follow the link to the P2P posts for more solutions to this problem. I don't have any ready-made code for this anymore.

Cheers,

Imar
On Thursday, January 21, 2010 9:41:39 AM Tiago Epifanio said:
Here's a very easy way to style the input type="file" controls:
http://tiagoe.blogspot.com/2010/01/css-style-typefile-tags.html
On Thursday, February 25, 2010 6:49:42 AM milind said:
can not support mozila browser
On Thursday, February 25, 2010 9:09:14 AM Imar Spaanjaars said:
Hi milind,

You may want to reread the intro of this article. The code does not work on any browser anymore. Do you guys actually read an article and its comments before you post here??

Cheers,

Imar
On Wednesday, March 17, 2010 5:26:21 AM Sweta said:
Thanks ,
This code works for me
On Wednesday, July 14, 2010 9:12:19 AM sanket said:
This is not working for Mozila. How to make it work in all browser??
On Sunday, July 18, 2010 11:29:08 AM Imar Spaanjaars said:
Hi there,

Please read the Update!! section at the beginning of this article.

Cheers,

Imar
On Monday, February 28, 2011 5:11:40 PM Mohammed Rasheen said:
the concept is good it only look like file but the problem is i am not getting the file vale in php while submit thi through form,and trieng to accept ,not working if i run the code print_r($_FILES)
it must show all the details of file we have,but now what i am getting is error nofile name,no file type,no size and error 4
please give some idea for me how to do,try to respond me
On Sunday, March 06, 2011 1:20:50 PM Imar Spaanjaars said:
Hi there,

Did you read the big "Update" section at the start of the article?

Imar
On Friday, September 02, 2011 6:18:40 AM santosh said:
how apply javascript when use form id not use name
On Saturday, September 03, 2011 6:36:05 AM Imar Spaanjaars said:
Hi santosh,

Yes, exactly. Great question ;-)
On Monday, February 13, 2012 9:52:24 AM Pravin Zade said:
I customize the given code with css and its working properly in FF and IE but sourse code not working in Chrome.
how to solve this problem.
Please assist!!!!!!
Mit
On Monday, February 13, 2012 9:55:08 AM Imar Spaanjaars said:
Hi there,

As I said in the intro of the article, there are problems with the code from this article, and it shouldn't be used. Look for alternatives, presented in the link I provided to the forum post.

Cheers,

Imar
On Wednesday, October 17, 2012 4:03:53 AM Conrad said:
thanks for this - it required (a little) modification to work - even on Firefox - so I thought I'd share (btw your form doesn't like HTML so you'll need to fix my completely wrong brackets):

  [form name="frmUpload"]
    (Real Input field, but hidden - note the added ONCHANGE control, here)
    [input type="file" name="myFile" style="display: none;" onchange="document.frmUpload.txtFakeText.value = this.value;" /]

    (Fake field to fool the user - THIS IS EXACTLY THE SAME)
    [input type="text" name="txtFakeText" readonly="true"]

    (Button to invoke the click of the File Input)
    [input type="button" onclick="document.frmUpload.myFile.click();" value="Browse..." style="background:red;" /]
  [/form]

feel free to style the button/text input however you like...
On Wednesday, October 17, 2012 2:38:26 PM Imar Spaanjaars said:
Hi Conrad,

Take another look at the Update section at the top; it's likely that none of the code presented in this article still works.

Cheers,

Imar
On Wednesday, March 09, 2016 1:42:26 AM Any Old Iron said:
From what I can see: the reason that this does not work is that .click() just starts off the click action and then returns, it does not wait for a file to be selected. Thus the "document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;" that follows the .click() copies a blank, or previous .myFile.value, into .txtFakeText.value.

The solution is to move the .value assignment into a separate function and have this function called as an "onchange=" in the [input type="file" ...]. For example :-

  ...
  function HandleFileButtonClick()
  {
    document.frmUpload.myFile.click();
  }
  function HandleFileButtonSetValue()
  {
    document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
  }
...
[input type="file" name="myFile" onchange="HandleFileButtonSetValue()" style="display:none;"]
...
On Wednesday, March 09, 2016 7:36:29 AM Imar Spaanjaars said:
Hi Any,

This article is 13 years old and it's pretty much obsolete (as stated at the beginning). There are much better alternatives available these days.

Cheers,

Imar

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.