Getting around the limitations of Bootstrap 4's File Input

Bootstrap 4 provides a custom file input component to simplify file selection for users. However, if you're looking to customize the "Choose file..." placeholder text or display the chosen file's name, you might encounter some challenges.

Changing the Placeholders in Bootstrap 4.1 and above

Since Bootstrap 4.1, the placeholder text resides in the custom-file-label element. You can override it with CSS:

.custom-file-label::after {
  content: "Select file...";
}

Tweaking File Button Text

Bootstrap 4.1 doesn't offer a straightforward method to alter the file button text. To achieve this, consider adding some custom styling:

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

Displaying Selected File Name in Bootstrap 4.4

Bootstrap 4.4 allows you to display the chosen file's name using plain JavaScript:

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
})

Pre-Bootstrap 4.1 Options:

Hiding Initial Placeholder:

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

Displaying Selected File Name:

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

These approaches provide flexibility in customizing Bootstrap 4's file input component, enabling you to tailor it to your specific requirements.