find and solve || findandsolve.com
Please wait.....

How to Add/Remove multiple images using angular/Upload image in base64string

How to Add/Remove multiple images using angular/Upload image in base64string

angular 8 multiple file upload example delete function in angular 8 remove selected file from input type=file angular.angular file upload how to delete image in angular angular remove item from array angular save file to folder remove uploaded file in angular. I have create new project in angular and upload multiple files and remove uploaded images using angular 8 as given below.

Open your html view page and past this code as given below  

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-2 productAddfromImages" *ngFor='let url of imageurls; let i = index'>
          <img class="img-fluid" [src]="url.base64String">
          <a (click)="removeImage(i)" class="btn btn-xs btn-danger">Remove</a>
        </div>
      </div>
    </div>
    <div class="card main-title">
      <div class="col-md-12">
        <div class="form-group">
          <br>
          <label class="form-label">Add Images</label>
          <input type="file"
                 class="form-control"
                 (change)="onSelectFile($event)"
                 multiple accept="image/*" />
        </div>
      </div>
    </div>
  </div>
</div>

After that open your .ts file and add this code as given below

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

@Component({
   templateUrl: './multiple-images-add.component.html', //this is your html page path
  styleUrls: ['./multiple-images-add.component.css'] //this is your css file path
})
export class MultiImageUpload {
  imageDeleteFrom: FormGroup;
  imageurls =[];
  base64String: string;
  name: string;
  imagePath: string;
 
  removeImageEdit(i, imagepath) {
    this.imageDeleteFrom.value.id = i;
    this.imageDeleteFrom.value.ImagePath = imagepath;
  }

  removeImage(i) {
    this.imageurls.splice(i, 1);
  }
  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var filesAmount = event.target.files.length;
      for (let i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = (event: any) => {
          this.imageurls.push({ base64String: event.target.result, });
        }
        reader.readAsDataURL(event.target.files[i]);
      }
    }
  }
}


Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

If findandsolve.com felt valuable to you, feel free to share it.

Comments



Report Response