In this article, I will show how to Image upload in Angular. I will show how to do it, and just follow the steps clearly.

For more updates please do Subscribe via Email:


Creating the component for the Upload Image page

  • TS componenet
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

  selector: 'app-upload-image',
  templateUrl: './upload-image.component.html',
  styleUrls: ['./upload-image.component.css']
export class UploadImageComponent {

  urls = new Array<string>();
  detectFiles(event:any) {
    this.urls = [];
    let files =;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {

  • HTML Component
<div class="container">
    <p>upload-image works!</p>
        <img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180">
    <input type="file" multiple (change)="detectFiles($event)">

  • CSS Component
div.ok {  color: green;}
div.bad {  color: red;}


Happy Learning..

Thank you for visiting my blog site. Hoping you learn more here. please feel free to comment and suggest if there is need to enhance and update. thank you.

Github :

Related Topics

Leave a Reply

Your email address will not be published. Required fields are marked *