How to upload and display Image using Angular 8/11

Introduction

In this tutorial I will upload and display image using Angular. In this example I will allow to upload only single image and display the uploaded image on the web page. You might have seen how to upload file using Angular, but here I am uploading and displaying the image.

I am also validating the uploaded file is image or not from its mime type.

Prerequsites

Knowledge of Angular, Angular 8/11

Project Setup

Read tutorial Create new Angular project on Windows before proceeding further.

Create a project called angular-image-upload-display anywhere on the disk space on your computer system.

For Angular 11, you will find another option to set whether you want to use stricter type or not. Here I am using stricter type and later I will show you how to use stricter type for url and event.

upload and display image using Angular

Once your project downloads the necessary libraries, make sure your newly created project compiles and opens in browser successfully. To check this navigate to the directory angular-image-upload-display and execute the following command:

ng serve --open

So you will see that a browser gets opened with URL http://localhost:4200.

Now stop the server and create the required code for uploading and displaying the image using Angular.

Image Upload Form

Edit the app.component.html file to create the file upload form using Angular:

<div style="text-align:center">
	<div [innerHtml]='msg' *ngIf="msg" style="color: red;"></div>
	<div><img [src]="url" *ngIf="url"></div>
	<p>
		<input type="file" (change)="selectFile($event)">
	</p>
</div>

We have two <div/>s and one <p/> with <input> type file.

The first <div/> shows error message and second <div/> has the <img> tag to display image once an image successfully uploaded.

<input> is used to select the file for uploading and on change event the selectFile($event) function gets called.

File Upload Component

Edit app.component.ts and paste the below source code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	
	//url; //Angular 8
	url: any; //Angular 11, for stricter type
	msg = "";
	
	//selectFile(event) { //Angular 8
	selectFile(event: any) { //Angular 11, for stricter type
		if(!event.target.files[0] || event.target.files[0].length == 0) {
			this.msg = 'You must select an image';
			return;
		}
		
		var mimeType = event.target.files[0].type;
		
		if (mimeType.match(/image\/*/) == null) {
			this.msg = "Only images are supported";
			return;
		}
		
		var reader = new FileReader();
		reader.readAsDataURL(event.target.files[0]);
		
		reader.onload = (_event) => {
			this.msg = "";
			this.url = reader.result; 
		}
	}
	
}

I have a basic validation, such as, whether file has been selected for upload and whether the selected file is only image type or not.

Next I created FileReader object and read the file data as URL.

Finally I render the image with onload event for displaying on the browser once uploaded successfully.

As you see in the above source code that for stricter type in Angular version 11, I have added :any to the url and event.

Testing the Application

When you run the application, you will get screen at URL http://localhost:4200 and you can try yourself to upload and display the image.

Source Code

Download

3 thoughts on “How to upload and display Image using Angular 8/11

  1. I’m new to Angular and website development. I was looking for a method to get an image selected by the user. I spent hours looking at the Angular tutorial and others. Your tutorials have been the best by far – clearest and easiest to implement!

    I implemented the method in this tutorial and it works well. However, I have a question. The return from the reader is the address of the image, not the image itself. Does that pose a security risk?

    Thanks for your great work!

    1. Thanks for your comment.

      Image, css, js – content of these static resources are always visible to the end users when they try to view the source of your app page. No matter what you try to hide them.

Leave a Reply

Your email address will not be published.