FileReader API: Leer Archivos en el Navegador
Aprende a leer el contenido de archivos subidos por el usuario usando FileReader API en diferentes formatos: texto, base64, array buffer y más.
TL;DR - Resumen rápido
- FileReader lee el contenido de archivos de forma asíncrona en el navegador
- readAsText() lee archivos como texto plano
- readAsDataURL() convierte archivos a strings base64 para imágenes
- readAsArrayBuffer() lee archivos como ArrayBuffer binario
- Usa eventos onload, onerror y onprogress para controlar el proceso
Introducción a FileReader API
FileReader es una API que permite a las aplicaciones web leer el contenido de archivos almacenados en el ordenador del usuario. Es especialmente útil cuando necesitas procesar archivos localmente antes de enviarlos al servidor, como previsualizar imágenes, leer archivos de configuración o procesar documentos.
La lectura de archivos es asíncrona, lo que significa que no bloquea el hilo principal del navegador. Esto es crucial para mantener la interfaz responsiva mientras procesas archivos grandes. FileReader opera completamente en el lado del cliente, sin necesidad de enviar datos al servidor.
- Previsualizar imágenes antes de subirlas al servidor
- Leer archivos de configuración JSON o XML localmente
- Procesar archivos CSV para mostrar datos en tablas
- Leer archivos de texto para edición en línea
- Convertir imágenes a base64 para almacenar en localStorage
Seguridad y Privacidad
FileReader solo puede leer archivos que el usuario selecciona explícitamente mediante input type="file" o drag & drop. No puedes acceder arbitrariamente a archivos del sistema del usuario sin su consentimiento.
¿Qué es FileReader?
FileReader es un objeto que proporciona métodos para leer el contenido de archivos o Blobs. Al ser asíncrono, usa eventos para notificar cuando la lectura se completa, falla o progresa. Esto permite mantener la interfaz de usuario responsiva mientras se procesan archivos grandes.
Crear un FileReader
Para usar FileReader, primero creas una instancia con el constructor new FileReader(). Luego asignas event handlers para manejar el resultado de la lectura y finalmente llamas a uno de los métodos de lectura.
Este ejemplo muestra el patrón básico: crear el FileReader, asignar el evento onload para manejar el resultado, y llamar al método de lectura. El resultado está disponible en la propiedad result del objeto FileReader.
Métodos de Lectura de FileReader
FileReader proporciona cuatro métodos principales para leer archivos en diferentes formatos. El método que elijas depende del tipo de archivo y cómo planeas usar los datos. Cada método inicia una lectura asíncrona que dispara eventos al completarse.
- <strong>readAsText()</strong> - Lee el archivo como texto plano (UTF-8 por defecto)
- <strong>readAsDataURL()</strong> - Convierte el archivo a string base64 (ideal para imágenes)
- <strong>readAsArrayBuffer()</strong> - Lee como ArrayBuffer binario (para manipulación de bytes)
- <strong>readAsBinaryString()</strong> - Lee como string binario (obsoleto, usar ArrayBuffer)
readAsText: Leer como Texto
readAsText() lee el archivo como una string de texto. Es ideal para archivos de texto plano, JSON, XML, HTML, CSV y cualquier archivo basado en texto. Puedes especificar la codificación como segundo parámetro, por defecto usa UTF-8.
Este método es el más simple y directo para archivos de texto. La codificación es importante cuando trabajas con archivos que contienen caracteres especiales o acentos. Si no especificas la codificación, FileReader asume UTF-8, que funciona para la mayoría de los casos modernos.
Codificaciones comunes
UTF-8 - Codificación universal (por defecto)ISO-8859-1 - Codificación occidentalUTF-16 - Para archivos Windows antiguosASCII - Solo caracteres básicos
readAsDataURL: Leer como Base64
readAsDataURL() lee el archivo y lo convierte a una string base64 con el prefijo data URL. Este formato es perfecto para imágenes porque puedes asignarlo directamente al atributo src de una etiqueta img. También es útil para almacenar archivos pequeños en localStorage.
El resultado de readAsDataURL() tiene el formato "data:[mime-type];base64,[datos]". Para imágenes, esto te permite mostrarlas inmediatamente sin necesidad de subirlas al servidor. Ten cuidado con archivos grandes porque la string base64 aumenta el tamaño en aproximadamente 33%.
Limitación de tamaño
No uses readAsDataURL() para archivos grandes (más de 5MB). La string base64 puede causar problemas de memoria y rendimiento. Para archivos grandes, usa readAsArrayBuffer() o sube el archivo directamente al servidor.
readAsArrayBuffer: Leer como Binario
readAsArrayBuffer() lee el archivo como un ArrayBuffer, que es una representación binaria de los datos. Este método es ideal para procesar archivos binarios como imágenes, audio, video o cualquier archivo que necesites manipular a nivel de bytes.
ArrayBuffer es un objeto de bajo nivel que representa un buffer de datos binarios de longitud fija. Para acceder a los datos, necesitas usar una vista como Uint8Array, DataView o TypedArrays específicos según el tipo de datos que necesitas procesar.
Eventos de FileReader
FileReader dispara varios eventos durante el proceso de lectura. El más importante es onload, que se dispara cuando la lectura se completa exitosamente. También puedes manejar errores con onerror y mostrar el progreso con onprogress para archivos grandes.
Los eventos de FileReader te permiten crear una experiencia de usuario completa. Con onprogress puedes mostrar una barra de progreso mientras se lee el archivo. Con onerror puedes informar al usuario si hay algún problema y con onloadfinally puedes limpiar recursos independientemente del resultado.
Optimización para archivos grandes
Para archivos muy grandes (más de 100MB), considera usar streams en lugar de FileReader. FileReader carga todo el archivo en memoria, mientras que los streams permiten procesar el archivo en chunks sin saturar la memoria.
Previsualizar Imágenes
Uno de los usos más comunes de FileReader es previsualizar imágenes antes de subirlas. Esto mejora la experiencia del usuario porque puede verificar que seleccionó la imagen correcta antes de iniciar la subida, lo que reduce errores y retrabajos.
Este patrón crea una experiencia fluida: el usuario selecciona una imagen, FileReader la lee como data URL, y la imagen aparece inmediatamente en la pantalla. Puedes extender este ejemplo para redimensionar la imagen, recortarla, o aplicar filtros antes de subirla.
Leer Archivos JSON
Leer archivos JSON con FileReader es útil para importar configuraciones, datos de respaldo o cualquier información estructurada que el usuario haya exportado previamente. JSON.parse() convierte la string de texto en un objeto JavaScript que puedes usar directamente.
Este ejemplo muestra cómo leer un archivo JSON y manejar errores de parsing. Es importante envolver JSON.parse() en un try-catch porque si el archivo JSON está malformado, lanzará una excepción. También valida que el archivo tenga la estructura esperada antes de usarlo.
Errores Comunes
Al trabajar con FileReader, hay varios errores comunes que puedes encontrar. Conocerlos de antemano te ayudará a evitar problemas y a crear aplicaciones más robustas.
El primer error ocurre cuando intentas leer un archivo sin seleccionarlo primero. El segundo muestra el problema de no validar el tipo de archivo antes de intentar leerlo. El tercero demuestra cómo manejar errores de parsing cuando lees archivos JSON malformados.
Validar antes de leer
Siempre valida que el archivo tenga el tipo MIME esperado antes de intentar leerlo. Por ejemplo, si esperas una imagen, verifica que file.type empiece con 'image/'. Esto evita errores inesperados y mejora la seguridad.
Resumen: FileReader API
Conceptos principales:
- •FileReader lee archivos de forma asíncrona sin bloquear el navegador
- •readAsText() lee archivos como texto con codificación configurable
- •readAsDataURL() convierte a base64 para previsualizar imágenes
- •readAsArrayBuffer() lee datos binarios para procesamiento avanzado
- •Los eventos onload, onerror y onprogress controlan el ciclo de lectura
Mejores prácticas:
- •Valida siempre el tipo MIME y tamaño antes de leer el archivo
- •Usa onprogress para mostrar progreso en archivos grandes
- •Envuelve JSON.parse() en try-catch para manejar JSON malformado
- •Evita readAsDataURL() para archivos mayores de 5MB
- •Maneja siempre el evento onerror para informar problemas al usuario