Harnessing the Magic of Base64: Converting Images and PDFs with Ease

In today’s digital landscape, the ability to seamlessly handle multimedia files is crucial for web developers. Enter Base64 encoding — a powerful technique that transforms binary data into text strings, opening the door to a myriad of possibilities.

In this tutorial, we’ll explore how to leverage Base64 encoding to convert images and PDFs into easily manageable strings. Using Angular and JavaScript, we’ll unravel the mysteries of file manipulation, empowering you to integrate this functionality into your web applications effortlessly.

HTML file 
<input type="file"  accept="image/*" (change)="imageChanged($event)">

<input type="file"  accept=".pdf" (change)="pdfChanged($event)">


Function to convert image to base 64 as promise 
  public imageToBase64Promise(event: any): Promise<string> {
    const promise = new Promise<string>((resolve, reject) => {
      const file: File = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
          const image = new Image();
          image.src = e.target.result;
          image.onload = () => {
            resolve(image.src);
          }
          image.onerror = () => {
            reject("Unable to convert image into base64")
          }
        }
        reader.readAsDataURL(file);
      }
    });
    return promise;
  }


Function to convert PDF to base 64 as promise: 
  public pdfToBase64Promise(event: any): Promise<string> {
    const promise = new Promise<string>((resolve, reject) => {
      const file: File = event.target.files[0];

      if (file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          resolve(reader.result as string);
        };
      reader.onerror = () =>{
        reject('failed to convert pdf to base 64');
      }
      }
    });
    return promise;
  }


Ts file 
    public imageChanged(event: any){
      this.imageToBase64Promise(event).then(
        (res) =>{
          const imageBase64 = res;
        }
      )
    }
    
    public pdfChanged(event: any){
      this.pdfToBase64Promise(event).then(
        (res) =>{
          const pdfBase64 = res;
        }
      )
    }

Popular posts from this blog

Custom Validator to match Password and Confirm Password in Angular

Creating a custom validator to match the password and confirm password fields in an Angular form is a common requirement for many applications. Introduction to Custom Validators: Custom validators in Angular allow you to extend the default validation capabilities and create specific rules tailored to your needs. They can be used for various purposes, such as ensuring passwords match, validating email formats, or checking for forbidden values. Signup Model import { FormControl } from "@angular/forms"; export interface SignupFormModel{ name: FormControl<string | null>; email: FormControl<string | null>; password: FormControl<string | null>; confirmPassword: FormControl<string | null>; } Ts File public signupFormGroup: FormGroup<SignupFormModel> = new FormGroup<SignupFormModel>({ name: new FormControl(null, [Validators.required]), em...
Read more

Enhancing Express.js Requests with TypeScript: Adding User Objects and More

Image
Express JS has been one of the best Node JS framework for creating backend(server side) part of any application. It is fast and easy to learn and implement. It is soo scalable and reliable that it is being used in small and as well as in large application. I loved using it along with typescript too because it enhances the code quality and readability. In addition, you also get the advantage of better code completion and intellisense when using modern text editors like Visual Studio Code. One of the most useful concept of Typescript is “Declaration Merging” . Declaration Merging allows you to merge two or more distinct declaration or types declared with the same name into a single definition. This concept allows you to attach your own custom property onto another Typescript interface type. Lets take a look at Express middleware. The above code is an Express middleware that is used to ensure that a user is authenticated...
Read more

How to Avoid Page Changes When You Have Unsaved Changes in Angular

Introduction: Navigating away from a webpage with unsaved changes can lead to data loss and frustration. In this guide, we’ll explore effective methods to prevent page changes when you have unsaved changes in an Angular application. Whether you’re a developer or a user, understanding these techniques will help you safeguard your work.  Why Preventing Page changes with unsaved changes matter..? Understanding the importance of preventing accidential navigation can save your time and prevent the loss of valuable information. When working on forms, editing documents, or entering data in Angular application, ensuring your changes are saved before leaving the page is crucial. So, to  avoid page change when we have unsaved changes we can use canDeactivateFn() method of route guard. Navigating away from a webpage with unsaved changes can lead to data loss and frustration. In this guide, we'll explore effective methods to prevent page changes when you have unsaved changes in...
Read more