I have resolved image progress bar and undefined event issue

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "angular.enable-strict-mode-prompt": false
+}

src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html

@@ -11,7 +11,12 @@
   </div>
 
   <div mat-dialog-content>
-    <mat-radio-group name="install_appliances" class="choose-instal-appliance"  [value]="install_appliance"  (change)="selectInstallApplianceOption($event)">
+    <mat-radio-group
+      name="install_appliances"
+      class="choose-instal-appliance"
+      [value]="install_appliance"
+      (change)="selectInstallApplianceOption($event)"
+    >
       <mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance">
         Yes
       </mat-radio-button>
@@ -25,18 +30,20 @@
   </div>
 </div>
 
-
-
-
 <div *ngIf="!isExistImage && isInstallAppliance">
-  <div class="row" style="display: flex;">
+  <div class="row" style="display: flex">
     <div class="col-md-6">
       <h5>Please Select image</h5>
-
     </div>
     <div class="col-md-4 txt-align">
-      <input type="file" accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp" multiple #file class="non-visible"
-        (change)="uploadImageFile($event)" />
+      <input
+        type="file"
+        accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
+        multiple
+        #file
+        class="non-visible"
+        (change)="uploadImageFile($event)"
+      />
       <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
     </div>
     <div class="col-md-2 txt-align">
@@ -48,20 +55,18 @@
   <div class="row" *ngFor="let img of selectFile; let i = index">
     <mat-title> {{ i + 1 }}. {{ img?.name }} </mat-title>
   </div>
-  <div class="row">
-    <div class="col-md-12">
-      <div *ngIf="uploadedFile">
-        <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">
-        </mat-progress-bar>
-      </div>
-    </div>
-  </div>
+ 
 </div>
 <div *ngIf="isExistImage">
   <div mat-dialog-content>
     <div *ngIf="uploadFileMessage.length > 0">
       <p class="uploaded-text">Uploaded image details</p>
-      <p *ngFor="let uploadFile of uploadFileMessage; let i = index" [ngClass]="{'uploaded-error-text': uploadFile?.error?.message}">{{i+1}}. {{uploadFile?.filename ?? uploadFile?.error?.message}}</p>
+      <p
+        *ngFor="let uploadFile of uploadFileMessage; let i = index"
+        [ngClass]="{ 'uploaded-error-text': uploadFile?.error?.message }"
+      >
+        {{ i + 1 }}. {{ uploadFile?.filename ?? uploadFile?.error?.message }}
+      </p>
     </div>
   </div>
   <div mat-dialog-actions align="end">

src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts

@@ -1,11 +1,15 @@
-import { Component, DoCheck, Inject, OnInit } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, DoCheck, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Server } from '../../../models/server';
-import { ImageManagerService } from '../../../services/image-manager.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ToasterService } from '@services/toaster.service';
+import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
+import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
 import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { ImageData } from '../../../models/images';
+import { Server } from '../../../models/server';
+import { ImageManagerService } from '../../../services/image-manager.service';
 
 @Component({
   selector: 'app-add-image-dialog',
@@ -19,58 +23,84 @@ import { ImageData } from '../../../models/images';
     ]),
   ],
 })
-
 export class AddImageDialogComponent implements OnInit, DoCheck {
   server: Server;
   uploadedFile: boolean = false;
   isExistImage: boolean = false;
-  isInstallAppliance: boolean = false
-  install_appliance: boolean = false
+  isInstallAppliance: boolean = false;
+  install_appliance: boolean = false;
   selectFile: any = [];
-  uploadFileMessage: ImageData = []
-  uploadProgress:number = 0
+  uploadFileMessage: ImageData = [];
+  uploadProgress: number = 0;
+
+  cancelRequsts = new Map();
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<AddImageDialogComponent>,
     private imageService: ImageManagerService,
-
+    public snackBar: MatSnackBar,
+    private uploadServiceService: UploadServiceService,
+    private toasterService: ToasterService
   ) {}
 
   public ngOnInit(): void {
-    this.server = this.data
+    this.server = this.data;
+    this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
+      if (isCancel) {
+        this.cancelUploading();
+      }
+    });
   }
 
   selectInstallApplianceOption(ev) {
-    this.install_appliance = ev.value
+    this.install_appliance = ev.value;
   }
 
   async uploadImageFile(event) {
     for (let imgFile of event.target.files) {
-      this.selectFile.push(imgFile)
+      this.selectFile.push(imgFile);
     }
-    await this.upload()
+    await this.upload();
   }
 
   // files uploading
   upload() {
-    const calls = [];
     this.uploadedFile = true;
-    this.selectFile.forEach(imgElement => {
-      calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error))))
+    this.snackBar.openFromComponent(UploadingProcessbarComponent, {
+      panelClass: 'uplaoding-file-snackabar',
     });
-    this.uploadProgress = calls.length
-    Observable.forkJoin(calls).subscribe(responses => {
-      this.uploadFileMessage = responses
+    this.selectFile.forEach((imgElement) => {
+      const object = this.imageService
+        .uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement)
+        .pipe(catchError((error) => of(error)))
+        .subscribe();
+      this.cancelRequsts.set(imgElement.name, object);
+    });
+
+    this.uploadProgress = this.cancelRequsts.size;
+    Observable.forkJoin(this.cancelRequsts.values).subscribe((responses) => {
+      this.uploadFileMessage = responses;
+      this.uploadServiceService.processBarCount(100);
       this.uploadedFile = false;
       this.isExistImage = true;
     });
   }
+
   ngDoCheck() {
     setTimeout(() => {
       if (this.uploadProgress < 95) {
-        this.uploadProgress = this.uploadProgress + 1
+        this.uploadProgress = this.uploadProgress + 1;
+        this.uploadServiceService.processBarCount(this.uploadProgress);
       }
-    }, 100000);
-   
+    }, 10000);
+  }
+  cancelUploading() {
+    this.cancelRequsts.forEach((obj) => {
+      obj.unsubscribe();
+    });
+    this.dialogRef.close();
+    this.uploadServiceService.processBarCount(100);
+    this.toasterService.warning('Image upload cancelled');
+    this.uploadServiceService.cancelFileUploading(false);
   }
 }

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -370,7 +370,7 @@
                     type="file"
                     class="non-visible"
                     #file2
-                    (change)="importImage($, image.filename)"
+                    (change)="importImage($event, image.filename)"
                     ng2FileSelect
                     [uploader]="uploaderImage"
                   />

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -185,7 +185,7 @@ export class NewTemplateDialogComponent implements OnInit {
       status: number,
       headers: ParsedResponseHeaders
     ) => {
-      this.toasterService.error('An error has occured');
+      this.toasterService.error('An error has occured because image already exists');
       this.progressService.deactivate();
       this.uploaderImage.clearQueue();
     };
@@ -374,6 +374,7 @@ export class NewTemplateDialogComponent implements OnInit {
 
 
   importImage(event, imageName) {
+    debugger
     this.computeChecksumMd5(event.target.files[0], false).then((output) => {
       let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];