bootstrap 4 file input doesn t show the file name

Question

I have a problem with the custom-file-input class in Bootstrap 4  after I chose which file I want to upload the filename do not show   I use this code    lt div class  input-group mb-3  gt     lt div class  custom-file  gt       lt input type  file  class  custom-file-input  id  inputGroupFile02  gt       lt label class  custom-file-label  for  inputGroupFile02  gt Choose file lt  label gt     lt  div gt     lt div class  input-group-append  gt       lt button class  btn btn-primary  gt Upload lt  button gt     lt  div gt   lt  div gt    Any idea how I can fix it without getting too complicated

User · Answer

This works with Bootstrap 4 1 3    lt script gt         input type file    change function              var fieldVal     this  val                Change the node s value by removing the fake path  Chrome          fieldVal   fieldVal replace  C   fakepath                   if  fieldVal    undefined    fieldVal                        this  next   custom-file-label   attr  data-content   fieldVal                 this  next   custom-file-label   text fieldVal                      lt  script gt

User · Answer

This code works for me    lt script type  application javascript  gt          elementID   change function event           var fileName   event target files 0  name          if  event target nextElementSibling  null               event target nextElementSibling innerText fileName                     lt  script gt

User · Answer

I have used following for the same    lt script type  application javascript  gt         input type  file     change function e           var fileName   e target files 0  name              custom-file-label   html fileName            lt  script gt

User · Answer

When you have multiple files  an idea is to show only the first file and the number of the hidden file names       custom-file input   change function         var  el     this       files    el 0  files      label   files 0  name      if  files length  gt  1            label   label     and     String files length - 1      more files             el next   custom-file-label   html label

User · Answer

document  on  change     custom-file-input   function  event          this  next   custom-file-label   html event target files 0  name        Best of all worlds  Works on dynamically created inputs  and uses actual file name

User · Answer

The answer of Anuja Patil only works with a single file input on a page  This works if there are more than one  This snippet will also show all files if multiple is enabled    lt script type  text javascript  gt           custom-file input   change function  e            var files               for  var i   0  i  lt    this  0  files length  i                  files push   this  0  files i  name                       this  next   custom-file-label   html files join                   lt  script gt    Note that   this  next   custom-file-label   html   this  0  files join         does not work  So that is why the for loop is needed   If you never work with mulitple files in the file upload  this simpler snippet can be used    lt script type  text javascript  gt           custom-file input   change function  e            if  e target files length                  this  next   custom-file-label   html e target files 0  name                       lt  script gt

User · Answer

If you want you can use the recommended Bootstrap plugin to dynamize your custom file input  https   www npmjs com package bs-custom-file-input  This plugin can be use with or without jQuery and works with React an Angular

User · Answer

You need to use javascript to show the name of the choosed file  as written in the documentation  https   getbootstrap com docs 4 5 components forms  file-browser Here you can find the solution  Bootstrap 4 File Input That s the code for your example   lt html lang  quot en quot  gt       lt head gt           lt link rel  quot stylesheet quot  href  quot https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css quot  integrity  quot sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ quot  crossorigin  quot anonymous quot  gt           lt script src  quot https   code jquery com jquery-3 1 1 slim min js quot  integrity  quot sha384-A7FZj7v d sdmMqp nOQwliLvUsJfDHW k9Omg a EheAdgtzNs3hpfag6Ed950n quot  crossorigin  quot anonymous quot  gt  lt  script gt           lt script src  quot https   cdnjs cloudflare com ajax libs tether 1 4 0 js tether min js quot  integrity  quot sha384-DztdAPBWPRXSA 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb quot  crossorigin  quot anonymous quot  gt  lt  script gt           lt script src  quot https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 js bootstrap min js quot  integrity  quot sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk 02D9phzyeVkE jo0ieGizqPLForn quot  crossorigin  quot anonymous quot  gt  lt  script gt       lt  head gt       lt body gt           lt div class  quot input-group mb-3 quot  gt               lt div class  quot custom-file quot  gt                   lt input type  quot file quot  class  quot custom-file-input quot  id  quot inputGroupFile02 quot   gt                   lt label class  quot custom-file-label quot  for  quot inputGroupFile02 quot  gt Choose file lt  label gt               lt  div gt               lt div class  quot input-group-append quot  gt                   lt button class  quot btn btn-primary quot  gt Upload lt  button gt               lt  div gt           lt  div gt           lt script gt                  inputGroupFile02   on  change  function                      get the file name                 var fileName     this  val                      replace the  quot Choose a file quot  label                   this  next   custom-file-label   html fileName                           lt  script gt       lt  body gt   lt  html gt

User · Answer

Johann-S solution works great   And it looks like he created the awesome plugin   The Bootstrap 4 3 documentation example page uses this plugin to modify the filename  https   github com Johann-S bs-custom-file-input  Use the Bootstrap custom file input classes  Add the plugin to your project  and add this code in your script file on the page     document  ready function        bsCustomFileInput init

[jquery] bootstrap 4 file input doesn't show the file name

Examples related to jquery

Examples related to html

Examples related to css

Examples related to file-upload

Examples related to bootstrap-4