Solucionar las limitaciones de la entrada de archivos de Bootstrap 4

Bootstrap 4 proporciona un componente de entrada de archivos personalizado para simplificar la selección de archivos para los usuarios. Sin embargo, si desea personalizar el texto del marcador de posición "Elegir archivo..." o mostrar el nombre del archivo elegido, puede encontrar algunos desafíos.

Cambiar los marcadores de posición en Bootstrap 4.1 y superior

Desde Bootstrap 4.1, el texto del marcador de posición reside en el elemento de etiqueta de archivo personalizado. Puedes anularlo con CSS:

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

Ajustar el texto del botón de archivo

Bootstrap 4.1 no ofrece un método sencillo para modificar el texto del botón de archivo. Para lograr esto, considere agregar algún estilo personalizado:

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

Mostrar el nombre del archivo seleccionado en Bootstrap 4.4

Bootstrap 4.4 le permite mostrar el nombre del archivo elegido usando 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
})

Opciones anteriores a Bootstrap 4.1:

Ocultar marcador de posición inicial:

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

Mostrando el nombre del archivo seleccionado:

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

Estos enfoques brindan flexibilidad para personalizar el componente de entrada de archivos de Bootstrap 4, lo que le permite adaptarlo a sus requisitos específicos.