Hoy veremos cómo usar JavaScript para limitar el tamaño de un archivo que se carga en un input de tipo file. Es decir, solo permitir que se seleccionen archivos menores a determinada cantidad, por ejemplo, 10 Megabytes.

Todo esto lo haremos en el lado del cliente.

Sobre la seguridad

Quiero dejar claro que este método no es para nada confiable. Funciona, y lo hace bien, pero se puede engañar; así que recuerda que siempre debes usar la validación del lado del servidor en donde se sube el archivo.

Te preguntarás entonces para qué limitarlo en el lado del cliente y la razón es la misma por la que validamos formularios: para mejorar la usabilidad de la app.

Si le avisas al usuario que no puede seleccionar un archivo cuyo peso sea mayor al límite, lo sabrá antes de enviar el formulario; en lugar de que le avises hasta que lo haya enviado.

El evento del input

Puedes validar el archivo en cualquier evento (por ejemplo antes de enviar el formulario), yo lo haré en el evento change del input; es decir, cada que el usuario seleccione un archivo comprobaré si su tamaño no sobrepasa el límite.

Debes obtener una referencia al input usando getElementById, querySelector o lo que tú prefieras.

Validar archivo

Dejando claros los conceptos anteriores vamos al código de ejemplo. Tenemos el input de tipo file, así que escuchamos cuando cambie y validamos.

Podemos acceder a los archivos en la propiedad files, que es un arreglo. Para acceder al primero usamos la posición 0 (obviamente).

Cada archivo tiene varias propiedades, entre ellas size que sirve para ver el tamaño del archivo en bytes.

See the gist on github.

En el ejemplo puedes ver que además de avisar al usuario que no puede seleccionar un archivo de ese tamaño, limpio el formulario. El límite de peso es de 2 megabytes, mismo que se escribe en bytes al realizar la comparación.

Por cierto, el HTML de ejemplo es el que se ve a continuación. Fíjate en que el input en cuestión tiene el id miInput.

See the gist on github.

Puedes probar el ejemplo en línea.