Customizar un botón de tipo input file

Reconozco que nunca me han gustado los estilos que traen por defecto los botones en html, especialmente los de tipo input file con su texto al lado dando la vara, por eso he decidido hacer un tutorial con una alternativa que sería usar un icono.

Lo primero que haremos será añadir el icono y el botón input file que será donde guardaremos los archivos, para este caso yo estoy usando los iconos de font awesome pero podéis utilizar el que queráis.

<div id="attachment"><i class="fa fa-paperclip"></i></div>
<input id="file-input" type="file" style="display:none" multiple/>

Observad que el botón input file lo estamos ocultando porque su funcionalidad se va a representar en el icono, aparte, le he añadido el atributo multiple por si queremos añadir más de un archivo.

Lo siguiente que haremos será darle la funcionalidad al icono con el siguiente código javascript.

document.getElementById("attachment").addEventListener('click', function() {
    document.getElementById("file-input").click();
});

Este código lo que hace es que cuando se pulsa al icono lanza el evento click de la etiqueta del input file lo que hará que se nos muestre el cuadro de diálogo para seleccionar un archivo.

Con estos dos simples pasos ya lo tendríamos pero si queremos añadir más funcionalidad, como por ejemplo que se muestren los nombres de los archivos que ya hemos seleccionado podemos hacer lo siguiente.

document.getElementById("file-input").addEventListener('change', function() {
    let pos = this.files.length - 1;
    document.getElementById("add_labels").innerHTML += \`<div class="labels">${this.files[pos].name}</div>\`;
});

Aquí lo que hacemos es cuando el input cambia revisamos el último archivo que contiene y pintamos el nombre en un div con el id add_labels.

Y con esto ya lo tendríamos ;), os muestro un ejemplo de como ha quedado en un editor que he desarrollado.

Si queréis descargar el código del ejemplo lo podéis hacer desde mi github :)

Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.

Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.

Nos leemos 👋.