Labeling file upload button

Question

How can I internationalize the button text of the file picker   For example  what this code presents to the user     lt input type  file       gt

User · Answer

much easier  use it       lt input type  button  id  loadFileXml  value  Custom Button Name onclick  document getElementById  file   click       gt   lt input type  file  style  display none   id  file  name  file   gt

User · Answer

It is normally provided by the browser and hard to change  so the only way around it will be a CSS JavaScript hack   See the following links for some approaches    http   www shauninman com archive 2007 09 10 styling file inputs with css and the dom http   www quirksmode org dom inputfile html http   www dreamincode net forums showtopic15621 htm

User · Answer

Pure CSS solution    x000D   x000D   inputfile   x000D       visibility  hidden etc  wont work    x000D    width  0 1px  x000D    height  0 1px  x000D    opacity  0  x000D    overflow  hidden  x000D    position  absolute  x000D    z-index  -1  x000D    x000D   inputfile focus   label   x000D       keyboard navigation    x000D    outline  1px dotted  000  x000D    outline  -webkit-focus-ring-color auto 5px  x000D    x000D   inputfile   label     x000D    pointer-events  none  x000D    x000D   lt input type  file  name  file  id  file  class  inputfile  gt  x000D   lt label for  file  gt Choose a file  Click me  lt  label gt  x000D   x000D   x000D    source  http   tympanus net codrops

User · Answer

To make a custom  browse button  solution simply try making a hidden browse button  a custom button or element and some Jquery  This way I m not modifying the actual  browse button  which is dependent on each browser version  Here s an example   HTML    lt div id  import  type  file  gt My Custom Button lt  div gt   lt input id  browser  class  hideMe  type  file  gt  lt  input gt    CSS    import     margin  0em 0em 0em  2em    content   Import Settings     display  inline-block    border  1px solid    border-color   ddd  bbb  999    border-radius  3px    padding  5px 8px    outline  none    white-space  nowrap    -webkit-user-select  none    cursor  pointer    font-weight  700    font  bold 12px 1 2 Arial sans-serif  important       fallback      background-color   f9f9f9       Safari 4-5  Chrome 1-9      background  -webkit-gradient linear  0  0   0  100   from  C2C1C1   to  2F2727        hideMe      display  none      JS       import   click function             browser   trigger  click            browser   change function                 alert     browser   val

User · Answer

I could achieve a button using jQueryMobile with following code    lt label for  ppt  data-role  button  data-inline  true  data-mini  true  data-corners  false  gt Upload lt  label gt   lt input id  ppt  type  file  name  ppt  multiple data-role  button  data-inline  true  data-mini  true  data-corners  false  style  opacity  0    gt    Above code creates a  Upload  button  custom text   On click of upload button  file browse is launched  Tested with Chrome 25  amp  IE9

User · Answer

You get your browser s language for your button  There s no way to change it programmatically

User · Answer

Take a step back   Firstly  you re assuming the user is using a foreign locale on their device  which is not a sound assumption for justifying taking over the button text of the file picker  and making it say what you want it to   It is reasonable that you want to control every item of language visible on your page   The content of the File Upload control is not part of the HTML though   There is more content behind this control  for example  in WebKit  it also says  No file chosen  next to the button   There are very hacky workarounds that attempt this  e g  like those mentioned in  ChristopheD s answer   but none of them truly succeed    To a screen reader  the file control will still say  Browse     or  Choose File   and a custom file upload will not be announced as a file upload control  but just a button or a text input  Many of them fail to display the chosen file  or to show that the user has no longer chosen a file Many of them look nothing like the native control  so might look strange on non-standard devices  Keyboard support is typically poor  An author-created UI component can never be as fully functional as its native equivalent  and the closer you get it to behave to suppose IE10 on Windows 7  the more it will deviate from other Browser and Operating System combinations   Modern browsers support drag  amp  drop into the native file upload control  Some techniques may trigger heuristics in security software as a potential    click-jacking    attempt to trick the user into uploading file    Deviating from the native controls is always a risky thing  there is a whole host of different devices your users could be using  and whatever workaround you choose  you will not have tested it in every one of those devices   However  there is an even bigger reason why all attempts fail from a User Experience perspective  there is even more non-localized content behind this control  the file selection dialog itself   Once the user is subject to traversing their file system or what not to select a file to upload  they will be subjected to the host Operating System locale   Are you sure you re doing your user any justice by deviating from the native control  just to localize the text  when as soon as they click it  they re just going to get the Operating System locale anyway   The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control    e g  Form field label  hint text  tooltip text    Sorry   -   --  This answer is for those looking for any justification not to localise the file upload control

[html] Labeling file upload button

Examples related to html

Examples related to internationalization

Examples related to dialog