Customizing Bootstrap 4 File Input: Dynamic Update from Placeholder to Selected Filename

Introduction

Bootstrap, as a popular front-end framework, is widely used in web development for its form components. The file input is a crucial element in forms, but its default styling varies across browsers. Bootstrap 4 addresses this with the custom file input component, providing a consistent visual experience. However, developers often face a persistent problem: after a user selects a file, the input box continues to display the initial placeholder text (e.g., "Choose file...") instead of the actual filename. Based on high-scoring Stack Overflow answers and official documentation, this article systematically analyzes the root causes and solutions to this issue.

Evolution of Bootstrap 4 File Input Component Structure

The structure of the file input component in Bootstrap 4 has evolved across versions, and understanding these differences is key to solving the problem.

Alpha 6 Version Structure

In Bootstrap 4 Alpha 6, the file input uses the following HTML structure:

<label class="custom-file" id="customFile">
  <input type="file" class="custom-file-input">
  <span class="custom-file-control form-control-file"></span>
</label>

Here, the .custom-file-control element displays the placeholder text via a CSS pseudo-element ::after:

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

The issue is that the ::after pseudo-element's content property cannot be directly modified via JavaScript, preventing text updates after file selection.

4.1+ Version Structural Improvements

Bootstrap 4.1 and later versions optimized the component structure by introducing the .custom-file-label element:

<div class="custom-file" id="customFile" lang="es">
  <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
  <label class="custom-file-label" for="exampleInputFile">Select file...</label>
</div>

Now, the placeholder text is directly within the <label> tag, not a CSS pseudo-element, facilitating dynamic updates via JavaScript. The browse button text is still controlled via CSS:

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

Solutions for Dynamically Updating the Selected Filename

We present multiple solutions tailored to different Bootstrap 4 versions, ranging from pure CSS to JavaScript event handling.

JavaScript and CSS Combination for Alpha 6 Version

Since the placeholder text in Alpha 6 is generated by a pseudo-element, direct modification is challenging. Follow these steps:

1. Retrieve the Filename: Listen for the change event and extract the filename:

   $('.custom-file-input').on('change', function() {
     var fileName = $(this).val();
     // Or use more precise path handling:
     // var fileName = $(this).val().split('\\').pop();
   });

2. Hide the Pseudo-element Text: Define a CSS class .selected to hide the pseudo-element:

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

3. Display the Filename: Insert the filename into the .form-control-file element and add the .selected class:

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

This approach indirectly controls the pseudo-element via class toggling but is somewhat verbose.

Pure JavaScript Solution for 4.1+ Versions

In Bootstrap 4.1+, the placeholder text is within the .custom-file-label element, allowing direct DOM updates:

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

This method is concise and efficient, using nextElementSibling to access the adjacent label and update its text. The jQuery version is:

$('.custom-file-input').on('change', function() {
  let fileName = $(this).val().split('\\').pop();
  $(this).next('.custom-file-label').addClass("selected").html(fileName);
});

Note: Adding the .text-truncate class handles long filename overflow.

Enhanced Solution for Bootstrap 4.4

Bootstrap 4.4 further optimizes this, recommending native JavaScript:

document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = e.target.files[0] ? e.target.files[0].name : "Choose file...";
  var label = e.target.nextElementSibling;
  label.textContent = fileName;
});

This solution uses the files API to get the file object directly, avoiding path parsing issues and supporting fallback for empty values.

Multilingual and Custom Text Support

Bootstrap 4 supports multilingual text via the lang attribute and CSS pseudo-classes. For example, Spanish configuration:

<div class="custom-file" lang="es">
  <input type="file" class="custom-file-input" id="customFileLang">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Corresponding CSS:

.custom-file-input ~ .custom-file-label::after {
  content: "Examinar"; /* Spanish for "Browse" */
}

Developers can customize text by modifying the Sass variable $custom-file-text or overriding CSS directly.

Bootstrap 5 Changes and Migration Advice

Bootstrap 5 removes the custom file input component, recommending browser-default styles or third-party plugins. For similar functionality, consider this CSS alternative:

/* Basic file input styling */
input[type="file"] {
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

Or use community plugins like bs-custom-file-input for backward compatibility.

Summary and Best Practices

To dynamically update text in Bootstrap 4 file input components, choose the appropriate solution based on the version:

• Alpha 6: Combine JavaScript events and CSS class toggling to indirectly control pseudo-elements.
• 4.1+: Directly manipulate the .custom-file-label element, preferring native JavaScript or jQuery.
• General Advice: Always handle the file change event to update the label text; add CSS classes like .text-truncate to prevent overflow; implement multilingual support via the lang attribute.

Through detailed analysis and code examples, this article empowers developers to resolve common issues with Bootstrap 4 file inputs, enhancing user experience.