Converting Image to base64 string in Typescript

Question

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

Lual · Accepted Answer · 2019-07-22 15:53:05Z

42

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);
   };
}

edited Jul 22, 2019 at 15:53

Lual

3,2262 gold badges23 silver badges27 bronze badges

answered Nov 3, 2018 at 7:43

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tanwer Over a year ago

Instead of console.log how can I get this base64 into model property

Suresh Kumar Ariya Over a year ago

You can assign the base64 content to model object for API submission. updated the code

Tanwer Over a year ago

thats the problem , model object is not available inside reader.onload function as suggested by you

Tanwer Over a year ago

After Few Changes it worked - "reader.result.toString().split(',')[1]" , Thanks

Tanwer Over a year ago

one question here , will it work if JavaScript is disabled in browser ?

|

Suhas Mandumale · Accepted Answer · 2018-11-03 08:09:45Z

2

This is something i have done to upload a profile picture i have also checked for size less than 512KB and then i have posted that image to my API in next function

i have used FileReader() and readAsDataURL() to convert the file to base64

/* On Change Profile image*/    
    onProfileChange(event:any) {
        if(event.target.files && event.target.files[0]) {
            if(event.target.files[0].type && event.target.files[0].type.split('/')[0] == ["image"] && event.target.files[0].size <= 512000){
                this.file = event.target.files[0];
                var reader = new FileReader();
                reader.onload = (event:any) => {
                    this.Image = event.target.result;
                }
                reader.readAsDataURL(event.target.files[0]);
                this.isBrowser = false;
            } else {
                this.isBrowser = true;
                this._toastr.error("Max image upload size is 500KB only");
            }
        }
    }
    /*end Of On Change profile Image*/


    /*Image api*/
    AddImage(event: any){
        let data=new FormData();
        if(this.file){
            data.append('image',this.file);
            this._db.Post('api/users/image',data).subscribe(b=>{
                if(b.IsResult){
                    this._toastr.success(b.ResultMsg);
                    this.getProfileDetail();
                    this.isBrowser=true;
                }
            });
        }else{
            this._toastr.error("Something went wrong");
        }
    }

answered Nov 3, 2018 at 8:09

Suhas Mandumale

951 gold badge3 silver badges10 bronze badges

2 Comments

Tanwer Over a year ago

From where this come ? "this.Image " Where is this declaration ?

Suhas Mandumale Over a year ago

declare image as Image: string = '';

score 1 · Accepted Answer · 2018-11-03 07:59:58Z

1

Read image as base64 :

  selectFile(event){
      var files = event.target.files;
      var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload =this.handleFile.bind(this);

        reader.readAsBinaryString(file);
    }
  }



  handleFile(event) {
     var binaryString = event.target.result;
            this.base64textString= btoa(binaryString);
            console.log(btoa(binaryString));
    }


***********************************************************************************

OR

Alternate use NPM packge :

https://www.npmjs.com/package/alife-file-to-base64

install : npm install alife-file-to-base64 --save

Add Dependecy to your project

Import AlifeFileToBase64Module to your project and include module in imports section

import { AlifeFileToBase64Module } from 'alife-file-to-base64';

@NgModule({
  declarations: [
  ],
  imports: [
    AlifeFileToBase64Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Syntax to use anywhere in your project:

<input type="file" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" [(fileModel)]="files" />

onFileChanged : Will get called when file will get selected by user. It will contain filename, filesize,type and base64.
fileModel : To set the value of component variable

edited Nov 3, 2018 at 7:59

answered Nov 3, 2018 at 7:51

user6299088

3 Comments

user6299088 Over a year ago

try this to getbinary file

user6299088 Over a year ago

check this answer

Tanwer Over a year ago

I will try your second option , NPM Package too

Collectives™ on Stack Overflow

Converting Image to base64 string in Typescript

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related