choose file bootstrap show filename

To create a file input field in Bootstrap that displays the selected filename, you can use the "custom-file" class along with some JavaScript. Here's an example of how you can achieve this:

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

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

In the example above, we first create a div element with the class "custom-file". Inside this div, we place an input element with the type set to "file" and the class set to "custom-file-input". We also add an id attribute to the input element for easy access.

Next, we add a label element with the class "custom-file-label" and the for attribute set to the same id as the input element. This label will serve as the visible part of the file input field.

Finally, we add a JavaScript event listener to the custom file input element. When the user selects a file, the change event is triggered. In the event handler function, we retrieve the selected file's name and update the text of the label element to display the filename.

Please note that you will need to include the necessary Bootstrap CSS and JavaScript files for this code to work properly.