Rename/Style Browse button in

Recently I’m working on a web project which has bilingual requirement. One day, our end user gave me a requirement: can we make the file upload “Browse” button the same as other buttons? Here is the original HTML source code for “File upload”

<input type="file" name="file-to-upload" />

This what I get from IE (or Firefox) browser

Default Browse

Breaking down the requirement, actually the user is asking for

  1. Rename “Browse” to be “Parcourir” when it’s French.
  2. Style the button so it’s in green color, just like other buttons

Initially I thought it’s an easy task.

For item 1: just create a “fake” button (so I can rename the button label however I want it to be), upon clicking, then invoke the real file upload using Javascript.

For item 2: just apply some css style to the “fake” button.

But when I implementing it, I discovered more facts.

First, the “Browse button” is browser specific. For example,

  • Safari: “Choose File”
  • IE: “Browse…”
  • Firefox: “Browse…”
  • Opera: “Choose…”

Second, using Javascript to trigger the click() event on file handler doesn’t  work on all browsers, even the same browser behaviors differently in different versions.What happens is upon clicking, the file selection dialog does open, but once you’ve selected a file with it the form won’t actually submit. I don’t know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element?

Here is my code

<!--fake filename -->
<input type="text" id="filename" readonly="true"
onclick="document.getElementById('browse').click()" size="30">

<!--If you are using html only, here is the code -->
<input id="fakeBrowse" name="fakeBrowse" value="Customized Browse"
onclick="document.getElementById('browse').click()" type="button" >

<!-- hide the real file browse button -->
<stripes:file name="params.csvFile" id="browse" style="opacity:0;"
onchange="document.getElementById('filename').value=document.getElementById('browse').value;" >

So I did some research, found the answer here. In short, the only way to fake a file upload box is using the transparency technique.

So here is the code snippet

<input type="text" id="filename" readonly="true" size="30" style="vertical-align:top;" />
<input id="fake" name="fake" value="Browse" type="button" />
<input id="browse" style="font-size: 25px; width: 80px; opacity: 0; filter:alpha(opacity: 0);  position: relative; top: -5px;; left: -150px" name="params.csvFile" type="file" onchange="document.getElementById('filename').value=document.getElementById('browse').value;" />

And here is what is looks like in IE8 (note I purposely set opacity to 10 to show you the real “Browse” button (which is on top of the “fake” styled green “Browse” button)

Styled Browse

(Visited 25 times, 1 visits today)