I added a common process bar when IOS and IOU image file uplading

src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
+import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
+import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../models/compute';
@@ -46,6 +49,7 @@ export class AddIosTemplateComponent implements OnInit {
   ciscoUrl: string = 'https://cfn.cloudapps.cisco.com/ITDIT/CFN/jsp/SearchBySoftware.jsp';
   uploader: FileUploader;
   isLocalComputerChosen: boolean = true;
+  uploadProgress:number = 0;
 
   constructor(
     private route: ActivatedRoute,
@@ -56,7 +60,9 @@ export class AddIosTemplateComponent implements OnInit {
     private router: Router,
     private templateMocksService: TemplateMocksService,
     private iosConfigurationService: IosConfigurationService,
-    private computeService: ComputeService
+    private computeService: ComputeService,
+    private uploadServiceService: UploadServiceService,
+    private snackBar : MatSnackBar
   ) {
     this.iosTemplate = new IosTemplate();
 
@@ -92,6 +98,16 @@ export class AddIosTemplateComponent implements OnInit {
       this.getImages();
       this.toasterService.success('Image uploaded');
     };
+    this.uploader.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress['progress'];
+      this.uploadServiceService.processBarCount(this.uploadProgress)
+    };
+    this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
+      if (isCancel) {
+        this.cancelUploading()
+      }
+
+    })
 
     const server_id = this.route.snapshot.paramMap.get('server_id');
     this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
@@ -137,6 +153,9 @@ export class AddIosTemplateComponent implements OnInit {
     const itemToUpload = this.uploader.queue[0];
     if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true; ((itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }])
     this.uploader.uploadItem(itemToUpload);
+    this.snackBar.openFromComponent(UploadingProcessbarComponent, {
+      panelClass: 'uplaoding-file-snackabar',
+    });
 
   }
 
@@ -250,4 +269,10 @@ export class AddIosTemplateComponent implements OnInit {
   onChassisChosen() {
     this.networkAdaptersForTemplate = [];
   }
+
+  cancelUploading() {
+    this.uploader.clearQueue();
+    this.uploadServiceService.processBarCount(100)
+    this.toasterService.warning('Image imported canceled');
+  }
 }

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
+import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
+import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
 import { v4 as uuid } from 'uuid';
 import { Compute } from '../../../../models/compute';
@@ -31,7 +34,7 @@ export class AddIouTemplateComponent implements OnInit {
   templateNameForm: FormGroup;
   imageForm: FormGroup;
   isLocalComputerChosen: boolean = true;
-
+  uploadProgress:number = 0
   constructor(
     private route: ActivatedRoute,
     private serverService: ServerService,
@@ -40,7 +43,9 @@ export class AddIouTemplateComponent implements OnInit {
     private router: Router,
     private formBuilder: FormBuilder,
     private templateMocksService: TemplateMocksService,
-    private computeService: ComputeService
+    private computeService: ComputeService,
+    private uploadServiceService : UploadServiceService,
+    private snackBar : MatSnackBar
   ) {
     this.iouTemplate = new IouTemplate();
 
@@ -61,6 +66,11 @@ export class AddIouTemplateComponent implements OnInit {
     this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
       this.toasterService.error('An error occured: ' + response);
     };
+    this.uploader.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress['progress'];
+      this.uploadServiceService.processBarCount(this.uploadProgress)
+    };
+
     this.uploader.onSuccessItem = (
       item: FileItem,
       response: string,
@@ -70,7 +80,7 @@ export class AddIouTemplateComponent implements OnInit {
       this.getImages();
       this.toasterService.success('Image uploaded');
     };
-
+   
     const server_id = this.route.snapshot.paramMap.get('server_id');
     this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
       this.server = server;
@@ -79,6 +89,13 @@ export class AddIouTemplateComponent implements OnInit {
         this.iouTemplate = iouTemplate;
       });
     });
+    this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
+      if (isCancel) {
+        this.cancelUploading()
+      }
+
+    })
+    
   }
 
   getImages() {
@@ -107,9 +124,18 @@ export class AddIouTemplateComponent implements OnInit {
     const itemToUpload = this.uploader.queue[0];
     if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true; ((itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }])
     this.uploader.uploadItem(itemToUpload);
+    this.snackBar.openFromComponent(UploadingProcessbarComponent, {
+      panelClass: 'uplaoding-file-snackabar',
+    });
 
   }
 
+  cancelUploading() {
+    this.uploader.clearQueue();
+    this.uploadServiceService.processBarCount(100)
+    this.toasterService.warning('Image imported canceled');
+  }
+
 
 
   goBack() {