change the text of browse button in file upload control

lale.kat · Nov 28, 2007

Hi.I want to change the text of browse button in file upload control
in firfox,for example insted of being "browse" be "upload file", how
can I do that?
Is it possible ?I found a code that only works in IE but it doesent
work in fireFox, I want to work in both of them.

<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" encType="multipart/form-data">

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

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

<input type="button" onclick="HandleFileButtonClick();"
value="Upload File" >
</form>
</body>
</html>
-----------------

Steve Swift · Nov 28, 2007

Hi.I want to change the text of browse button in file upload control
in firfox,for example insted of being "browse" be "upload file", how
can I do that?

They've gone to a lot of trouble to stop me using the mechanism you're
looking for to build a website that tells you to enter the file
containing all your bank details then pressing the "Encrypt" button.

VK · Nov 28, 2007

(e-mail address removed) said the following on 11/28/2007 1:16 AM:

You can't.

No.

What use to hide a secret if it's on the Internet? If IE/Gecko decides
that it is a security flaw then let them fix it.

http://www.quirksmode.org/dom/inputfile.html

Kailash Nadh · Nov 28, 2007

Hi.I want to change the text of browse button in file upload control
in firfox,for example insted of being "browse" be "upload file", how
can I do that?
Is it possible ?I found a code that only works in IE but it doesent
work in fireFox, I want to work in both of them.

<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" encType="multipart/form-data">

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

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

<input type="button" onclick="HandleFileButtonClick();"
value="Upload File" >
</form>
</body>
</html>
-----------------

It is not possible to tamper with the Browse button for security
reasons. But if you are that desperate, well, you could try using a
Flash to upload files

http://www.flash-db.com/Tutorials/upload/upFiles.php

VK · Nov 28, 2007

It is not possible to tamper with the Browse button for security
reasons.

It is well possible to do using CSS/JavaScript or just CSS: see the
link I posted. Also in IE7 input type="file" is now finally treated as
two separate elements for styling: the input field and the button
itself. But if one needs not just styling but a custom button label as
well then he needs to stick to the linked solution. I personally would
offend to any label changes from the usability point of view, but
anyone is entitled to go to the hell by his own road

VivianAranha · Nov 28, 2007

Here is what you are looking for

http://www.quirksmode.org/dom/inputfile.html

Kailash Nadh · Nov 28, 2007

Here is what you are looking for

http://www.quirksmode.org/dom/inputfile.html

Ah, quirksmode, I even remember trying that particular hack once.
Sorry, totally lost it.

Thomas 'PointedEars' Lahn · Nov 29, 2007

VivianAranha said:
Here is what you are looking for

http://www.quirksmode.org/dom/inputfile.html

However, that dirty hack does not conform
to accessibility guidelines and legislation.

PointedEars

baig · Dec 12, 2007

I have used the above mentioned code in my application and it is
working fine; it perfectly wrapps the file controls but when I try to
submit the form it gives me this error dialog:

-----------------------------------
A Runtime Error has occured.
Do you wish to Debug?

Line 40
Error: Access is denied.

-----------------------------------

My application HTML and JS code is as follows:

----------------- JAVASCRIPT -------------------------

function uploadFiles(SUBJ_ID,SEV_ID,HELPDESK_ID,TRANS_ID)
{
document.myForm.encoding = "multipart/form-data";
document.myForm.action='test.jsp';
document.myForm.submit(); <------------------------------THIS IS
LINE 40
}

----------------- HTML -------------------------

<tr>

<td width="5%">
<a href="javascript:window.uploadFiles()" class="tablelink" >
<img src="Upload.jpg" >
</a>
</td>

<td width="94%">
<a name="ANCHOR_FILE_NAME">
<input type="file" name="FILE_NAME" style="display:
none;">
<input type="text" name="file">
<input type="button"
onClick="FILE_NAME.click();file.value=FILE_NAME.value;" value="Select
a File..." >
</a>
</td>

</tr>

hange the text of browse button in file upload control	1	Nov 28, 2007
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Image upload not working in browser	4	Sep 9, 2022
In javascript, XML File Create, File Save	2	Jul 17, 2023
JSON problem on Supervideo.tv remote upload app	4	Jun 20, 2020
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
I want to Display Excel As HTML In js	2	Feb 24, 2023
Check forms With JavaScript	1	Mar 28, 2023

change the text of browse button in file upload control

lale.kat

Steve Swift

VK

Kailash Nadh

VK

VivianAranha

Kailash Nadh

Thomas 'PointedEars' Lahn

baig

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads