I've been using Angular and I'm dealing with a function that handles image input.
While working with the inserted images, I extract information such as name and size. However, my issue arises when I need to upload an image (to determine its height and width) because the upload function is executing before the function that retrieves the image information.
This results in 'undefined' values for width and height.
The upload function seems to be triggering before image.onload gets called :(
Any idea why this might be happening?
Component.ts
detectFiles(event) {
if (files.length < 8) {
for (let index = 0; index < files.length; index++) {
this.items.push(item);
const reader = new FileReader();
reader.onload = (e: any) => {
item.url = e.target.result;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
item.sizeH = image.width;
};
}
formData.append('file', files[index]);
reader.readAsDataURL(files[index]);
}
}
}