1

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;
        });
      }
Akhil Raghav
  • 313
  • 1
  • 4
  • 16

1 Answers1

0

Declare fileInfo object global like this

export class test{
fileInfo = {
          fileUrls: [], //here I am clearing array after async call 
          names: [] // same as above 
 };
 

remaining is same the issue whenever I am calling that function fileInfo object is getting reintialized

Akhil Raghav
  • 313
  • 1
  • 4
  • 16