Javascript - utilizar FileReader con Promises

Question

    var reader = new FileReader(),
        file1 = new Blob(['Hola'],{type : 'text/plain'}),
        file2 = new Blob(['Mundo'],{type : 'text/plain'}),
        result = null;

     reader.addEventListener('load',function(event){
        result = this.result;
     });

reader.readAsText(file1);

var interval = setInterval(function(){
 if(reader.readyState === 2){
  clearInterval(interval);
    reader.readAsText(file2);
  }
},100);

supongamos que necesito leer 2 archivos de manera secuencial con la misma instancia de FileReader, entonces para evitar que me salte un error "DOMException: Failed to execute 'readAsText' on 'FileReader': The object is already busy reading Blobs." entonces lo que hago es utilizar un setInterval y que este revisando cada 100 milisegundos si la propiedad readyState de reader es igual a 2(DONE) y entonces ahí si leer el otro archivo.

sin embargo me gustaría saber como puedo lograr algo parecido utilizando promesas ya que lo e intentado y la verdad es que no e podido conseguir el hecho de leer un archivo, esperar que termine y entonces ahí si comenzar a leer otro con la misma instancia de FileReader (realmente no me interesa si es peor intentar hacerlo de manera sincrona simplemente quiero saber como poder hacer esto utilizando promesas y si de alguna manera puedo sustituir los "listeners"(load,loadstart,progress,loadend etc...) por promesas)

En esta pregunta hay algunos ejemplos sobre el uso de promesas [¿Qué es una promesa en Javascript](https://es.stackoverflow.com/q/64265/29967), espero te sea útil. — A. Cedano, May 04 '17 at 21:14

score 0 · Answer 1 · answered May 04 '17 at 21:00

Puedes intentar usar este código la verdad no lo he probado.

    function readFile(file) {
    var reader = new FileReader();
    var deferred = $.Deferred();

    reader.onload = function(event) {
        deferred.resolve(event.target.result);
    };

    reader.onerror = function() {
        deferred.reject(this);
    };

    if (/^image/.test(file.type)) {
        reader.readAsDataURL(file);
    } else {
        reader.readAsText(file);
    }

    return deferred.promise();
}

Este es el link del repo

score 0 · Answer 2 · answered May 08 '17 at 23:18

Para responder tu pregunta he creado la función readFile(), que retorna una promesa. Esta promesa, a través de su método then() retorna el contenido del archivo cuando se haya cargado y vuelve a llamar a la función readFile() para leer el siguiente archivo

let file1 = new Blob(['Hola'],{type : 'text/plain'}),
    file2 = new Blob(['Mundo'],{type : 'text/plain'}),
    result = null;


function readFile(file){
  return new Promise((resolve,reject) => {
    let reader = new FileReader()
    reader.onload = function(){
      resolve(this.result)
    }
    reader.readAsText(file)
  })
}

readFile(file1).then(data => {
  console.log('Se leyo el archivo 1')
  console.log(data)
  readFile(file2).then(data => {
    console.log('Se leyo el segundo archivo')
    console.log(data)
  })
})

Solo faltaría el evento `onerror` para ejecutar el evento `reject` en caso de que algo falle, de lo contrario la consola imprimirá un `unhandledrejection`. — Rimuru Tempest, Jan 07 '20 at 04:06

Javascript - utilizar FileReader con Promises

2 Answers2