Change default text in input type file

Question

I want to change default text on button that is "Choose File" when we use input="file".

enter image description here

How can I do this? Also as you can see in image button is on left side of text. How can I put it on right side of text?

User · Answer

x000D   x000D    document  ready function      x000D       choose-file   change function      x000D    var i     this  prev  label   clone    x000D    var file       choose-file   0  files 0  name  x000D      this  prev  label   text file   x000D        x000D       x000D   custom-file-upload  x000D    background   f7f7f7   x000D    padding  8px  x000D    border  1px solid  e3e3e3   x000D    border-radius  5px   x000D    border  1px solid  ccc   x000D    display  inline-block  x000D    padding  6px 12px  x000D    cursor  pointer  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D  can you try this x000D   x000D   lt label for  choose-file  class  custom-file-upload  id  choose-file-label  gt  x000D     Upload Document x000D   lt  label gt  x000D   lt input name  uploadDocument  type  file  id  choose-file   x000D     accept   jpg  jpeg  pdf doc docx application msword  png  style  display  none     gt  x000D   x000D   x000D

User · Answer

Let me add a hack I used  I wanted to have a section that allowed you to drag and drop files  and I wanted that drag and drop section to be clickable along with the original upload button    Here is how it looked like when I was done  minus the drag and drop ability  there are plenty of tutorials on how to do that    And then I actually created a series of blog posts that are mainly about file upload buttons

User · Answer

Use  for  attribute of label for input     lt div gt     lt label for  files  class  btn  gt Select Image lt  label gt     lt input id  files  style  visibility hidden   type  file  gt   lt  div gt    Below is the code to fetch name of the uploaded file     x000D   x000D      files   change function     x000D    filename   this files 0  name x000D    console log filename   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D         lt label for  files  class  btn  gt Select Image lt  label gt  x000D         lt input id  files  style  visibility hidden   type  file  gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Ok so very simple pure css way of creating your custom input file.

Use labels, but as you know from previous answers, label doesn't invoke onclick function in firefox, may be a bug but doesn't matter with the following.

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

What you do is style the label to look how you want it to

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

now simply hide the actual input button, but you cant set it to to visability: hidden

So make in invisible by setting opacity: 0;

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

now as you might have noticed i have the same class on my label as i do my input field, that is because i want the to both have the same styling, thus where ever you click on the label, you are actually clicking on the invisible input field.

User · Answer

I think this is what you want   x000D   x000D   lt  DOCTYPE html gt   lt html gt    lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  gt     lt title gt JS Bin lt  title gt   lt  head gt    lt body gt     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   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

Here how you can do it   jQuery      function           labelfile   click function             imageupl   trigger  click               css   file     position  absolute    clip  rect 0px  0px  0px  0px     display  block     labelfile     color   333    background-color   fff    display  inline-block    margin-bottom  0    font-weight  400    text-align  center    vertical-align  middle    cursor  pointer    background-image  none    white-space  nowrap    padding  6px 8px    font-size  14px    line-height  1 42857143    -webkit-user-select  none    -moz-user-select  none    -ms-user-select  none    user-select  none      HTML code    lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt div style  margin-top 4px   gt     lt input name  imageupl  type  file  id  imageupl  class  file    gt     lt label class  labelfile  id  labelfile  gt  lt i class  icon-download-alt  gt  lt  i gt  Browse File lt  label gt   lt  div gt

User · Answer

I d use a button to trigger the input    lt button onclick  document getElementById  fileUpload   click    gt Open from File    lt  button gt   lt input type  file  id  fileUpload  name  files  style  display none    gt    Quick and clean

User · Answer

I made a script and published it at GitHub: get selectFile.js Easy to use, feel free to clone.

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

DEMO

jsfiddle.net/Thielicious/4oxmsy49/

User · Answer

Here is how its done with bootstrap  only u should put the original input somewhere   idk  in head and delete the  lt  br   if you have it  because its only hidden and its taking space anyway      x000D   x000D    lt head gt   x000D    lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  integrity  sha384-Vkoo8x4CGsO3 Hhxv8T Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh  crossorigin  anonymous  gt  x000D    lt  head gt  x000D    x000D    lt label for  file  button type  file  name  image  class  btn btn-secondary  gt Secondary lt  button gt   lt  label gt  x000D       x000D    lt input type  file  id  file  name  image  value  Prebrskaj  style  visibility hidden   gt  x000D    x000D    x000D    lt footer gt  x000D    x000D    lt script src  https   code jquery com jquery-3 4 1 slim min js  integrity  sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  integrity  sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 4 1 js bootstrap min js  integrity  sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6  crossorigin  anonymous  gt  lt  script gt  x000D    x000D    lt  footer gt  x000D   x000D   x000D

User · Answer

It is not possible  Otherwise you may need to use Silverlight or Flash upload control

User · Answer

My solution     HTML     lt input type  file  id  uploadImages  style  display none   multiple gt    lt input type  button  id  callUploadImages  value  Select  gt   lt input type  button  id  uploadImagesInfo  value  0 file s    disabled gt   lt input type  button  id  uploadProductImages  value  Upload  gt    Jquery       callUploadImages   click function             uploadImages   click             uploadImages   change function         var uploadImages     this           uploadImagesInfo   val uploadImages 0  files length   file s            This is just evil  D

User · Answer

Each browser has it s own rendition of the  control and as such you can t change either the text or the orientation of the control   There are some  kind of  hacks you may want to try if you want an html css solution rather than a Flash or silverlightsolution   http   www quirksmode org dom inputfile html  http   www shauninman com archive 2007 09 10 styling file inputs with css and the dom  Personally  because most users stick to their browser of choice  and therefore are probably used to seeing the control in the default rendition  they d probably get confused if they saw something different  depending on the types of users you re dealing with

User · Answer

This might help someone in the future  you can style the label for the input as you like and put anything you want inside it and hide the input with display none   It works perfectly on cordova with iOS   x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs ratchet 2 0 2 css ratchet css  rel  stylesheet   gt  x000D   lt label for  imageUpload  class  btn btn-primary btn-block btn-outlined  gt Seleccionar imagenes lt  label gt  x000D   lt input type  file  id  imageUpload  accept  image    style  display  none  gt  x000D   x000D   x000D

User · Answer

Using Bootstrap you can do this thing like below code    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt style gt    btn-file     position  relative    overflow  hidden     btn-file input type file        position  absolute      top  0      right  0      min-width  100       min-height  100       font-size  100px      text-align  right      filter  alpha opacity 0       opacity  0      outline  none      background  white      cursor  inherit      display  block     lt  style gt     lt title gt Bootstrap Example lt  title gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  stylesheet  href  http   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt     lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt   lt  head gt   lt body gt     lt span class  btn btn-file  gt Upload image from here lt input type  file  gt   lt  body gt   lt  html gt

User · Answer

This should work   input  className   -webkit-file-upload-button      style content

User · Answer

You can use this approach  it works even if a lot of files inputs    x000D   x000D  const fileBlocks   document querySelectorAll   file-block   x000D  const buttons   document querySelectorAll   btn-select-file   x000D   x000D       buttons  forEach function  btn    x000D    btn onclick   function      x000D      btn parentElement querySelector  input type  file     click   x000D      x000D     x000D   x000D       fileBlocks  forEach function  block    x000D    block querySelector  input type  file     onchange   function      x000D      const filename   this files 0  name x000D   x000D      block querySelector   btn-select-file   textContent    File selected      filename x000D      x000D     x000D   btn-select-file   x000D    border-radius  20px  x000D    x000D   x000D  input type  file     x000D    display  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  file-block  gt  x000D     lt button class  btn-select-file  gt Select Image 1 lt  button gt  x000D     lt input type  file  gt  x000D   lt  div gt  x000D   lt br gt  x000D   lt div class  file-block  gt  x000D     lt button class  btn-select-file  gt Select Image 2 lt  button gt  x000D     lt input type  file  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Update 2017   I have done research on how this could be achieved  And the best explanation tutorial is here  https   tympanus net codrops 2015 09 15 styling-customizing-file-inputs-smart-way   I ll write summary here just in case it becomes unavailable  So you should have HTML    lt input type  file  name  file  id  file  class  inputfile    gt   lt label for  file  gt Choose a file lt  label gt    Then hide the input with CSS    inputfile   width  0 1px  height  0 1px  opacity  0  overflow  hidden  position  absolute  z-index  -1     Then style the label    inputfile   label   font-size  1 25em  font-weight  700  color  white  background-color  black  display  inline-block      Then optionally you can add JS to display the name of the file   var inputs   document querySelectorAll    inputfile     Array prototype forEach call  inputs  function  input     var label      input nextElementSibling      labelVal   label innerHTML   input addEventListener   change   function  e         var fileName           if  this files  amp  amp  this files length  gt  1           fileName     this getAttribute   data-multiple-caption            replace    count    this files length        else         fileName   e target value split         pop         if  fileName           label querySelector   span    innerHTML   fileName      else         label innerHTML   labelVal            But really just read the tutorial and download the demo  it s really good

User · Answer

lt button class  styleClass  onclick  document getElementById  getFile   click    gt Your text here lt  button gt   lt input type  file  id  getFile  style  display none  gt    This is still the best so far

[html] Change default text in input type="file"?

The answer is

I think this is what you want:

Examples related to html

Examples related to file

Examples related to input

Examples related to default-value

Tags