Error using async and await with filereader

Question

I'm trying to read a file using FileReader:

async readFile(event: any) {
    var file = event.target.files[0];
    var data:string
    if (file) {   
        var reader:FileReader = new FileReader();
         reader.onload = async function (evt : FileReaderEvent) {
            data = await evt.target.result;
            console.log(evt.target.result);

        };
        console.log(file);
        console.log(data);
        await reader.readAsText(file);
        await this.processFileContent(data);
    }
 }

However, evt.target.result still gets printed after my console.log(file) call.

Does anyone know how I can obtain the result of the file and pass it to my processFileContent function?

does processFileContent expect a File object (which is what you're giving it now) or a string ? — Touffy
– Touffy, Commented Jan 9, 2018 at 16:54
Then that's your first problem. You're reading the file, but then you're not saving the result anywhere, much less passing it to this.processFileContent. — Touffy
– Touffy, Commented Jan 9, 2018 at 16:57
i guess it's printed first because it's before the await. and the async inner function will be called later inside the event loop... — snap
– snap, Commented Jan 9, 2018 at 16:58
@Touffy I updated the code so that I store the result, but still having issues — blazerix
– blazerix, Commented Jan 9, 2018 at 17:00

Endless · Accepted Answer · 2022-01-17 15:36:51Z

45

Use the new read methods on the blob itself

/** @type {Event} evt */
async readFile (evt) {
  const [file] = evt.target.files
  if (!file) return
  const data = await file.text()
  return this.processFileContent(data)
}

Alternative:

evt.target.files[0]?.text().then(this.processFileContent)

edited Jan 17, 2022 at 15:36

answered Jan 9, 2018 at 21:06

Endless

38.7k14 gold badges118 silver badges138 bronze badges

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

Comments

Be Kind · Accepted Answer · 2020-08-12 08:24:54Z

24

Needed to leverage reader to convert blob to base64, prefer to use async-await syntax so I chose to extract reader logic into helper like this:

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

and calling it using await in main code:

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)

answered Aug 12, 2020 at 8:24

Be Kind

5,2521 gold badge42 silver badges47 bronze badges

1 Comment

Be Kind Over a year ago

@MartinsOnuoha there's no error handling though. If you do implement it, feel free to update the answer.

rohit · Accepted Answer · 2023-02-27 06:12:12Z

-1

const logFile = async (e) => {
  const { image } = await readImage(e.target.files[0])
  document.getElementById("image").appendChild(image)
}

const readImage = (
  file
) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      const image = new Image();
      image.src = e.target?.result;

      image.onload = () => {
        resolve({ image, sizeInMB: Math.round(file.size / 1024 / 1024) });
      };

      image.onerror = () => {
        reject(`couldn't read image`);
      };
    };

    reader.onerror = (e) => {
      reject(`couldn't read image`);
    };

    reader.readAsDataURL(file);
  });
};

#image > img {
  width: 100px;
  height: 100px;
}

<strong>upload image</string>
<input type="file" onchange="logFile(event)" />
<div style="width:100px;height:100px" id="image"></div>

answered Feb 27, 2023 at 6:12

rohit

291 bronze badge

1 Comment

Endless Over a year ago

why post something about using images when OP tries to read files as text? also it's better to just simply just use URL.createObjectURL instead of using the fileReader. and if you want to await image load then use image.decode()

Collectives™ on Stack Overflow

Error using async and await with filereader

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related