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:

Table Of Contents
  1. Implementation
  2. Output
  3. Related Topics

Implementation

Creating the component for the Upload Image page

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

@Component({
  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 = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }
}
  • HTML Component
<div class="container">
    <p>upload-image works!</p>
    <div>
        <img *ngFor="let url of urls" [src]="url" class="rounded mb-3" width="180">
    </div>
    <input type="file" multiple (change)="detectFiles($event)">

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

Output

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 : https://github.com/JaveTLupango/AngularCRUD/tree/uploadImage/src/app/upload-image

Related Topics

By: Jave LupangoPosted on Categories : Categories : Tags:

Leave a Reply

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