Input file con bonita apariencia

¿Alguna vez te has detenido a pensar en esos campos de carga de archivos que parecen sacados de la era prehistórica en tu sitio web? Bueno, hoy estoy aquí para cambiar eso. En este artículo, te voy a mostrar cómo convertir esos campos de carga aburridos en botones elegantes que no solo hagan que tu página luzca mejor, sino que también hagan sonreír a tus usuarios cada vez que suban un archivo.

Con un poco de HTML, CSS y un toque de JavaScript o jQuery, vamos a dar vida a un botón de selección de archivo que sea todo menos común. Este botón no solo dirá claramente el nombre del archivo seleccionado, sino que también hará que tus usuarios se sientan como en casa cada vez que interactúen con él.

Este botón indica el nombre del archivo que se ha seleccionado y se ve así:

Seleccionar archivo

Para lograrlo necesitaremos escribir código en:

• HTML
• CSS
• JavaScript o jQuery

Recuerda que puedes personalizarlo para que quede con el estilo que necesitas. ¡Empecemos!

Para comenzar, necesitamos configurar nuestro campo de carga de archivos. Esto es tan sencillo como crear un nuevo input de tipo archivo y asignarle una clase para darle estilo, junto con un identificador único.

<input type="file" id="file" name="upload" accept="application/pdf" class="inputfile" />  
<label for="file"><span class="namearchive">Seleccionar archivo</span></label>

Con este código, estamos listos para darle a nuestros usuarios una forma fácil y clara de cargar sus archivos.

CSS

Ahora es momento de darle estilo a nuestro campo de carga de archivos para que se vea genial y sea fácil de usar. Echemos un vistazo a los estilos CSS que vamos a aplicar:

/* Estilos para el campo de carga de archivos y su etiqueta */
.inputfile + label, .inputfile_autorization + label {
    font-size: 1.25em; /* Tamaño del texto */
    font-weight: 400; /* Grosor del texto */
    color: #5a0ee5 !important; /* Color del texto */
    background-color: #f7f7f7; /* Color de fondo */
    display: inline-block; /* Bloque en línea */
    padding: 2px 10px; /* Relleno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de tipo "mano" para indicar que es interactivo */
}

/* Estilos adicionales al interactuar con el campo */
.inputfile:focus + label,
.inputfile + label:hover,
.inputfile_autorization:focus + label,
.inputfile_autorization + label:hover {
    background-color: #f2f2f2; /* Cambio de color al pasar el mouse o enfocar el campo */
}

/* Estilos específicos para el campo de carga de archivos */
.inputfile + label {
    cursor: pointer; /* Cursor de tipo "mano" para indicar que es interactivo */
}

/* Estilos cuando el campo de carga de archivos está enfocado */
.inputfile:focus + label {
    outline: 1px dotted #000; /* Esquema de puntos para indicar que está enfocado */
    outline: -webkit-focus-ring-color auto 5px; /* Esquema de puntos para navegadores WebKit */
}

/* Estilos para los elementos internos del label */
.inputfile + label * {
    pointer-events: none; /* Evitar que los elementos internos interfieran con la interacción */
}

/* Ocultar el campo de carga de archivos */
.inputfile {
    display: none; /* Hacer invisible el campo de carga de archivos */
}

JavaScript

Vamos a implementar un poco de JavaScript para que el texto del botón cambie automáticamente una vez que el usuario ha seleccionado un archivo. Echemos un vistazo al código:

// Escuchamos el evento 'change' en todo el cuerpo del documento
document.body.addEventListener('change', function(event) {
    // Verificamos que el evento provenga de un elemento con la clase 'inputfile'
    if (event.target.matches('.inputfile')) {
        // Extraemos el nombre del archivo seleccionado
        var filename = event.target.value.split('\\').pop();
        // Seleccionamos todos los elementos con la clase 'namearchive' y actualizamos su contenido
        document.querySelectorAll('.namearchive').forEach(function(el) {
            el.innerHTML = filename; // Actualizamos el texto del botón con el nombre del archivo
        });
    }
});

Con este código, logramos que el texto del botón cambie dinámicamente una vez que el usuario ha seleccionado un archivo, proporcionando una experiencia más intuitiva y amigable.

JQuery

Este es el código jQuery, una forma rápida y sencilla de lograr el mismo efecto sin JS puro. Echemos un vistazo al código:

// Escuchamos el evento 'change' en el cuerpo del documento y actualizamos el texto del botón
$('body').on('change','.inputfile',function(){
    // Extraemos el nombre del archivo seleccionado
    var filename = $(this).val().split('\\').pop();
    // Actualizamos el texto de todos los elementos con la clase 'namearchive'
    $('.namearchive').html(filename);
});

Con este código, logramos que el texto del botón cambie dinámicamente una vez que el usuario ha seleccionado un archivo, proporcionando una experiencia más intuitiva y amigable, esta vez utilizando jQuery.

Para arreglar incompatibilidad en WordPress en lugar de $ utiliza jQuery

Versión Normal

jQuery('body').on('change','.inputfile',function(){
    var filename = jQuery(this).val().split('\\').pop();
    var idname = jQuery(this).attr('id');
    jQuery('.namearchive').html(filename);
});