Cómo leer y procesar archivos con la API FileReader de JavaScript

Introducción

Navegadores web que admiten FileReadery input type="file"permiten a los usuarios cargar archivos.

En este artículo, explorará las API File, FileReadery FileReaderSync.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Será útil comprender los métodos de JavaScript , EventListenery .Promises
• Un editor de código.
• Un navegador web moderno que admite File, FileReader, y FileReaderSync.

Subir un archivo

Primero, para obtener un archivo de un usuario, necesitamos usar un inputelemento:

input type="file" /

Este código permitirá a los usuarios cargar archivos desde sus máquinas.

A continuación se muestra un ejemplo de cómo cargar un archivo mediante HTML form:

form enctype="multipart/form-data" action="/upload" method="post"  input type="file" //form

Para un mayor control en el manejo de las cargas, puedes utilizar JavaScript en lugar de HTML formpara enviar los archivos:

let file = document.getElementById('input').files[0];let formData = new FormData();formData.append('file', file);fetch('/upload/image', {method: "POST", body: formData});

Este enfoque utiliza FormDatay fetch.

Uso File Blobde propiedades

En los navegadores modernos, Filestienen Blobpropiedades y funciones. Estas funciones nos permiten leer el archivo.

• .text()transforma el archivo en un flujo y luego en una cadena.
• .stream()devuelve un ReadableStream.
• .arrayBuffer()devuelve un ArrayBufferque contiene los datos del blob en formato binario.
• .slice()permite obtener partes del archivo.

Crea un nuevo myFile.txtarchivo con algo de texto:

miArchivo.txt

Example file content.

Luego, crea un nuevo file-blob-example.htmlarchivo:

archivo-blob-ejemplo.html

!DOCTYPE htmlhtmlbody  input type="file" /  script    const streamToText = async (blob) = {      const readableStream = await blob.getReader();      const chunk = await readableStream.read();      return new TextDecoder('utf-8').decode(chunk.value);    };    const bufferToText = (buffer) = {      const bufferByteLength = buffer.byteLength;      const bufferUint8Array = new Uint8Array(buffer, 0, bufferByteLength);      return new TextDecoder().decode(bufferUint8Array);    };    document.getElementById('input').addEventListener('change', function(e) {      let file = document.getElementById('input').files[0];      (async () = {        const fileContent = await file.text();        console.log('.text()', fileContent);        const fileContentStream = await file.stream();        console.log('.stream()', await streamToText(fileContentStream));        const buffer = await file.arrayBuffer();        console.log('.buffer()', bufferToText(buffer));        const fileSliceBlob = file.slice(0, file.length);        const fileSliceBlobStream = await fileSliceBlob.stream();        console.log('.slice() and .stream()', await streamToText(fileSliceBlobStream));      })();    });  /script/body/html

Ábrelo file-blob-example.htmlen tu navegador web y agrega el myFile.txtarchivo a la carpeta input. En tu consola de desarrollador web, verás que el contenido del archivo se lee en voz alta usando .text(), .stream(), .buffer()y .slice().

Este enfoque utiliza ReadableStream, TextDecoder(), y Uint8Array().

Aplicación FileReaderdel ciclo de vida y métodos

Hay 6 eventos principales asociados a FileReader:

• loadstart:Se activa cuando comenzamos a cargar un archivo.
• progress:Se activa cuando el blob se lee en la memoria.
• abort:Se dispara cuando llamamos .abort.
• error:Se activa cuando se produce un error.
• load:Se activa cuando la lectura es exitosa.
• loadend:Se activa cuando se carga el archivo y no se llama a error o abort o si la carga inicia una nueva lectura.

Para empezar a cargar nuestro archivo tenemos cuatro métodos:

• readAsArrayBuffer(file): Lee el archivo o blob como un búfer de matriz. Un caso de uso es enviar archivos grandes a un trabajador de servicio.
• readAsBinaryString(file): Lee el archivo como una cadena binaria
• readAsText(file, format):Lee el archivo como USVString (casi como una cadena) y puede especificar un formato opcional.
• readAsDataURL(file):Esto devolverá una URL donde podrá acceder al contenido del archivo, está codificado en Base64 y listo para enviarse a su servidor.

Crea un nuevo filereader-example.htmlarchivo que utilice readAsDataURL():

ejemplo-de-lector-de-archivos.html

!DOCTYPE htmlhtmlhead  style    body {      background: #000;      color: white;    }    #progress-bar {      margin-top: 1em;      width: 100vw;      height: 1em;      background: red;      transition: 0.3s;    }  /style/headbody  input type="file" /  progress value="0" max="100"/progress  div/div  script    const changeStatus = (status) = {      document.getElementById('status').innerHTML = status;    }    const setProgress = (e) = {      const fr = e.target;      const loadingPercentage = 100 * e.loaded / e.total;      document.getElementById('progress-bar').value = loadingPercentage;    }    const loaded = (e) = {      const fr = e.target;      var result = fr.result;      changeStatus('Finished Loading!');      console.log('Result:', result);    }    const errorHandler = (e) = {      changeStatus('Error: ' + e.target.error.name);    }    const processFile = (file) = {      const fr = new FileReader();      fr.readAsDataURL(file);      fr.addEventListener('loadstart', changeStatus('Start Loading'));      fr.addEventListener('load', changeStatus('Loaded'));      fr.addEventListener('loadend', loaded);      fr.addEventListener('progress', setProgress);      fr.addEventListener('error', errorHandler);      fr.addEventListener('abort', changeStatus('Interrupted'));    }    document.getElementById('input').addEventListener('change', (e) = {      const file = document.getElementById('input').files[0];      if (file) {        processFile(file);      }    });  /script/body/html

Ábralo filereader-example.htmlen su navegador web y agregue el myFile.txtarchivo a la carpeta input. Aparecerá una barra de progreso en la pantalla a medida que se procesa el archivo. Si se carga correctamente, indicará 'Start Loading', 'Loaded', y 'Finished Loading'.

UsandoFileReaderSync

FileReaderes una API asincrónica porque no queremos bloquear el hilo principal mientras leemos archivos. Por ejemplo, no queremos que nuestra interfaz de usuario deje de funcionar cuando el navegador intenta leer un archivo muy grande. Sin embargo, existe una versión sincrónica de FileReaderllamada FileReaderSync. Solo podemos usarla FileReaderSyncen Web Workers. Los Web Workers tienen su propio hilo, por lo que no bloquearán el hilo principal. FileReaderSyncusa los mismos métodos que FileReader:

• FileReaderSync.readAsArrayBuffer()
• FileReaderSync.readAsBinaryString()
• FileReaderSync.readAsText()
• FileReaderSync.readAsDataURL()

No hay controladores de eventos porque es sincrónico.

Conclusión

En este artículo, exploró las API File, FileReadery FileReaderSync.

Tómese el tiempo para verificar la compatibilidad del navegador con estas funciones para asegurarse de que sean aplicables a los usuarios de sus proyectos.

• ¿Puedo utilizar FileAPI?
• ¿Puedo utilizar FileReaderAPI?
• ¿Puedo utilizar FileReaderSyncAPI?

Continúe su aprendizaje con API web adicionales .