Contornando as limitações da entrada de arquivo do Bootstrap 4

O Bootstrap 4 fornece um componente de entrada de arquivo personalizado para simplificar a seleção de arquivos para os usuários. No entanto, se você deseja personalizar o texto do espaço reservado "Escolher arquivo..." ou exibir o nome do arquivo escolhido, poderá encontrar alguns desafios.

Alterando os espaços reservados no Bootstrap 4.1 e superior

Desde o Bootstrap 4.1, o texto do espaço reservado reside no elemento custom-file-label. Você pode substituí-lo por CSS:

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

Ajustando o texto do botão de arquivo

O Bootstrap 4.1 não oferece um método direto para alterar o texto do botão de arquivo. Para conseguir isso, considere adicionar algum estilo personalizado:

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

Exibindo o nome do arquivo selecionado no Bootstrap 4.4

O Bootstrap 4.4 permite exibir o nome do arquivo escolhido usando JavaScript simples:

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

Opções pré-Bootstrap 4.1:

Ocultando espaço reservado inicial:

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

Exibindo o nome do arquivo selecionado:

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

Essas abordagens fornecem flexibilidade na personalização do componente de entrada de arquivo do Bootstrap 4, permitindo que você adapte-o aos seus requisitos específicos.