A Step-by-Step Guidence for Creating an Image to Base64 Converter App using Angular

Introduction:

In this tutorial, we will learn how to convert images to base64 strings using Angular. Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. It's a useful tool for when you want to transmit data across a network or store images on a database without having to worry about file paths. By the end of this tutorial, you will be able to select an image file, convert it to a base64 string, and copy the string to the clipboard, all using the Angular framework. This is a great way to handle image uploads and is a common use case in web development.

Video Tutorial:

Before getting started with the tutorial, it's important to make sure you have the necessary tools and software installed. In order to follow this tutorial, you will need the following:

Node.js: This is a JavaScript runtime that is used to run JavaScript code on the server. You can download it from the official Node.js website.
Angular CLI: The Angular CLI (Command Line Interface) is a tool that allows you to create and manage Angular projects. You can install it by running the following command in your terminal:

npm install -g @angular/cli

A Code Editor: A code editor is necessary for writing and editing your code. Some popular options include Visual Studio Code, Sublime Text, and Atom.
Basic knowledge of Angular and TypeScript: This tutorial assumes that you have a basic understanding of Angular and TypeScript. If you are new to these technologies, it's recommended that you familiarize yourself with the basics before proceeding.
A Web Browser: You will need a web browser to test and run the application. Some popular options include Chrome, Firefox, and Safari.

Make sure you have all the above requirements installed and configured in your system before you proceed with the tutorial.

Additionally, you will also need to have an understanding of some basic HTML and CSS to understand the HTML and CSS code that is used in this tutorial.

Step 1: Create a new Angular project

The first step is to create a new Angular project using the Angular CLI. Open up a terminal and navigate to the directory where you want to create your project. Then, run the following command to create a new project:

ng new my-app

This command will create a new directory called "my-app" and will generate all the necessary files and folders for a new Angular project. Once the command is finished, navigate into the new project directory by running:

cd my-app

You can now start the development server by running “ng serve” and navigate to http://localhost:4200/ to see the default app running

Step 2: Add HTML

In this step, we will add the necessary HTML code to handle the image conversion. First, open the src/app/app.component.html file and add the following code to create a file input, a button to trigger the conversion, and a preview container to display the image:

<h3 id="title">convert images into base64 string using Agular</h3>

<br />

<button (click)="convertToBase64()">Convert to Base64</button>

</div>

<div>

<button (click)="copyToClipboard()">Copy to Clipboard</button>

</div>

<p>{{ base64String }}</p>

</div>

This code creates an input element of type file that allows the user to select an image file. The (change) event is bound to the onFileChange() function which captures the selected file. There is also a button to trigger the conversion process and a preview container to display the image.

Step 3: Add TypeScript Logic

In this step, we will add the necessary TypeScript logic to handle the image conversion. Open the src/app/app.component.ts file and add the following code:

import { Component, VERSION } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

base64Image: string;

base64String: string;

file: File;

onFileChange(event) {

this.file = event.target.files[0];

}

convertToBase64() {

if (!this.file) {

return;

}

const reader = new FileReader();

reader.readAsDataURL(this.file);

reader.onload = () => {

this.base64String = reader.result as string;

this.base64Image = reader.result as string;

};

}

copyToClipboard() {

const textArea = document.createElement('textarea');

textArea.value = this.base64String;

document.body.appendChild(textArea);

textArea.select();

document.execCommand('copy');

textArea.remove();

alert('Base65 string copied to clipboard succssfully!');

}

In this code, we have added the following functions:

- The `onFileChange()` function captures the selected file from the input element.

- The `convertToBase64()` function uses the `FileReader` class to read the selected file as a data URL, which is then stored in the `base64String` and `base64Image` variables.

- The `copyToClipboard()` function creates a new `textarea` element, sets its value to the current `base64String`, appends it to the body, selects it, and then copies its value to the clipboard. An alert message is displayed to notify the user that the copy was successful.

With these changes, the application should now be able to convert an image to a base64 string and preview the image in the browser.

You can now run the application by running `ng serve` in the terminal. Once the application is running, select an image file and click the "Convert to Base64" button to see the image preview and the base64 string. Click the "Copy to Clipboard" button to copy the base64 string to your clipboard.

Step 4: Add CSS

In this step, we will add some basic CSS styles to our application to enhance its appearance.

Create a new file called src/app/app.component.css and add the following CSS code:

.base64-container {

padding: 16px;

background-color: #f5f5f5;

border: 1px solid #ccc;

border-radius: 4px;

overflow-wrap: break-word;

font-size: 14px;

margin-top: 16px;

}

.img-preview-container {

display: flex;

justify-content: center;

align-items: center;

margin-top: 16px;

}

img {

max-width: 100%;

max-height: 300px;

border: 1px solid #ccc;

padding: 8px;

}

input[type='file'] {

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

margin-bottom: 16px;

font-size: 14px;

}

button {

background-color: #4caf50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

margin-bottom: 16px;

}

button:hover {

background-color: #45a049;

}

.mainPage {

width: 60%;

margin: 5% auto;

border: 1px solid grey;

padding: 5%;

border-radius: 10px;

}

#title{

text-align: center;

}

The base64-container class is applied to the container that holds the base64 string, it adds some padding, background color, border, and font size to the container.
The img-preview-container class is applied to the container that holds the preview of the image, it centers the image horizontally and vertically.
The img class is applied to the image itself, it sets the maximum width and height of the image and adds some padding and border to it.
The input[type='file'] class is applied to the file input element, it adds some padding, border, and font size to the input element.
The button class is applied to the convert and copy to clipboard buttons, it adds some background color, padding, and font color to the buttons.
The mainPage class is applied to the main container of the page, it sets the width and margin of the page, adds a border and padding, and gives a border radius.
The #title id is applied to the h3 title of the page, it centers the text of the title.

The CSS styles are used to make the application more visually appealing and easy to read.

Step 5: Test the Application

Run the application by running the command ng serve in the terminal.
Open the application in a web browser by navigating to http://localhost:4200/.
Click on the Choose File button and select an image file from your computer.
Click on the Convert to Base64 button. The image should be previewed and the base64 string should be displayed.
Click on the Copy to Clipboard button. The base64 string should be copied to the clipboard.
Test that the base64 string can be pasted into a text editor or used in an API call.

By following these steps, you can test if your application is working as expected and if the image is correctly converted to a base64 string, previewed and copied to clipboard.

Conclusion:

In this blog post, we have learned how to convert images into base64 strings using Angular. We have covered the process in five steps: setting up an Angular project, adding TypeScript logic, HTML, CSS, and testing the application.

We have seen how to use the FileReader class to read the contents of an image file and convert it to a base64 string. Also, we have added a preview of the image and a button to copy the base64 string to the clipboard.

By converting images to base64 strings, we can easily send images through API calls or store them in databases without having to worry about file paths or server configurations.

However, it's important to keep in mind that using base64 strings can increase the size of data, and also base64 encoded data may be vulnerable to XSS attacks if not handled properly. So, it's always important to consider security concerns when working with base64 strings.

This is just a basic example and there are many ways to improve this application like adding validations, error handling, etc.

We hope you found this tutorial helpful! If you have any questions or feedback, please feel free to leave a comment below.

Search This Blog

CodeLSC