How to wait FileReader.onload loads file successfully?

Question

what I want to do is just simply read multiple file information through for loop. However, Javascript does not wait for the FileReader.onload even if I used Promise.

How can we wait for the FileReader.onload ? Here is the code example.

    const promises = [];
    for (let i = 0; i < files.length; i++) {
      promises.push(
        new Promise((resolve, reject) => {
          const fileReader = new FileReader();
          const filename = files[i].object.name;

          audioDict.filename[i] = filename;
          fileReader.readAsArrayBuffer(files[i].object);
          fileReader.onload = function (e: any) {
            audioCtx
              .decodeAudioData(e.target.result)
              .then(function (decodedData: AudioBuffer) {
                // source.buffer = decodedData;

                audioDict.audio[i] = {};
                for (let c = 0; c < decodedData.numberOfChannels; c++) {
                  audioDict.audio[i][c] = decodedData.getChannelData(c);
                }
                audioDict.sr[i] = decodedData.sampleRate;
              });
          };
          resolve(audioDict);
        })
      );
    }

    Promise.all(promises).then(() => {
      // Do something using audioDict here.
      console.log("done!");
    });

Put the resolve after `audioDict.sr[i]` – evolutionxbox Jul 05 '22 at 15:54 — evolutionxbox, Jul 05 '22 at 15:54

score 1 · Answer 1 · answered Jul 05 '22 at 16:03

I guess moving your resolve function call inside the onLoad function will solve this problem.

const promises = [];
for (let i = 0; i < files.length; i++) {
  promises.push(
    new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      const filename = files[i].object.name;

      audioDict.filename[i] = filename;
      fileReader.readAsArrayBuffer(files[i].object);
      fileReader.onload = function (e: any) {
        audioCtx
          .decodeAudioData(e.target.result)
          .then(function (decodedData: AudioBuffer) {
            // source.buffer = decodedData;

            audioDict.audio[i] = {};
            for (let c = 0; c < decodedData.numberOfChannels; c++) {
              audioDict.audio[i][c] = decodedData.getChannelData(c);
            }
            audioDict.sr[i] = decodedData.sampleRate;
            resolve(audioDict);
          });
      };
    })
  );
}

Promise.all(promises).then(() => {
  // Do something using audioDict here.
  console.log("done!");
});

How to wait FileReader.onload loads file successfully?

1 Answers1