function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
chris_centrachris_centra 

inputFile - lang attribute?

Hello.  I have a multi-language site which uses the apex:inputFile tag.  I set the lang attribute, but i'm not sure how/where to enter the translation for the "Browse" button?

 

I found a related forum thread which suggests that it's not possible using standard sfdc, but then i'm not sure why there is a lang attribute...(http://boards.developerforce.com/t5/Visualforce-Development/How-can-we-change-the-value-of-browse-button/m-p/161034) 

 

Anyone familiar with this?

 

Thanks for your time

Chris

kiranmutturukiranmutturu
chris_centrachris_centra

Krian -

 

Thanks for the reply - i saw this in the other post but haven't tried it yet.  Does anyone know why there is a "lang" attirbute in the inputFile tag?  i'll see what support says.

 

Thanks

Chris

bob_buzzardbob_buzzard

This is browser behaviour rather than anything to do with Visualforce.  The underlying HTML element (input type="file") automatically generates a button with the "Browse" text in it, which is immune to styling and javascript.  The reason behind this is that if the input tag was under the control of the page, malicious pages could either trick the user into uploading a file unintentionally, or javascript could take control and upload a file at will.

 

I believe that the browser is responsible for the translation of this button based on the user's locale, but I've not tested that.

 

There are tricks to get around this that rely on positioning some text over the top of the button - I don't know how reliably this would work cross browser, but there's an example here:

 

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

Vinnie BVinnie B

"I believe that the browser is responsible for the translation of this button based on the user's locale, but I've not tested that."

 

Indeed it is!  I couldn't figure out why my sandbox and production showed different values because I'd imported the code directly from the one to the other.  The reason is because I'm rather religious about doing production work in Firefox and sandbox work in Chrome.  Thanks to your post, I logged into production in Chrome and it then looked the same as my sandbox.

 

Chrome; Button = "Browse...", Default Text = "No file selected."

 

Firefox; Button = "Choose File", Default Text = "No file chosen"

Rajiv BhattRajiv Bhatt
It is not a straight forward solution.

The solution is to :

1.create a custom input text element with the standard button styling
2.overlay that element on top of the "choose file" button
3. write javascript code to handle the click on the custom element
4. trigger the click() of standard "choose file" when custom element is clicked.

You may find the solution described in detail with code on my blog post --> https://sfdc-gyaan.rhcloud.com/2014/05/renamingoverriding-choose-filebrowse-button-in-salesforce/

I hope this helps. Let me know if you face any issues implementing it.
Atul Sharma 106Atul Sharma 106
Hello,

I was facing the same issue and realized there is no way to change/translate "Choose File" label unless you change the browser language itself however in Salesforce mostly we prefer to use Labels and picklist translations to make Salesforce UI user friendly so that unexpected translation doesn't spoils the user experience.

Here is the work around is to create a div (or any other html component), override the div on top of input file and bind both input file and div in a label.

Simply copy the below sample code in HTML/VisualForce Page/Lightning component and translate the label on the div:

<label style="display: inline-block;position: relative;height: 50px;width: 250px;" for="inputFile">
<div style="position: absolute;left: 0;top: 0;bottom: 0;width: 100%;display: flex;border-radius: 10px;align-items: center;justify-content: center;background: #ccc;border: 3px dotted #bebebe;">
Click or drop something here
</div>
<input style="position: absolute;left: 0;opacity: 0;top: 0;bottom: 0;width: 100%;" type="file" id="inputFile"/>