Error using async and await with filereader
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?
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)
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)