asked on

Custom BROWSE button caption in INPUT TYPE='FILE'

I am using the following HTML to upload a file

<form name="upload" action="catalogphoto.php" method="POST" enctype="multipart/form-data">
<table>
<tr><td><span>Select photo to upload:</span></td>
<td><input type="text" ID="imgfilename" readonly="1" value="">

<INPUT TYPE="file" ID="imgfile" NAME="imgfile" STYLE="display:none" onChange="imgfilename.value = this.value;">
<input type="button" onClick="imgfile.focus(); imgfile.click();" value="Choose image file..."></td></tr>

<tr><td colspan="2" align="right"><input type="submit" value="UPLOAD"></td></tr>
</table>
</form>

However it does NOT work in IE 6.0.2800.1106 on Win98SE.

When I press the submit button the value of imgfile file-type input is cleared and form is not posted. On second click no file is posted to server.

ASKER CERTIFIED SOLUTION

webwoman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zlatin Zlatev

ASKER

I was afraid of that... :(((

Zlatin Zlatev

ASKER

Anyway I will kepp this open for 7 days if there is expert with a workaround suggestion. (hope dies last < grim > )

gator4life

Just for effect, I will second webwoman's response...you can't alter the "Browse..." button in any way. You can't script it, you can't style it, etc. It is impossible as of the current browsers go. Maybe in future versions, they will at least give us an opportunity to style it, so that the file upload control can match overall styles schemes.

gator4life
(chomp, chomp)

COBOLdinosaur

That code used to work because there was a security hole in IE (what else is new?) but it has been fixed and the behaviour of the browse button is back to what it is supposed to be.

Cd&

Zlatin Zlatev

ASKER

Well I wanted to change the caption so that to have multiple languages of a page... And more descriptive caption. But I (and our customers) will live with "Browse" caption of the button.

It's shame that it cannot be styled and that there is no title, caption or whatever atribute for changing Browse button caption.

I am assigning the points to webwoman because she was first.

Kind Regards,
Zlatin Zlatev

Zlatin Zlatev

ASKER

However if someone has a solution for this (even if it requires additional component) drop me a line here and I'll repost the question.

ELECTRON

mmm///

Zlatin Zlatev

ASKER

pardon? what kind of "hack"? how do you determine what is "hack" and what is not?

COBOLdinosaur

Anything that tricks the user to get around browser security is a hack and a violation of the user rights; and THAT KIND OF CODE IS NOT GOING BE ALLOWED ON THIS SITE.

COBOLdinosaur
Page Editor, Javascript

Zlatin Zlatev

ASKER

OK I would like to know if there is a setting of browser security that will allow the user to use such a code. Suppose this code is used on a intranet...

COBOLdinosaur

If you are on an intranet. You use IEAK to customize the security settings and you can do pretty much anything you want, or you build a custom activeX control.

Cd&

Darren Kattan

This is an outdated post, but styling an input=file is doable with some finesse. You wrap the <input type="file"> in another element, like a span, div, li, whatever. Set the container element to have an image background with the input file and browse button styled like you want it, then set the opacity of the <inpute type="file" /> to opacity=0; in your CSS. This makes the area look like your custom styling, but the user is actually clicking the transparent type=file input box.

This is a horrible explanation, but hopefully you get the idea.