/Javascript/Bootstrap/Choose file bootstrap show filename

Choose file bootstrap show filename

Bootstrap input file

<div class="custom-file">
 <input type="file"  class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

Input file type bootstrap

<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>

Source: getbootstrap.com

Choose file bootstrap show filename

document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

Source: stackoverflow.com

Similar codes

61 votes303 views2 answers
Bootstrap flex direction column
CSS Bootstrap
145 votes271 views6 answers
Add bootstrap to react
CSS Bootstrap
1 vote272 views1 answer
Bootstrap word-wrap: break-word;
CSS Bootstrap
26 votes246 views10 answers
Bootstrap
CSS Bootstrap
0 vote279 views1 answer
Shadow on hover class on card bootstrap
CSS Bootstrap
12 votes251 views6 answers
Bootstrap modal
Javascript Bootstrap
0 vote257 views1 answer
How to remove the top border from table react bootstrap
Javascript Bootstrap
0 vote290 views1 answer
React bootstrap css module use media query mixin
CSS Bootstrap
1 vote278 views2 answers
How to navigate with navintems for react-bootstrap without refreshing the whole page
Javascript Bootstrap
0 vote264 views1 answer
Bootstrap-scss github
CSS Bootstrap