logo cosasdedevs

Customizar un botón de tipo input file

Customizar un botón de tipo input file

My Profile
Oct 16, 2019

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 :)

304 vistas

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si pulsas entendido aceptas su uso. Ver política de cookies.

🐍 Sígueme en Twitter

Si te gusta el contenido que subo y no quieres perderte nada, sígueme en Twitter y te avisaré cada vez que cree contenido nuevo 💪
Luego ¡Te sigo!