0

Estoy buscando hacer un botón para importar un archivo CSV a mi formulario, quisiera saber si es posible "estilizar" el input file o si es con otra manera.

Si lo hago así se ve un botón común y corriente

      <label class="form-label" for="customFile">Default file input example</label>
      <input type="file" class="form-control" id="csv-file"/>

Quisiera utilizar un ícono que tengo llamado file-csv en lugar del clásico "subir archivo"

¿Es posible?

1 respuesta 1

1

No se pueden estilizar los campos de tipo file, tengo entendido que no depende solo del navegador, sino también del sistema operativo.

Afortunadamente, se puede crear un juego de reglas CSS para esconder el campo y agregar otros elementos que permiten simular el comportamiento original. A saber:

  1. Encerrar el campo y los nuevos elementos dentro de una etiqueta (label)
  2. Ocultar campo desde CSS con atributo display:none;
  3. Agregar un botón con la imagen o texto que prefieras
  4. Agregar un contenedor para mostrar archivo(s) seleccionado(s). Al estar dentro de la etiqueta, un clic hará que se muestre la ventana de archivos
  5. Asignar evento al botón para mostrar ventana de selección de archivos
  6. Asignar evento a campo para actualizar lista de archivos

Solo queda personalizar las reglas CSS para adaptarlo a tu gusto.

// Ejecutar hasta que se haya cargado la página
document.addEventListener('DOMContentLoaded', () => {
    // Obtener inputs tipo file y sus botones para poder asignar eventos
    const fileInputs = document.querySelectorAll('input[type=file]');
    const fileButtons = document.querySelectorAll('.form-file-button');
    // Asignar eventos a inputs y botones
    fileInputs.forEach(file => file.addEventListener('change', fileChange));
    fileButtons.forEach(button => button.addEventListener('click', fileClick));
});

// Cambios en inputs
function fileChange(e) {
    // e - es el evento
    // e.target - es el elemento que lo disparó
    // .closest() - permite acceder al padre (label)
    // desde el padre se obtiene el contenedor para mostrar archivos
    let input = e.target;
    let spanBlock = e.target.closest('label').querySelector('.form-file-span');
    // Limpiar contenedor
    spanBlock.innerHTML = '';
    // Recorrer archivos para agregarlos al contenedor
    Array.from(input.files).forEach(file => {
        spanBlock.innerHTML += `<span class="form-files">${file.name}</span>`;
    });
}

// Clics en botones
function fileClick(e) {
    // Desde el botón se obtiene el input y se abre la ventana para seleccionar archivos
    let input = e.target.closest('label').querySelector('input');
    input.click();
}
/* Formato de etiqueta */
.form-block-input {
  display:flex;
  max-width:450px;
  overflow:hidden;
  font-size:0.9em;
  color:#777;
  background:#ddd;
  border:1px #25a solid;
  margin:2px;
  padding:0;
  border-radius:3px;
}
/* Ocultar campo tipo file */
input[type="file"].form-file {
  display:none;
}
/* Botón para seleccionar archivos */
button.form-file-button {
  vertical-align:middle;
  color:#fff;
  background:#25a;
  margin:0;
  border:0;
  transform:scaleX(-1); /* Invertir botón horizontalmente */
}
/* Lista de archivos */
span.form-file-span {
  flex:1;
  display:inline-block;
  text-align:left;
  padding:2px 8px;
}
/* Arhchivos en lista */
span.form-files {
  display:inline-block;
  color:#555;
  background:#ccf;
  border:1px #25a solid;
  margin:2px 8px 2px 0;
  padding:2px 5px;
  white-space:nowrap;
  border-radius:3px;
}
/* Quitar margen horizontal al último elemento en la lista */
span.form-block-span:last-child {
  margin:2px 0;
}
<p>
  Input de un solo archivo:<br>
  <label class="form-block-input">
    <input type="file" name="custom-file" class="form-file">
    <button class="form-file-button">⇱</button>
    <span class="form-file-span">Selecciona un archivo</span>
 </label>
</p>
<p>
  Input de archivos múltiples:<br>
  <label class="form-block-input">
    <input type="file" name="multi-file" class="form-file" multiple>
    <button class="form-file-button">⇱</button>
    <span class="form-file-span">Selecciona archivos a subir</span>
  </label>
</p>

Notas sobre flex:

  • En la etiqueta se usa display:flex; para que el botón y lista de archivos se adapten
  • La lista de archivos tiene flex:1; para tomar el ancho máximo disponible y evitar que haya márgenes o el botón cambie de ancho
  • Botón y lista de archivos van a tener siempre la misma altura

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.