Front.id

Una necesidad frecuente con las que nos topamos, es la de customizar los botones de carga de archivos, botones que resultan molestos a la hora de aceptar propiedades de CSS. Hoy veremos como podemos simplificar este proceso para lograr un resultado acorde a nuestras necesidades.

La lógica

Vamos a tomar la estructura básica de este elemento:

<div class="form-managed-file">
    <input type="file" class="form-file"/>
</div>

Modificarla agregando un <a> como hermano del input:

<!-- Agregamos un <a> al lado del input -->
<div class="wrapper form-managed-file">
    <input type="file" class="form-file"/>
    <a href="#" class="trigger-upload">File upload</a>
</div>

Con CSS dejaremos fuera de la visualización el input pero evitando propiedades como display: none; ya que necesitamos de su comportamiento:

/* Es importante dejar el input fuera
de la visualización, pero sin ocultarlo,
para poder aplicarle el click */
.form-managed-file input.form-file {
    position: absolute;
    left: -1000em;
}

Y con unas lineas de jQuery vamos a capturar el click que se realice en el <a> y replicarlo en el input:

 // Capturamos el click en el <a>
  // prevenimos el comportamiento por defecto
  // y replicamos el click en su hermano input.
  $(".trigger-upload").on("click", function (e) {
    e.preventDefault();
    $(this).siblings('.form-file').trigger("click");
  })

Ejemplo

Te dejamos un ejemplo del comportamiento con un pequeño plus de estilos para que puedas probarlo y modificarlo a tu antojo.

See the Pen Styling file upload by Front.id (@frontid) on CodePen.