Click here to Skip to main content
14,766,265 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
want to encode the uploaded files to base64 so that I can pass them to the request. The problem is that I'm using Angular 2 with Typescript and I couldn't find any info on how to do that. I found that in Javascript it can be done with canvas but I don't know how could I implement the code in Typescript. Even I need to know how to bind the coming base64 image in html please help me

What I have tried:

I am getting all other json data except base64.i need to bind it as an image.same way i need to post also

my html here ,user can uplod image here as jpeg

<input type="file" id="taxname" [(ngModel)]="spam.ImageData" class="form-control browse" value="Browse">

while binding am getting base64 only,how to convert this?. with in one api i neeed to get

                 <span>{{ m.ImgeData }}</span>


how can i archive this?
Updated 23-Mar-18 10:48am

1 solution

<input type="file" class="form-control browse" ngModel (change)="getFiles($event)">

 getFiles(event) {
     this.files =;
     var reader = new FileReader();
     reader.onload = this._handleReaderLoaded.bind(this);

 _handleReaderLoaded(readerEvt) {
     var binaryString =;
     this.filestring = btoa(binaryString);  // Converting binary string data.
Dave Kreskowiak 23-Mar-18 19:15pm
This is just a code dump, completely unexplained. This is not a solution to the OP's question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900