Contourner les limitations de l'entrée de fichier de Bootstrap 4

Bootstrap 4 fournit un composant d'entrée de fichier personnalisé pour simplifier la sélection de fichiers pour les utilisateurs. Cependant, si vous souhaitez personnaliser le texte de l'espace réservé "Choisir un fichier..." ou afficher le nom du fichier choisi, vous pourriez rencontrer certains problèmes.

Modification des espaces réservés dans Bootstrap 4.1 et versions ultérieures

Depuis Bootstrap 4.1, le texte d'espace réservé réside dans l'élément custom-file-label. Vous pouvez le remplacer avec CSS:

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

Ajustement du texte du bouton de fichier

Bootstrap 4.1 n'offre pas de méthode simple pour modifier le texte du bouton de fichier. Pour y parvenir, pensez à ajouter un style personnalisé :

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

Affichage du nom du fichier sélectionné dans Bootstrap 4.4

Bootstrap 4.4 vous permet d'afficher le nom du fichier choisi en utilisant du JavaScript simple :

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

Options pré-Bootstrap 4.1 :

Masquage de l'espace réservé initial :

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

Affichage du nom du fichier sélectionné :

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

Ces approches offrent une flexibilité dans la personnalisation du composant d'entrée de fichier de Bootstrap 4, vous permettant de l'adapter à vos besoins spécifiques.