Bootstrap 4 Texto del botón de entrada de archivo personalizado

 En este artículo de sugerencia rápida, veremos cómo usar texto y estilos personalizados con la entrada de archivos Bootstrap 4.

Entrada de archivo Bootstrap 4

La entrada de archivos HTML le permite cargar uno o varios archivos, como imágenes, o importar datos desde archivos.

Bootstrap 4 Entrada básica y personalizada

Bootstrap 4 le permite utilizar dos tipos de entradas de archivo que son entradas básicas y personalizadas.

Simplemente puede agregar el .form-control-filea su <input>elemento para una entrada de archivo básica.

Para la entrada del archivo personalizado, debe agregar la .custom-file-inputclase al <input>elemento y la .custom-file-labelclase al <label>elemento.

Este es un ejemplo básico de entrada de archivo Bootstrap 4:

<div class="form-group">
    <label for="input1">Example file input</label>
    <input type="file" class="form-control-file" id="input1">
</div>

Este es un segundo ejemplo con una entrada de archivo personalizada:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customInput">
    <label class="custom-file-label" for="customInput">Select file</label>
</div>

Personalizar la entrada del archivo con Bootstrap

Puede usar las clases Bootstrap 4 y CSS para personalizar la entrada del archivo personalizado.

Tomemos el siguiente ejemplo:

<div class="container">
    <label class="custom-file" for="customInput">
        <input type="file" class="custom-file-input" id="customInput" aria-describedby="fileHelp">
        <span class="custom-file-control form-control-file"></span>
    </label>
</div>

Este es el código CSS para personalizar la entrada del archivo:

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

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

Visualización del nombre de archivo seleccionado con JavaScript

Puede mostrar el nombre del archivo seleccionado con JavaScript.

Supongamos que tenemos un custom-file-inputelemento con etiqueta que es el siguiente elemento hermano de la entrada.

Podemos utilizar el siguiente código JavaScript para mostrar el nombre del archivo después de seleccionar un archivo "

document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("exampleInputFile").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})