Bootstrap 4 File Input

Question

I am struggling with bootstrap 4 file browser  If I use custom-file-control I will see Choose file value all the time   https   v4-alpha getbootstrap com components forms  file-browser  I would like to change the value of choose file after the file has been chosen  This value is actually hidden in css  custom-file-control lang en   after and I do not know how to access and change it in javascript  I can get the value of chosen file like this   document getElementById  exampleInputFile   value split       pop      not I need to change    custom-file-control lang en   after       content   Choose file          somehow  link  http   codepen io Matoo125 pen LWobNp

User · Answer

With the help of jquery  it can be done like this  Code      input custom-file-input   on  change  function   if this files length  var filename this file 0  name if filename length gt 23  filename filename substr 0 11        filename substr -10     this  siblings   custom-file-label   text filename

User · Answer

Bootstrap 4  More details are here https   learncodeweb com snippets browse-button-in-bootstrap-4-with-select-image-preview   Today I need to create a browse button with multi-upload files option all above snippets are not good for me   The official Bootstrap example is also not working when I select multiple files   I come up with this code may be will help others in the future    lt div class  container mt-5  gt     lt h1 class  text-center  gt Bootstrap 4 Upload multiple files lt  h1 gt     lt div class  col-sm-4 mr-auto ml-auto border p-4  gt     lt form method  post  enctype  multipart form-data  action  upload php  gt       lt div class  form-group  gt         lt label gt  lt strong gt Upload Files lt  strong gt  lt  label gt         lt div class  custom-file  gt           lt input type  file  name  files    multiple class  custom-file-input form-control  id  customFile  gt           lt label class  custom-file-label  for  customFile  gt Choose file lt  label gt         lt  div gt       lt  div gt       lt div class  form-group  gt         lt button type  submit  name  upload  value  upload  id  upload  class  btn btn-block btn-dark  gt  lt i class  fa fa-fw fa-upload  gt  lt  i gt  Upload lt  button gt       lt  div gt     lt  form gt   lt  div gt    The js code is given below     document  ready function          input type  file     on  change   function         let filenames           let files   document getElementById  customFile   files      if  files length  gt  1          filenames push  Total Files      files length               else         for  let i in files            if  files hasOwnProperty i               filenames push files i  name                                 this         next   custom-file-label          html filenames join                    The working code example is given here with bootstrap 3 and bootstrap 4 3 1   https   codepen io mianzaid pen GeEbYV

User · Answer

Bootstrap 4 4   Show a choose file bar  After a file is chosen show the file name along with its extension   lt div class  custom-file  gt       lt input type  file  class  custom-file-input  id  idEditUploadVideo       onchange      idFileName   html this files 0  name   gt       lt label class  custom-file-label  id  idFileName  for  idEditUploadVideo  gt Choose file lt  label gt   lt  div gt

User · Answer

I just add this in my CSS file and it works    custom-file-label  after content   New Text Button   important

User · Answer

For changing the language of the file browser  As an alternate to what ZimSystem mentioned  override the CSS   a more elegant solution is suggested by the bootstrap docs  build your custom bootstrap styles by adding languages in SCSS Read about it here  https   getbootstrap com docs 4 0 components forms  file-browser  Note  you need to have the lang attribute properly set in your document for this to work  For updating the value on file selection  You could do it with inline js like this       lt label class  custom-file  gt         lt input type  file  id  myfile  class  custom-file-input  onchange    this  next   after   text   this  val   split       slice -1  0    gt         lt span class  custom-file-control  gt  lt  span gt      lt  label gt    Note  the  split       slice -1  0  part removes the C  fakepath  prefix

User · Answer

For Bootstrap v 5 document querySelectorAll   form-file-input            forEach el   gt  el addEventListener  change   e   gt  e target parentElement querySelector   form-file-text   innerText   e target files 0  name     Affect all file input element  No need to specify elements id

User · Answer

Without JQuery  HTML    lt INPUT type  file  class  custom-file-input   onchange  return onChangeFileInput this    gt    JS   function onChangeFileInput elem     var sibling   elem nextSibling nextSibling    sibling innerHTML elem value    return true      KliG

User · Answer

Here is the answer with blue box-shadow border outline removed with file name fix in custom-file input of bootstrap appear on choose filename and if you not choose any file then show No file chosen    x000D   x000D        document  on  change    input type  file     function  event     x000D          var filename     this  val    x000D          if  filename    undefined    filename         x000D            this  next   custom-file-label   html  No file chosen    x000D            x000D          else  x000D              this  next   custom-file-label   html event target files 0  name     x000D          x000D      input type file  focus  custom-file-input focus  custom-file-label   x000D          outline none important  x000D          border-color  transparent  x000D          box-shadow  none important  x000D        x000D       custom-file  x000D       custom-file-label  x000D       custom-file-input   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       lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D       lt div class  container py-5  gt  x000D       lt div class  input-group mb-3  gt  x000D         lt div class  input-group-prepend  gt  x000D           lt span class  input-group-text  gt Upload lt  span gt  x000D         lt  div gt  x000D         lt div class  custom-file  gt  x000D           lt input type  file  class  custom-file-input  id  inputGroupFile01  gt  x000D           lt label class  custom-file-label  for  inputGroupFile01  gt Choose file lt  label gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

You can try below given snippet to display the selected file name from the file input type   document querySelectorAll  input type file    forEach  input   gt        input addEventListener  change   e   gt            e target nextElementSibling innerText   input files 0  name

User · Answer

As of Bootstrap 4 3 you can change placeholder and button text inside the label tag    x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  custom-file  gt  x000D     lt input type  file  class  custom-file-input  id  exampleInputFile  gt  x000D     lt label class  custom-file-label  for  exampleInputFile  data-browse   Your button text   gt  Your placeholder text  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I just solved it this way  Html    lt div class  custom-file  gt      lt input id  logo  type  file  class  custom-file-input  gt      lt label for  logo  class  custom-file-label text-truncate  gt Choose file    lt  label gt   lt  div gt    JS       custom-file-input   on  change   function         let fileName     this  val   split       pop          this  next   custom-file-label   addClass  selected   html fileName          Note  Thanks to ajax333221 for mentioning the  text-truncate class that will hide the overflow within label if the selected file name is too long

User · Answer

Updated 2021 Bootstrap 5 Custom file input no longer exists so to change Choose file    you d need to use JS or some CSS like this  Bootstrap 4 4 Displaying the selected filename can also be done with plain JavaScript  Here s an example that assumes the standard custom-file-input with label that is the next sibling element to the input    document querySelector   custom-file-input   addEventListener  change  function e     var fileName   document getElementById  quot myInput quot   files 0  name    var nextSibling   e target nextElementSibling   nextSibling innerText   fileName     https   codeply com p LtpNZllird Bootstrap 4 1  Now in Bootstrap 4 1 the  quot Choose file    quot  placeholder text is set in the custom-file-label   lt div class  quot custom-file quot  id  quot customFile quot  lang  quot es quot  gt           lt input type  quot file quot  class  quot custom-file-input quot  id  quot exampleInputFile quot  aria-describedby  quot fileHelp quot  gt           lt label class  quot custom-file-label quot  for  quot exampleInputFile quot  gt             Select file             lt  label gt   lt  div gt   Changing the  quot Browse quot  button text requires a little extra CSS or SASS  Also notice how language translation works using the lang  quot  quot  attribute   custom-file-input    custom-file-label  after       content   quot Button Text quot      https   codeply com go gnVCj66Efp  CSS  https   codeply com go 2Mo9OrokBQ  SASS  Another Bootstrap 4 1 Option Alternatively you can use this custom file input plugin https   www codeply com go uGJOpHUd8L file-input  Bootstrap 4 Alpha 6  Original Answer  I think there are 2 separate issues here    lt label class  quot custom-file quot  id  quot customFile quot  gt           lt input type  quot file quot  class  quot custom-file-input quot  gt           lt span class  quot custom-file-control form-control-file quot  gt  lt  span gt   lt  label gt   1 - How the change the initial placeholder and button text In Bootstrap 4  the initial placeholder value is set on the custom-file-control with a CSS pseudo   after element based on the HTML language  The initial file button  which isn t really a button but looks like one  is set with a CSS pseudo   before element  These values can be overridden with CSS    customFile  custom-file-control lang en   after     content   quot Select file    quot       customFile  custom-file-control lang en   before     content   quot Click me quot      2 - How to get the selected filename value  and update the input to show the value  Once a file is selected  the value can be obtained using JavaScript jQuery      custom-file-input   on  change  function        var fileName     this  val        However  since the placeholder text for the input is a pseudo element  there s no easy way to manipulate this with Js jQuery  You can however  have a another CSS class that hides the pseudo content once the file is selected     custom-file-control selected lang en   after     content   quot  quot   important     Use jQuery to toggle the  selected class on the  custom-file-control once the file is selected  This will hide the initial placeholder value  Then put the filename value in the  form-control-file span        custom-file-input   on  change  function      var fileName     this  val        this  next   form-control-file   addClass  quot selected quot   html fileName       You can then handle the file upload or re-selection as needed  Demo on Codeply  alpha 6

User · Answer

lt  doctype html gt   lt html lang  en  gt     lt head gt       lt  -- Required meta tags -- gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt        lt  -- Bootstrap CSS -- gt       lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 1 css bootstrap min css  integrity  sha384-WskhaSGFgHYWDcbwN70 dfYBj47jz9qbsMId iRN3ewGhXQFZCSftd1LZCfmhktB  crossorigin  anonymous  gt        lt title gt Hello  world  lt  title gt     lt  head gt     lt body gt       lt h1 gt Hello  world  lt  h1 gt     lt div class  custom-file  gt       lt input type  file  class  custom-file-input  id  inputGroupFile01  gt       lt label class  custom-file-label  for  inputGroupFile01  gt Choose file lt  label gt     lt  div gt       lt  -- Optional JavaScript -- gt       lt  -- jQuery first  then Popper js  then Bootstrap JS -- gt       lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt       lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 3 umd popper min js  integrity  sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK l8WvCWPIPm49  crossorigin  anonymous  gt  lt  script gt       lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 1 js bootstrap min js  integrity  sha384-smHYKdLADwkXOn1EmN1qk HfnUcbVRZyYmZ4qpPea6sjB pTJ0euyQp0Mk8ck 5T  crossorigin  anonymous  gt  lt  script gt    lt script gt    function         document  on  change     file   function    var input     this   numFiles   input get 0  files   input get 0  files length   1          label   input val   replace     g       replace             input trigger  fileselect    numFiles  label              document  ready  function               file   on  fileselect   function event  numFiles  label   var input     this  parents   custom-file   find   custom-file-label          log   numFiles  gt  1   numFiles     files selected    label if  input length    input text log    else  if  log   alert log                   lt  script gt     lt  body gt   lt  html gt

User · Answer

In case you want to use it globally on all custom inputs use following jQuery code    document  ready function              custom-file-input   on  change   function  e             e target nextElementSibling innerHTML   e target files 0  name

User · Answer

In case  if you need a no jquery solution   lt label class  custom-file  gt         lt input type  file  id  myfile  class  custom-file-input  onchange  this nextElementSibling innerText   this files 0  name  gt         lt span class  custom-file-control  gt  lt  span gt   lt  label gt

User · Answer

Solution based on  Elnoor answer  but working with multiple file upload form input and without the  fakepath hack    HTML    lt div class  custom-file  gt       lt input id  logo  type  file  class  custom-file-input  multiple gt       lt label for  logo  class  custom-file-label text-truncate  gt Choose file    lt  label gt   lt  div gt    JS      input type  file     on  change   function          let filenames           let files   document getElementById  health claim file form files   files       for  let i in files            if  files hasOwnProperty i                 filenames push files i  name                          this  next   custom-file-label   addClass  selected   html filenames join

[javascript] Bootstrap 4 File Input

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4