javascript

Limitar tamaño de archivo en input file

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.

// https://parzibyte.me/blog
const MAXIMO_TAMANIO_BYTES = 2000000; // 1MB = 1 millón de bytes

// Obtener referencia al elemento
const $miInput = document.querySelector("#miInput");

$miInput.addEventListener("change", function () {
 // si no hay archivos, regresamos
 if (this.files.length <= 0) return;

 // Validamos el primer archivo únicamente
 const archivo = this.files[0];
 if (archivo.size > MAXIMO_TAMANIO_BYTES) {
  const tamanioEnMb = MAXIMO_TAMANIO_BYTES / 1000000;
  alert(`El tamaño máximo es ${tamanioEnMb} MB`);
  // Limpiar
  $miInput.value = "";
 } else {
  // Validación pasada. Envía el formulario o haz lo que tengas que hacer
 }
});

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Validar archivos JS</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <h1>Selecciona un archivo:</h1>
  <a href="//parzibyte.me/blog">By parzibyte</a>
  <br>
  <input id="miInput" type="file">
    <script src="script.js"></script>
  </body>
</html>

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.