Overcoming the Challenges of Bootstrap 4 File Input

In Bootstrap 4, the file browser presents the persistent text "Choose file..." despite file selection. This issue stems from the hidden value within the custom-file-control CSS class. While it is possible to retrieve the chosen file's value using JavaScript, changing the placeholder text can be more complex.

Customizing Placeholder Text and Button Display (Bootstrap 4.1 )

With the introduction of Bootstrap 4.1, the "Choose file..." placeholder resides in the custom-file-label class. To modify this text, simply add custom CSS or SASS as follows:

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

Addressing the Hidden Placeholder Value

Bootstrap 4 Alpha 6 (Original Answer)

1. Modifying Initial Placeholder and Button Text:

The initial placeholder and button text are stored in CSS pseudo-elements. To customize them, override the default values using the :lang(en)::after and :lang(en)::before selectors, respectively.

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2. Retrieving Selected File Name and Updating the Input:

Once a file is chosen, its name can be obtained using JavaScript. However, due to the placeholder being a pseudo-element, there is no direct way to manipulate it via JavaScript. Instead, create an additional CSS class to hide the placeholder once a file is selected:

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

Upon file selection, toggle the .selected class on the .custom-file-control using jQuery to hide the placeholder and display the file name:

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

Bootstrap 5

The custom file input has been removed in Bootstrap 5. To change the placeholder text, you can use JavaScript or custom CSS. For example:

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