I am trying to add an image second time but its clearing the previous image from service file.I have tried this approach but failed to implement.here I am facing the issue is "this.fileInfo.fileUrls.push(e.target.result);" this line is getting excuting after the promise resolved.So I want to write a await function? Image Upload with preview and Delete option - Javascript / Jquery
service.ts
async selectImageFile(event) {
this.fileInfo = {
selectedFiles: event.target.files,
fileUrls: [],
names: []
};
for (let i = 0; i < this.fileInfo.selectedFiles.length; i++) {
this.fileInfo.names.push({
file_name: this.fileInfo.selectedFiles[i].name.replace(/\s/g, "_"),
type: "review"
});
}
console.log('files Name:', this.fileInfo.names);
const files = event.target.files;
this.fileInfo.fileUrls = [];
if (files) {
for (let i=0;i<files.length;i++) {
var f = files[i]
const reader = new FileReader();
reader.onload = (e: any) => {
console.log(e.target);
this.fileInfo.fileUrls.push(e.target.result);
};
reader.readAsDataURL(f);
}
}
console.log(this.fileInfo);
return this.fileInfo;
}
component.ts
selectPhoto(event) {
console.log('event from temp',event);
this.resturantDetailsService.selectImageFile(event).then(fileInfo => {
console.log('retrun promise',fileInfo)
this.selectedFiles = fileInfo.selectedFiles;
this.fileUrls = fileInfo.fileUrls;
// console.log(this.fileUrls);
this.names = fileInfo.names;
});
}