In angular Reader.onload is getting executed after calling the API

Question

I am working on an Angular code to Upload file, where file is selected using Angular UI and then an API is called from where File is saved.

The problem is in Angular code, while converting File into Base64, the API is called first and then the File is converted into Base64, which should be other way round.

Everything is working fine but because the Base64 value is getting passed to API as empty, the saved file is blank.

Below is my Angular Code:

async onUpload() {
  
let file1=new FileToUpload();
file1.fileName = this.theFile.name;
file1.fileSize = this.theFile.size;
file1.fileType = this.theFile.type;
file1.lastModifiedTime = this.theFile.lastModified;
file1.lastModifiedDate = "";
debugger
let reader=new FileReader();

reader.readAsDataURL(this.theFile);
reader.onload =  ()=> {
  // Store base64 encoded representation of file
  file1.fileAsBase64 = reader.result!.toString();
}

this.sharedservice.upload(file1).subscribe( data =>
  {
    debugger
    this.responseData=JSON.stringify(data);
  }
);

} }

export class FileToUpload {
fileName: string = "";
fileSize: number = 0;
fileType: string = "";
lastModifiedTime: number = 0;
lastModifiedDate: string =Date() ;
fileAsBase64: string = "";
}

Then move your `upload` logic inside the `.onload` callback. If you read https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call, you'll have a general idea of how async callbacks work — eko, May 25 '21 at 14:08
I missed th OnChange Event Code:onChange(event:any) { this.theFile = event.target.files[0]; } — pradeep, May 25 '21 at 14:08

In angular Reader.onload is getting executed after calling the API

0 Answers0