diff --git a/src/app/common/uploading-processbar/uploading-processbar.component.ts b/src/app/common/uploading-processbar/uploading-processbar.component.ts
index a77c85d7..061daa27 100644
--- a/src/app/common/uploading-processbar/uploading-processbar.component.ts
+++ b/src/app/common/uploading-processbar/uploading-processbar.component.ts
@@ -23,7 +23,7 @@ export class UploadingProcessbarComponent implements OnInit {
   ngOnInit() {
     this.subscription = this._US.currentCount.subscribe((count:number) => {
       this.uploadProgress = count;
-      if (this.uploadProgress === 100) {
+      if (this.uploadProgress === 100 || this.uploadProgress == null ) {
         this.dismiss()
       }
     })
diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html
index 4931246d..ea53785a 100644
--- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html
+++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html
@@ -30,45 +30,76 @@
   </div>
 </div>
 
-<div *ngIf="!isExistImage && isInstallAppliance">
+<div *ngIf="isInstallAppliance">
   <div class="row" style="display: flex">
     <div class="col-md-6">
-      <h5>Please Select image</h5>
+      <h5 *ngIf="uploaderImage.queue.length <= 0">Please Select image</h5>
+      <p *ngIf="uploaderImage.queue.length > 0"class="uploaded-text">Uploaded image details</p>
     </div>
-    <div class="col-md-4 txt-align">
+    <div class="col-md-4 txt-align" *ngIf="uploaderImage.queue.length <= 0">
       <input
         type="file"
         accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
         multiple
         #file
         class="non-visible"
-        (change)="uploadImageFile($event)"
+        ng2FileSelect
+        [uploader]="uploaderImage"
+        (onFileSelected)="uploadImageFile($event)"
       />
       <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
     </div>
-    <div class="col-md-2 txt-align">
+    <div class="{{uploaderImage.queue.length > 0 ? 'col-md-6 txt-align' : 'col-md-2 txt-align'}}  ">
       <button mat-button (click)="dialogRef.close()">
         <mat-icon>close</mat-icon>
       </button>
     </div>
   </div>
-  <div class="row" *ngFor="let img of selectFile; let i = index">
-    <mat-title> {{ i + 1 }}. {{ img?.name }} </mat-title>
-  </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 }"
+
+ 
+  <div class="row" *ngFor="let img of uploaderImage.queue; let i = index">
+    <div class="{{img.isError || img.isUploaded ? 'col-md-10' : 'col-md-6'}}">
+      <mat-title [ngClass]="{ 'uploaded-error-text': img.isError }">
+        {{ i + 1 }}. {{ img.isError ? 'Image ' : '' }} {{ img?.some?.name }}
+        {{ img.isError ? ' already exists' : '' }}
+      </mat-title>
+    </div>
+    <div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-4'}}"  *ngIf="!img.isUploaded">
+      <mat-progress-bar
+        mode="determinate"
+        *ngIf="img?.some?.name === uploadProgress.some?.name"
+        [value]="uploadProgress.progress"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      ></mat-progress-bar>
+      <mat-progress-bar
+        mode="determinate"
+        *ngIf="img?.some?.name !== uploadProgress.some?.name && !img.isUploaded"
+        [value]="0"
+        aria-valuemin="0"
+        aria-valuemax="100"
       >
-        {{ i + 1 }}. {{ uploadFile?.filename ?? uploadFile?.error?.message }}
-      </p>
+      </mat-progress-bar>
+    </div>
+    <div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-2'}}"
+      *ngIf="img?.some?.name === uploadProgress.some?.name && img.isReady && !img.isUploaded"
+    >
+      {{ uploadProgress.progress + ' %' }}
+    </div>
+    <div
+      class="col-md-2"
+      *ngIf="img?.some?.name !== uploadProgress.some?.name && img.isReady && !uploadProgress.isUploaded"
+    >
+      {{ '0 %' }}
     </div>
   </div>
-  <div mat-dialog-actions align="end">
-    <button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
+  <div mat-dialog-actions align="end" *ngIf="uploaderImage.queue.length > 0 && !uploadProgress.isUploaded">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="uploaderImage.queue.length > 0 ? cancelUploading() : dialogRef.close(false)"
+    >
+      Cancel
+    </button>
   </div>
 </div>
diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss
index 26141499..2e50dcab 100644
--- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss
+++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss
@@ -79,5 +79,6 @@
   .instal-appliances-button {
     margin: 11px;
   }
+ 
   
   
\ No newline at end of file
diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
index 03ab4718..60099892 100644
--- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
+++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts
@@ -1,12 +1,8 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, DoCheck, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
-import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
-import { forkJoin, Observable, of } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { ImageData } from '../../../models/images';
+import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
 import { Server } from '../../../models/server';
 import { ImageManagerService } from '../../../services/image-manager.service';
 import { ToasterService } from '../../../services/toaster.service';
@@ -23,33 +19,65 @@ import { ToasterService } from '../../../services/toaster.service';
     ]),
   ],
 })
-export class AddImageDialogComponent implements OnInit, DoCheck {
+export class AddImageDialogComponent implements OnInit {
   server: Server;
-  uploadedFile: boolean = false;
-  isExistImage: boolean = false;
   isInstallAppliance: boolean = false;
   install_appliance: boolean = false;
   selectFile: any = [];
-  uploadFileMessage: ImageData = [];
+  uploaderImage: FileUploader;
   uploadProgress: number = 0;
-  cancelRequsts: any;
-  forkObservable: Observable<any>[] = [];
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public dialogRef: MatDialogRef<AddImageDialogComponent>,
     private imageService: ImageManagerService,
-    public snackBar: MatSnackBar,
-    private uploadServiceService: UploadServiceService,
-    private toasterService: ToasterService
+    private toasterService: ToasterService,
+    private uploadServiceService: UploadServiceService
   ) {}
 
-  public ngOnInit(): void {
+  public ngOnInit() {
     this.server = this.data;
-    this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
-      if (isCancel) {
-        this.cancelUploading();
-      }
-    });
+
+    this.uploaderImage = new FileUploader({});
+    this.uploaderImage.onAfterAddingFile = (file) => {
+      file.withCredentials = false;
+    };
+
+    this.uploaderImage.onErrorItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      let responseData = {
+        name: item.file.name,
+        message: JSON.parse(response),
+      };
+      this.toasterService.error(responseData?.message.message);
+    };
+
+    this.uploaderImage.onSuccessItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      let responseData = {
+        filename: item.file.name,
+        message: JSON.parse(response),
+      };
+      this.toasterService.success('Image ' + responseData?.message.filename + ' imported succesfully' );
+    };
+    this.uploaderImage.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress;
+    };
+  }
+
+  cancelUploading() {
+    this.uploaderImage.clearQueue();
+    this.dialogRef.close();
+    this.uploadServiceService.processBarCount(null);
+    this.toasterService.warning('Image file Uploading canceled');
   }
 
   selectInstallApplianceOption(ev) {
@@ -57,47 +85,27 @@ export class AddImageDialogComponent implements OnInit, DoCheck {
   }
 
   async uploadImageFile(event) {
-    for (let imgFile of event.target.files) {
+    for (let imgFile of event) {
       this.selectFile.push(imgFile);
     }
-    await this.upload();
+    await this.importImageFile();
   }
 
   // files uploading
-  upload() {
-    this.uploadedFile = true;
-    this.snackBar.openFromComponent(UploadingProcessbarComponent, {
-      panelClass: 'uplaoding-file-snackabar',
+  importImageFile() {
+    this.selectFile.forEach((event, i) => {
+      let fileName = event.name;
+      let file = event;
+      let fileReader: FileReader = new FileReader();
+      fileReader.onloadend = () => {
+        const url = this.imageService.getImagePath(this.server, this.install_appliance, fileName);
+        const itemToUpload = this.uploaderImage.queue[i];
+        itemToUpload.url = url;
+        if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
+        (itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }];
+        this.uploaderImage.uploadItem(itemToUpload);
+      };
+      fileReader.readAsText(file);
     });
-    this.selectFile.forEach((imgElement) => {
-      const object = this.imageService
-        .uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement)
-        .pipe(catchError((error) => of(error)));
-      this.forkObservable.push(object);
-    });
-    
-    this.uploadProgress = this.forkObservable.length;
-    this.cancelRequsts = forkJoin(this.forkObservable).subscribe((responses) => {
-      this.uploadFileMessage = responses;
-      this.uploadServiceService.processBarCount(100);
-      this.uploadedFile = false;
-      this.isExistImage = true;
-    });
-  }
-
-  ngDoCheck() {
-    setTimeout(() => {
-      if (this.uploadProgress < 100 - this.forkObservable.length) {
-        this.uploadProgress = this.uploadProgress + 1;
-        this.uploadServiceService.processBarCount(this.uploadProgress);
-      }
-    }, this.forkObservable.length * 10000);
-  }
-  cancelUploading() {
-    this.cancelRequsts.unsubscribe();
-    this.dialogRef.close();
-    this.uploadServiceService.processBarCount(100);
-    this.toasterService.warning('Image upload cancelled');
-    this.uploadServiceService.cancelFileUploading(false);
   }
 }
diff --git a/src/app/components/image-manager/image-manager.component.ts b/src/app/components/image-manager/image-manager.component.ts
index ee51888f..5a3c09eb 100644
--- a/src/app/components/image-manager/image-manager.component.ts
+++ b/src/app/components/image-manager/image-manager.component.ts
@@ -123,7 +123,7 @@ export class ImageManagerComponent implements OnInit {
 
   deleteAllFiles() {
     const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, {
-      width: '500px',
+      width: '550px',
       maxHeight: '650px',
       autoFocus: false,
       disableClose: true,
diff --git a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
index 17d7d25d..96f999d9 100644
--- a/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
+++ b/src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts
@@ -274,7 +274,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
 
   cancelUploading() {
     this.uploader.clearQueue();
-    this.uploadServiceService.processBarCount(100)
+    this.uploadServiceService.processBarCount(null)
     this.toasterService.warning('Image upload cancelled');
     // this.uploadServiceService.cancelFileUploading(false)
     // window.location.reload()
diff --git a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
index df81758c..11d1b010 100644
--- a/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
+++ b/src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts
@@ -162,7 +162,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
 
   cancelUploading() {
     this.uploader.clearQueue();
-    this.uploadServiceService.processBarCount(100)
+    this.uploadServiceService.processBarCount(null)
     this.toasterService.warning('Image Uploading canceled');
     this.uploadServiceService.cancelFileUploading(false)
 
diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
index 25aa64a5..59a77d54 100644
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
@@ -374,7 +374,6 @@ 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];
 
@@ -429,7 +428,7 @@ export class NewTemplateDialogComponent implements OnInit {
 
   cancelUploading() {
     this.uploaderImage.clearQueue();
-    this.uploadServiceService.processBarCount(100)
+    this.uploadServiceService.processBarCount(null)
     this.toasterService.warning('Image upload cancelled');
     this.uploadServiceService.cancelFileUploading(false)