JavaScript File y FileReader

Las aplicaciones web con frecuencia necesitan trabajar con archivos que el usuario selecciona: leer un documento de texto, previsualizar una imagen antes de subirla o procesar datos binarios en el navegador. JavaScript gestiona esto con dos interfaces relacionadas. La interfaz File describe un archivo individual (su nombre, tamaño y tipo), y la interfaz FileReader lee el contenido de ese archivo de forma asíncrona sin enviarlo nunca a un servidor.

Esta guía explica cómo obtener un File desde un <input>, leerlo con FileReader y utilizar los métodos más modernos basados en promesas file.text() y file.arrayBuffer(). Un File es un tipo especializado de Blob, por lo que la mayor parte de lo que aprenderás aquí también aplica a los blobs; consulta la visión general de la File API para una imagen completa.

Comprender la interfaz File en JavaScript

La interfaz File representa los datos de un archivo individual. Los archivos suelen provenir de un elemento <input type="file">, una operación de arrastrar y soltar, o la Clipboard API. Como File extiende Blob, incluye el contenido del archivo más sus metadatos.

Propiedades clave de la interfaz File

• name: El nombre del archivo como string, p. ej. "report.pdf".
• size: El tamaño del archivo en bytes (un número).
• type: El tipo MIME como string, p. ej. "image/png". Puede ser "" si el navegador no puede determinarlo.
• lastModified: Una marca de tiempo (milisegundos desde la época Unix) de cuándo se modificó el archivo por última vez.

Obtener archivos desde un input

Un <input> de tipo file expone una propiedad files — un FileList, que funciona como un array. Usa event.target.files[0] para el primer archivo, o establece el atributo multiple e itera sobre files para manejar varios a la vez.

Ejemplo: Mostrar información de un archivo

Esta es una forma sencilla de mostrar información sobre el archivo que selecciona el usuario:

<input type="file" id="fileInput" />
<div id="fileInfo"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return; // user cancelled the dialog
  const modified = new Date(file.lastModified).toLocaleString();
  const info = `File Name: ${file.name}<br>
    File Size: ${file.size} bytes<br>
    File Type: ${file.type || 'unknown'}<br>
    Last Modified: ${modified}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Aprovechar la API FileReader

La interfaz FileReader lee el contenido de un File o Blob de forma asíncrona. Se inicia una lectura con uno de sus métodos readAs… y el resultado se gestiona mediante eventos; los datos nunca bloquean el hilo principal.

Métodos de FileReader

• readAsText(file): Lee el archivo como un string de texto (opcionalmente con una codificación dada).
• readAsDataURL(file): Lee el archivo como una URL de datos codificada en base64, ideal para previsualizaciones con <img src>.
• readAsArrayBuffer(file): Lee el archivo como un ArrayBuffer de bytes sin procesar para el procesamiento binario.

Eventos de FileReader

Como la lectura es asíncrona, los manejadores se adjuntan antes de llamar a un método readAs…:

• onload: Se dispara cuando la lectura se completa con éxito; los datos están en reader.result (también disponible como event.target.result).
• onerror: Se dispara si la lectura falla; inspecciona reader.error.
• onprogress: Se dispara periódicamente durante la lectura; event.loaded y event.total permiten mostrar una barra de progreso para archivos grandes.

Ejemplo: Leer un archivo de texto

El siguiente ejemplo lee un archivo de texto con FileReader y muestra su contenido, incluyendo un porcentaje de progreso:

<input type="file" id="textInput" />
<div id="textOutput">Upload a text file please</div>

document.getElementById('textInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (!file) return;
  const output = document.getElementById('textOutput');
  const reader = new FileReader();
  reader.onprogress = function(e) {
    if (e.lengthComputable) {
      const percent = Math.round((e.loaded / e.total) * 100);
      output.textContent = `Reading… ${percent}%`;
    }
  };
  reader.onload = function(e) {
    output.textContent = e.target.result;
  };
  reader.onerror = function() {
    output.textContent = 'Error reading file: ' + reader.error;
  };
  reader.readAsText(file);
});

Lectura avanzada de archivos: manejo de distintos tipos de datos

Leer imágenes como Data URLs

Para mostrar un archivo de imagen seleccionado por el usuario, puedes leerlo como una Data URL usando el método readAsDataURL. Este método codifica el archivo como un string en base64, que puede usarse directamente en elementos de imagen.

Ejemplo: Mostrar una imagen

<input type="file" id="imageInput" />
<div>Select an image file, please.</div>
<img id="imageDisplay" />

document.getElementById('imageInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('imageDisplay').src = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('imageDisplay').style.display = 'none';
    alert('Error reading image file.');
  };
  reader.readAsDataURL(file);
});

Leer archivos binarios con ArrayBuffer

Para aplicaciones que necesitan procesar audio, video o cualquier dato binario, leer el archivo como un ArrayBuffer es esencial. Este método proporciona un buffer genérico de datos binarios que puede manipularse o pasarse a otras APIs como Web Audio o WebGL.

Ejemplo: Procesar datos binarios

<input type="file" id="binaryInput" />
<div id="binaryOutput">Select any file.</div>

document.getElementById('binaryInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const buffer = e.target.result;
    // Process the binary data
    const info = `Buffer Length: ${buffer.byteLength} bytes`;
    document.getElementById('binaryOutput').innerHTML = info;
  };
  reader.onerror = function() {
    document.getElementById('binaryOutput').innerHTML = 'Error reading binary file.';
  };
  reader.readAsArrayBuffer(file);
});

La forma moderna: file.text() y file.arrayBuffer()

FileReader es anterior a las promesas, por lo que su API basada en eventos puede resultar verbosa. Todos los navegadores modernos añaden métodos que devuelven promesas directamente sobre File/Blob, permitiendo leer con async/await:

• file.text(): Se resuelve con el contenido del archivo como un string UTF-8.
• file.arrayBuffer(): Se resuelve con un ArrayBuffer de los bytes sin procesar.
• file.stream(): Devuelve un ReadableStream para procesar archivos muy grandes en fragmentos.

<input type="file" id="modernInput" />

document.getElementById('modernInput').addEventListener('change', async function(event) {
  const file = event.target.files[0];
  if (!file) return;
  try {
    const text = await file.text();
    console.log('First 100 characters:', text.slice(0, 100));

    const buffer = await file.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    console.log('Total bytes:', bytes.length);
    console.log('First byte:', bytes[0]);
  } catch (err) {
    console.error('Could not read file:', err);
  }
});

Prefiere estos métodos basados en promesas para código nuevo — se integran limpiamente con async/await y try/catch. Recurre a FileReader cuando necesites eventos onprogress o debas soportar un navegador muy antiguo. Para enviar archivos a un servidor en fragmentos reanudables, combina file.slice() con estas lecturas — consulta resumable file upload.

Conclusión

La interfaz File te informa sobre un archivo (nombre, tamaño, tipo, lastModified), mientras que FileReader y los métodos de promesa más recientes file.text() / file.arrayBuffer() permiten leer su contenido sin un viaje de ida y vuelta al servidor. Juntos cubren las necesidades más comunes: mostrar metadatos de archivos, previsualizar imágenes, analizar texto y procesar datos binarios íntegramente en el navegador.

Para profundizar, explora el tipo relacionado Blob sobre el que se construye File y la visión general de la File API.

Práctica