JavaScript File y FileReader

En el panorama actual del desarrollo web, gestionar archivos de manera eficiente y segura es esencial. JavaScript, fundamental para la programación del lado del cliente, ofrece herramientas sólidas a través de las interfaces File y FileReader. Esta guía ofrece un análisis detallado de estas herramientas, proporcionando a los desarrolladores las habilidades necesarias para manejar archivos de forma fluida dentro de las aplicaciones web.

Comprender la interfaz File en JavaScript

La interfaz File en JavaScript es un objeto que representa datos de archivos. Los archivos suelen provenir de elementos <input type="file">, operaciones de Arrastrar y Soltar o la API del Portapapeles. Esta interfaz proporciona información estándar como el nombre, el tamaño y el tipo MIME, junto con métodos para acceder al contenido del archivo.

Propiedades clave de la interfaz File

• name: El nombre del archivo como una cadena de texto.
• size: El tamaño del archivo en bytes.
• type: El tipo MIME del archivo como una cadena de texto.

Ejemplo: Mostrar información del archivo

A continuación se muestra una forma sencilla de mostrar información sobre un archivo seleccionado por el usuario:

---

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

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const info = `File Name: ${file.name} <br> File Size: ${file.size} bytes<br> File Type: ${file.type}`;
  document.getElementById('fileInfo').innerHTML = info;
});

Try it Yourself »

Aprovechar la API FileReader

La API FileReader permite a las aplicaciones web leer el contenido de archivos (o búferes de datos sin procesar) almacenados en la computadora del usuario, utilizando objetos File o Blob para especificar el archivo o los datos a leer.

Métodos de FileReader

• readAsDataURL(): Lee el archivo como una URL de datos.
• readAsText(): Lee el archivo como texto.
• readAsArrayBuffer(): Lee el archivo como un ArrayBuffer.

Ejemplo: Leer un archivo de texto

El siguiente ejemplo demuestra cómo leer un archivo de texto utilizando FileReader y mostrar su contenido en la página web:

---

<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];
  const reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('textOutput').innerHTML = e.target.result;
  };
  reader.onerror = function() {
    document.getElementById('textOutput').innerHTML = 'Error reading file.';
  };
  reader.readAsText(file);
});

Try it Yourself »

Lectura avanzada de archivos: Manejo de diferentes tipos de datos

Leer imágenes como URLs de datos

Para mostrar un archivo de imagen seleccionado por el usuario, puedes leerlo como una URL de datos utilizando el método readAsDataURL. Este método codifica el archivo como una cadena con codificación base64, la cual 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);
});

Try it Yourself »

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 búfer 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);
});

Try it Yourself »

Conclusión

Al comprender e implementar las interfaces File y FileReader en JavaScript, los desarrolladores pueden mejorar la interacción de sus aplicaciones web con los datos del usuario. Estas APIs proporcionan las herramientas necesarias para manejar entradas de archivos, leer el contenido de los archivos y utilizar los datos de manera efectiva, garantizando una experiencia de usuario más rica e interactiva.

Nota: Los navegadores modernos también admiten file.text() y file.arrayBuffer() para una lectura asíncrona más sencilla sin necesidad de la API FileReader.

Práctica

¿Cuáles son las funcionalidades de las interfaces File y FileReader en JavaScript?

La interfaz File proporciona información sobre los archivos.La interfaz FileReader facilita la lectura asíncrona de archivos almacenados en la computadora del usuario por parte de una aplicación web.La interfaz File guarda archivos en la computadora del usuario.La interfaz FileReader puede crear nuevos archivos en el sistema de archivos.