Problem with async/await with FileReader in JavaScript

Question

I'm using FileReader in a Vue.js project, and I have a problem with this code:

async uploadDocuments(files) {
    for (let file of files) {
        let fileName = file.name;
        let fileContent;
        let reader = new FileReader();
        reader.onload = async () => {
            fileContent = reader.result;
            await this.submitFile(fileContent, fileName, fileType)
                .then(/* THEN block */)
                .catch(/* CATCH block */);
        };
        reader.onerror = (error) => { console.warn(error); };
        reader.readAsDataURL(file);
    }
    console.log("COMPLETED");
}

async submitFile(fileContent, fileName, fileType) {
    // this function should handle the file upload and currently contains a timeout
    await new Promise((resolve) => setTimeout(resolve, 3000));
}

This is the desired execution order (example with two files):

(wait 3s)
THEN block (file 1)
(wait 3s)
THEN block (file 2)
COMPLETED

But this is the actual execution order:

COMPLETED
(wait 3s)
THEN block
THEN block

The "THEN block" is correctly executed after the timeout, but the execution of the code in the for loop continues without waiting the execution of the onload function.

How can I make the reader asynchronous? I tried many solutions (such as wrapping the for loop in a promise and putting the resolve() function inside .then()) but none of them works.

Why read the file content into memory and upload them as base64? that is the worst. ~3 more bandwidth unnecessary processing, not enough RAM to handle large files. just append the files onto a FormData and upload that instead as a application/multipart-formdata — Endless
– Endless, Commented May 11, 2021 at 10:18

sandrooco · Accepted Answer · 2021-05-11 13:56:17Z

31

I'd recommend to "promisify" the Reader thing and then use Promise.all until all the files are uploaded.

uploadDocuments = async (event, files) => {
  const filePromises = files.map((file) => {
    // Return a promise per file
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = async () => {
        try {
          const response = await this.submitFile(
            reader.result,
            file.name,
            fileType
          );
          // Resolve the promise with the response value
          resolve(response);
        } catch (err) {
          reject(err);
        }
      };
      reader.onerror = (error) => {
        reject(error);
      };
      reader.readAsDataURL(file);
    });
  });

  // Wait for all promises to be resolved
  const fileInfos = await Promise.all(filePromises);

  console.log('COMPLETED');

  // Profit
  return fileInfos;
};

edited May 11, 2021 at 13:56

answered May 11, 2021 at 10:17

sandrooco

8,87611 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taekwondavide Over a year ago

Thank you, this works! I have one more problem now. I replaced the timeout with the actual upload code, axios.post(...), and I need to execute the /* CATCH block */ in the case that the post should fail. I tried with axios.post(...).then(...).catch((err) => Promise.reject(err)) but I think that it's wrong and it does not work with your Promise.all(). Do you have suggestions? Thank you!

sandrooco Over a year ago

Nice, please consider marking as resolved. You could wrap const response = await this.submitFile(...) in a try/catch block and call reject in the catch.

KManish Over a year ago

Life saver. Can't believe the answer was in plain sight. Nice.

Milan Chauhan · Accepted Answer · 2021-05-11 10:30:55Z

-4

Try this.

Add await before the reader.onload it will hold until then or catch block execute successfully

async uploadDocuments(event) {
    for (let file of files) {
        let fileName = file.name;
        let fileContent;
        let reader = new FileReader();
        await reader.onload = async () => {
            fileContent = reader.result;
            await this.submitFile(fileContent, fileName, fileType)
                .then(/* THEN block */)
                .catch(/* CATCH block */);
        };
        reader.onerror = (error) => { console.warn(error); };
        reader.readAsDataURL(file);
    }
    console.log("COMPLETED");
}

async submitFile(fileContent, fileName, fileType) {
    // this function should handle the file upload and currently contains a timeout
    await new Promise((resolve) => setTimeout(resolve, 3000));
}```

edited May 11, 2021 at 10:30

answered May 11, 2021 at 10:28

Milan Chauhan

353 bronze badges

1 Comment

Liam Over a year ago

reader.onload is an event handler, it doesn't make sense to try and add await

Collectives™ on Stack Overflow

Problem with async/await with FileReader in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related