JS wait until load event in filereader is done

Question

I have a JavaScript program, (it's actually a TypeScript program), that reads a file chunk by chunk with a FileReader:

while (j < size) {
    let blob = selectedFiles[i].slice(offset, offset + chunk_size);
    let reader = new FileReader();
    reader.addEventListener('load', async function () {
        let wordArray = typeof reader.result === "string" ? CryptoES.lib.WordArray.create(new TextEncoder().encode(reader.result)) : CryptoES.lib.WordArray.create(reader.result);
        let segment = CryptoES.AES.encrypt(wordArray, pass).toString();
        segments.push(segment);
    });
    await reader.readAsArrayBuffer(blob);
    offset += chunk_size;
    j += chunk_size;
}

But when I process the segments Array later, it's empty. If I add an alert() after the while loop, wait a little bit after it appears and then press 'OK', my array has all it's contents it's supposed to have. My async/await doesn't seem to work properly. I'm using it inside an async function. What did I wrong?

Thank you!

EDIT: If you have other improvements for this piece of code, let me know in the comments as I'm still not a pro :)

CherryDT · Accepted Answer · 2022-08-21 20:56:38Z

readAsArrayBuffer does not return a promise (it returns nothing, in fact), so it doesn't make sense to await it (that does nothing).

Instead, you need to create a promise that resolves when the load event fires and wait on that. I put this part into a separate function readBlobToArrayBuffer for readability, and I also added event listeners on error and abort to reject the promise in that case instead of just hanging indefinitely.

const readBlobToArrayBuffer = blob => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => resolve(reader.result));
    reader.addEventListener('error', () => reject(new Error('Reading file failed'));
    reader.addEventListener('abort', () => reject(new Error('Reading file aborted'));
    reader.readAsArrayBuffer(blob);
});

while (j < size) {
    const blob = selectedFiles[i].slice(offset, offset + chunk_size);
    const result = await readBlobToArrayBuffer(blob);
    const wordArray = typeof result === "string"
      ? CryptoES.lib.WordArray.create(new TextEncoder().encode(result))
      : CryptoES.lib.WordArray.create(result);
    const segment = CryptoES.AES.encrypt(wordArray, pass).toString();
    segments.push(segment);
    offset += chunk_size;
    j += chunk_size;
}

Collectives™ on Stack Overflow

JS wait until load event in filereader is done

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related