superando los desafíos de la entrada de archivo Bootstrap 4

en Bootstrap 4, el navegador de archivos presenta el texto persistente "Archivo de elección ..." a pesar de la selección de archivos. Este problema proviene del valor oculto dentro de la clase CSS de control de archivo personalizado. Si bien es posible recuperar el valor del archivo elegido usando JavaScript, cambiar el texto del marcador de posición puede ser más complejo.

Personalización de texto de texto y botón Display (bootstrap 4.1)

con la introducción de Bootstrap 4.1, el lugar "Elige archivo ..." en el lugar de la planta personalizada en la Classabel. Para modificar este texto, simplemente agregue CSS o sass personalizado de la siguiente manera:

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

abordando el valor de marcador de posición oculto

bootstrap 4 alfa 6 (respuesta original)

1. Modificación del marcador de posición inicial y texto del botón:

El marcador de posición y el texto inicial del botón se almacenan en pseudo-elementos CSS. Para personalizarlos, anule los valores predeterminados utilizando: lang (en) :: After y: lang (en) :: antes de los selectores, respectivamente.

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

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

2. Recuperar el nombre del archivo seleccionado y actualizar la entrada:

Una vez que se elige un archivo, su nombre se puede obtener usando JavaScript. Sin embargo, debido a que el marcador de posición es un pseudo-elemento, no hay una forma directa de manipularlo a través de JavaScript. En su lugar, cree una clase CSS adicional para ocultar el marcador de posición una vez que se selecciona un archivo:

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

en la selección de archivos, alterne la clase .selected en el control .custom-file usando jQuery para ocultar el marcador de posición y muestre el nombre del archivo:

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

bootstrap 5

La entrada del archivo personalizado se ha eliminado en Bootstrap 5. Para cambiar el texto del poseedor de la posición, puede usar JavaScript o CSS personalizado. Por ejemplo:

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