How to change the button text of input type file

Question

lt input type  file  value  Browse  name  avatar  id  id avatar    gt    I tried to modify the value  but it s not working  How to customize the button text

User · Answer

Only CSS  amp  bootstrap class           lt div class  col-md-4 input-group  gt               lt input class  form-control  type  text   gt               lt div class  input-group-btn  gt                   lt label for  files  class  btn btn-default  gt browse lt  label gt                   lt input id  files  type  file  class  btn btn-default   style  visibility hidden    gt               lt  div gt           lt  div gt

User · Answer

Use  lt label gt  for the caption   lt form enctype  multipart form-data  action   uploads php  method post gt   lt label for b1 gt       lt u gt Your lt  u gt  caption here  lt input style  width 0px  type file name upfile id b1  onchange  optionalExtraProcessing b1 files 0     accept  image png  gt   lt  label gt   lt  form gt    This works without any javascript  You can decorate the label to any degree of complexity  to your heart s content  When you click on the label  the click automatically gets redirected to the file input  The file input itself can be made invisible by any method  If you want the label to appear like a button  there are many solutions  e g    label u       -webkit-appearance  button      -moz-appearance  button      appearance  button       text-decoration  none      color  initial

User · Answer

I know  nobody asked for it but if anybody is using bootstrap  it can be changed through Label and CSS Pseudo-selector  For changing button text   custom-file-label  after     content   quot What s up  quot      For changing field text   lt label class  quot custom-file-label quot  for  quot upload quot  gt Drop it like it s hot lt  label gt   Here s a fiddle

User · Answer

In Bootstrap  4 5 you can simply add bellow style to your code   lt style gt       custom-file-input    custom-file-label  after           content   quot Your custom text     quot          lt  style gt   and your input   lt div class  quot custom-file quot  gt       lt input type  quot file quot  class  quot custom-file-input quot  gt       lt label class  quot custom-file-label quot  gt Your custom placeholder     lt  label gt   lt  div gt

User · Answer

EDIT  I see now by the comments that you are asking about the button text  and not the file path  My bad  I ll leave my original answer below in case someone else who stumbles upon this question interprets it the way I originally did   2nd EDIT  I had deleted this answer because I decided that I misunderstood the question and my answer was not relevant  However  comments in another answer indicated that people still wanted to see this answer so I m undeleting it   MY ORIGINAL ANSWER  I thought the OP was asking about the path  not the button text    This is not a supported feature for security reasons  The Opera web browser used to support this but it was removed  Think about what would be possible if this were supported  You could make a page with a file upload input  pre-populate it with a path to some sensitive file and then auto-submit the form using javascript triggered by the onload event  This would happen too fast for the user to do anything about it

User · Answer

You can simply add some css trick  you don t need javascript or more input files and i keep existing value attribute  you need to add only css  you can try this solution    x000D   x000D   btn-file-upload  x000D       width  187px  x000D       position relative  x000D     x000D   x000D   btn-file-upload after  x000D      content   attr value   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      bottom  0      x000D      width  48   x000D      background   795548  x000D      color  white  x000D      border-radius  2px  x000D      text-align  center  x000D      font-size  12px  x000D      line-height  2  x000D     x000D   lt input type  file  class  btn-file-upload  value  Uploadfile    gt  x000D   x000D   x000D

User · Answer

Use Bootstrap FileStyle  which is used to style the file fields of forms  It is a plugin for a jQuery-based component library called Twitter Bootstrap  Sample usage   Include    lt script type  text javascript  src  js bootstrap-filestyle min js  gt   lt  script gt    Via JavaScript       file   filestyle      Via data attributes    lt input type  file  class  filestyle  data-classButton  btn btn-primary  data-input  false  data-classIcon  icon-plus  data-buttonText  Your label here   gt

User · Answer

The  upload file     text is pre-defined by the browser and can t be changed  The only way to get around this is to use a Flash- or Java-based upload component like swfupload

User · Answer

Works Perfectly on All Browsers Hope it will work for you too   HTML   lt input type  file  class  custom-file-input  gt   CSS      custom-file-input  -webkit-file-upload-button     visibility  hidden     custom-file-input  before     content   Select some files     display  inline-block    background  -webkit-linear-gradient top   f9f9f9   e3e3e3     border  1px solid  999    border-radius  3px    padding  5px 8px    outline  none    white-space  nowrap    -webkit-user-select  none    cursor  pointer    text-shadow  1px 1px  fff    font-weight  700    font-size  10pt     custom-file-input hover  before     border-color  black     custom-file-input active  before     background  -webkit-linear-gradient top   e3e3e3   f9f9f9       Change content   Select some files   with the text you want within     IF NOT WORKING WITH firefox then use this instead of input    lt label class  custom-file-input  for  Upload   gt   lt  label gt    lt input id  Upload  type  file  multiple  multiple  name   photos  accept  image    style  visibility  hidden  gt

User · Answer

You can put an image instead  and do it like this   HTML    lt img src   images uploadButton png  id  upfile1  style  cursor pointer    gt   lt input type  file  id  file1   name  file1  style  display none    gt    JQuery       upfile1   click function              file1   trigger  click          CAVEAT  In IE9 and IE10 if you trigger the onClick in a file input via javascript  the form will be flagged as  dangerous  and cannot be submitted with javascript  not sure if it can be submitted traditionally

User · Answer

I did it like this for my project   x000D   x000D   btn-outlined btn-primary   x000D    color   000  x000D    x000D   btn-outlined btn-primary active   btn-outlined btn-positive active   btn-outlined btn-negative active   x000D    color  000  x000D    x000D   btn-block   x000D    display  block  x000D    width  100   x000D    padding  15px 0  x000D    margin-bottom  10px  x000D    font-size  18px  x000D    font-family  Arial  Helvetica  sans-serif  x000D    text-align  center  x000D    x000D   lt label for  fileUpload  class  btn btn-primary btn-block btn-outlined  gt Your text lt  label gt  x000D   lt input type  file  id  fileUpload style  display  none   gt  x000D   x000D   x000D

User · Answer

Before that  lt input type  file  gt   add an image and  lt input style  position absolute  gt  it will occupy the space of  lt input type  file  gt  Use the following CSS to the file element       position relative    opacity 0    z-index 99

User · Answer

This is a JQuery plugin to change the button text of an input file element   Example HTML    lt input type  file  id  choose-file    gt    Example JS       choose-file   inputFileText       text   Select File        Result

User · Answer

Hide the file input  Create a new input to capture a click event and forward it to the hidden input    lt input type  button  id  loadFileXml  value  loadXml  onclick  document getElementById  file   click       gt   lt input type  file  style  display none   id  file  name  file   gt

User · Answer

Here is a way to  change  the text of an input with file type  with pure HTML and javascript    lt input id  browse  type  file  style  width 0px  gt   lt button id  browser  onclick  browse click    gt       The text you want   lt  button gt

User · Answer

I think this is what you want       lt button style  display block width 120px  height 30px   onclick  document getElementById  getFile   click    gt Your text here lt  button gt     lt input type  file  id  getFile  style  display none  gt

User · Answer

lt input id  uploadFile  placeholder  Choose File  disabled  disabled    gt   lt div class  fileUpload btn btn-primary  gt       lt span gt Your name lt  span gt       lt input id  uploadBtn  type  file  class  upload    gt   lt  div gt    JS  document getElementById  uploadBtn   onchange   function          document getElementById  uploadFile   value   this value        more http   geniuscarrier com how-to-style-a-html-file-upload-button-in-pure-css

User · Answer

if you using rails and have problem apply it  I would like to add some tips from original answer posted by  Fernando Kosh   Download file zip and copy file bootstrap-filestyle min js ke folder app assets javascripts  open your application js and add this line below      require bootstrap-filestyle min open your coffee and add this line      file   filestyle  buttonName   btn-primary  buttonBefore  true buttonText    Your text here  icon  false

User · Answer

for me it does not work the custom text with bootstrap-filestyle  It help with button decoration but text its weird to be changed  before get into wrestling with css i try the following       document   ready function            buttonText   html  Seleccione ficheros          bootstrap-filestyle render the component as span with a class named butonText  so when document load just change the text  easy right and it must work on all browsers    cheers

User · Answer

This is an alternative solution that may be of help to you  This hides the text that appears out of the button  mixing it with the background-color of the div  Then you can give the div a title you like    lt div style  padding 10px font-weight bolder  background-color  446655 color  white margin-top 10px width 112px overflow  hidden   gt       UPLOAD IMAGE  lt input style  width 100px color  446655 display  inline   type  file     gt   lt  div gt

User · Answer

Simply    lt label class  btn btn-primary  gt     lt i class  fa fa-image  gt  lt  i gt  Your text here lt input type  file  style  display  none    name  image  gt   lt  label gt     Edit with snippet    x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt link href  https   stackpath bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   lt label class  btn btn-primary  gt  x000D   lt i class  fa fa-image  gt  lt  i gt  Your text here lt input type  file  style  display  none   name  image  gt  x000D   lt  label gt  x000D   x000D   x000D

[html] How to change the button text of <input type="file" />?

Examples related to html

Examples related to input