Personalización del input file

Muchas de las veces, necesitamos personalizar el input file en una página html para que se ajuste a un diseño en nuestra aplicación. Sin embargo, en los navegadores más populares, Firefox y Chrome, este elemento html no puede ser configurado y cada elemento se muestra diferente en cada navegador.

Etiqueta Input File de Chrome
Etiquete Input File de Firefox

Este truco para personalizar la etiqueta de subida de archivos tiene 3 aspectos importantes:

  1. Ocultar mediante estilos css la etiqueta input-file.
  2. Agrupar en alguna etiqueta los elementos en los que se va a personalizar, tanto el botón de selección como el contenedor del nombre del archivo seleccionado. Para el demo de este artículo he decidido usar label con el atributo for relacionando con el input file chose_file.
  3. Agregar código en javascript para capturar el nombre de archivo del input file y ponerle en el elemento escogido.

La estructura de archivos de este demo se muestra en la siguiente captura de pantalla:

Estructura de archivos del demo

El código del archivo inputfile-custom.js se muestra a continuación.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Custom File-Input</title>
<link rel="stylesheet" type="text/css" href="css/inputfile.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/inputfile-custom.js"></script>
</head>
<body>
<div class="container">
<input type="file" name="choose_file" id="choose_file" class="inputfile custom"/>
<label for="choose_file"><span id="file_name">mi archivo</span><strong>Choose a file</strong></label>
</div>
</body>
</html>

El código completo se puede revisar en el repositorio https://github.com/AlturaSoluciones/custom-inputfile

El resultado del demo se muestra en la siguiente secuencia de captura de pantallas:

Input File personalizado antes de seleccionar el archivo.
Input File personalizado con el puntero sobre el elemnto.
Selección del archivo a subirse.
Resultado final de la captura del archivo.

Si te gustó este demo, aplaude las veces que quieras, y para ver historias similares acerca de tecnología, mira nuestras publicaciones y escribe en los comentarios cualquier duda que tengas.

Milber

Mail: milber@alturasoluciones.com
LinkedIn: https://www.linkedin.com/in/milberchamputiz/