Console log showing mismatched value - console

Question

When I select the first image, the "out" shows undefined & "in" shows the byte array result.
But after selecting the second image, "out" prints the byte array value of previous image & "in" shows the result of second(current) image.
upload(files: any) {
console.log('jj');
const file = files.files[0];
if (!file) return;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
this.url = reader.result;
var base64Index = this.url.indexOf(';base64,') + ';base64,'.length;
var base64 = this.url.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
let imgArray = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
imgArray[i] = raw.charCodeAt(i);
}
this.imgArrayy = imgArray;
console.log("in", this.imgArrayy);
}
console.log("out", this.imgArrayy);
}
Console output:-
How can I get the correct value for each corresponding image?

Answer 1

The readAsDataURL is an async function. That means the code may not execute in order.
The sequence of your code is:
schedule the readAsDataURL
print console.log out
execute the onload
print console.log in
console.log out is run before onLoad. Therefore the console.log out is undefined.
Is it typescript? I am not sure the syntax.
But the idea is change the upload function to async and use await to wait for the completion of file read.
Or you can change upload to async but use FileReaderSync instead. https://www.javascripture.com/FileReaderSync
Then, the sequence of code will be:
schedule the readAsDataURL
wait until readAsDataURL completed
execute the onload & print console.log in
print console.log out
To fix this, you can try:
const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
async function upload(files) {
console.log('jj');
const file = files.files[0];
if (!file) return;
await new Promise((resolve) => {
var reader = new FileReader();
reader.onload = (event) => {
this.url = reader.result;
var base64Index = this.url.indexOf(';base64,') + ';base64,'.length;
var base64 = this.url.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
let imgArray = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
imgArray[i] = raw.charCodeAt(i);
}
this.imgArrayy = imgArray;
console.log("in", this.imgArrayy);
resolve(reader.result);
};
reader.readAsDataURL(file);
});
console.log("out", this.imgArrayy);
}
upload({files:[blob]});
output
jj
VM532:20 in Uint8Array(22) [123, 10, 32, 32, 34, 104, 101, 108, 108, 111, 34, 58, 32, 34, 119, 111, 114, 108, 100, 34, 10, 125]
VM532:25 out Uint8Array(22) [123, 10, 32, 32, 34, 104, 101, 108, 108, 111, 34, 58, 32, 34, 119, 111, 114, 108, 100, 34, 10, 125]