Converting Image to base64 string in Typescript

Tanwer Published at Dev

Tanwer

I am trying to post base64 string to my api from Angular 5

First I have to convert it to base64 from image , After checking on internet and MDN I developed a method

  OnIDChange(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onloadend = this.handleReaderLoaded.bind(this, "Id");
    reader.readAsBinaryString(file);
  }

And

    handleReaderLoaded(readerEvt:any, indicator: string) {
     var binaryString = readerEvt.target.result;
     if (indicator == "Id") {
       this.Model.IDPhoto = btoa(binaryString);
     }
  }

I have to store this base64 in Model Property to post it in api

But in console it give error "Cannot read property 'result' of undefined" on

var binaryString = readerEvt.target.result;

How can I convert image to base64 , if there is another more suitable way instead of this (any npm package or something else then let me know that too)

Thanks in advance .

Reference from MDN MDN Link

Suresh Kumar Ariya

You need to use readAsDataUrl():

function getBase64(event) {
   let me = this;
   let file = event.target.files[0];
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     //me.modelvalue = reader.result;
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

Collected from the Internet

Please contact [email protected] to delete if infringement.