Angular

How To Convert Image To Base64 String In Angular 13

Here, we will learn about how to convert the image to base64 using Angular 13. Image upload is one of the basic functionality for any application.

So, let’s starts the code

Create New Angular Project.

ng new Demo
Install Bootstrap in your Application.
npm install bootstrap

Open the angular.json file and add the library reference in styles array

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],

app.module.ts [import ReactiveFormModule]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Write below Code in app.component.html

<div class="container">
  <div class="row" >
    <div class="col-lg-12" style="background-color:rgb(235, 231, 231);margin-top: 10%;padding: 10px;border:3px dotted rgb(110, 109, 109);">
      <form [formGroup]="uploadImageForm" class="form-horizontal" (ngSubmit)="onSubmit()">

        <div class="row form-group">
           <div class="col-md-12" style="text-align: center;">
             <h2>Upload Image</h2>
           </div>
        </div>

        <div class="row form-group">
          <div class="col-md-3 mt-8" >           
          </div>
          <div class="col-md-6 mt-8" style="margin-top:3%">
            <input type="file" class="form-control" multiple style="height: 100%;" accept="image/*"
              formControlName="Image" (change)="imageUpload($event)">
          </div>
          <div class="col-md-3 mt-8">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-md-3 mt-2">
          </div>
          <div class="col-md-5 mt-2">
            <img [src]="profileImage" (load)="handleImageLoad()" height="80%" width="20%" style="object-fit: cover;">
          </div>
          <div class="col-md-4 mt-2">

          </div>
        </div>

        <div class="row form-group">
          <div class="col-lg-12 mt-2" style="text-align: right;">
            <button type="submit" class="btn btn-dark" style="color: white;">Save</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

Write below code in app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  
  uploadImageForm!:FormGroup;
  profileImage:any;
  Imageloaded:boolean = false;

  constructor(private fb:FormBuilder,private changeDetector:ChangeDetectorRef)
  {}

  ngOnInit(): void 
  {
    this.uploadImageForm = this.fb.group({
      Image:['']
    });
  }

  imageUpload(event:any)
  {
    var file = event.target.files.length;
    for(let i=0;i<file;i++)
    {
       var reader = new FileReader();
       reader.onload = (event:any) => 
       {
           this.profileImage = event.target.result;
           this.changeDetector.detectChanges();
       }
       reader.readAsDataURL(event.target.files[i]);
    }
  }

  handleImageLoad()
  {
    this.Imageloaded = true;
  }

  onSubmit()
  {
     var Image = this.profileImage; //get Image Base64
     console.log(Image);
  }



}