El objeto FileReader

Descubra qué es un objeto FileReader y cómo usarlo

El FileReaderobjeto lee asincrónicamente el contenido de un archivo.

Se exponen esos 4 métodos de lectura que podemos utilizar para iniciar un proceso de lectura:

• readAsText()
• readAsDataURL()
• readAsArrayBuffer()
• readAsBinaryString()

y un abort()método para detener cualquier operación de lectura.

La lectura del archivo es asincrónica y el objeto exponen varios eventos a los que podemos conectarnos para seguir el progreso de la operación:

• onloadSe activa cuando la lectura finaliza con éxito.
• onloadstartSe activa cuando comienza la lectura.
• onprogressSe activa cuando la lectura está en progreso.
• onloadendSe activa cuando la lectura finaliza, con éxito o sin éxito.
• onerrorSe activa cuando ocurre un error
• onabortSe activa cuando se cancela la lectura.

Una vez que se completa una operación de lectura, la resultpropiedad de FileReader contiene el contenido del archivo.

La errorpropiedad contiene el mensaje de error, si ocurrió un error, y readyStatecontiene el estado de las operaciones: 0si no se cargaron datos, 1si la carga de datos está en progreso y 2si la carga ha finalizado.

Cargue el contenido de un blob en una cadena de texto.

En este ejemplo usamos ese texto y lo colocamos en el #contentHTML interno del elemento:

//..file is available as a blobconst reader = new FileReader()reader.onload = (event) = {  const text = reader.result  document.getElementById('content').innerHTML = text}reader.onerror = (e) = {  console.error(e)}reader.readAsText(file)

A continuación se muestra un ejemplo que lee el contenido de un archivo de texto cuando se carga mediante un inputelemento e imprime su contenido en la consola:

input type="file" allow="text/*" /

const input = document.querySelector('input')input.addEventListener('change', (e) = {  const reader = new FileReader()  reader.onload = (event) = {    const text = reader.result    console.log(text)  }  reader.onerror = (e) = {    console.error(e)  }  reader.readAsText(input.files[0])})

Cargue el contenido de un blob en una URL de datos .

//..file is available as a blobconst reader = new FileReader()reader.onload = (event) = {  const dataURL = event.target.result  document.getElementById('image').src = dataURL}reader.readAsDataURL(file)

Carga el contenido de un blob en un ArrayBuffer.

//..file is available as a blobconst reader = new FileReader()reader.onload = (event) = {  const buffer = reader.result  const data = new Int32Array(buffer)  //...}reader.onerror = (e) = {  console.error(e)}reader.readAsArrayBuffer(file)

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase