I resolved / Fixed add new template uploading image issue

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

@@ -129,25 +129,8 @@
   <mat-step *ngIf="applianceToInstall">
     <ng-template matStepLabel>{{ secondActionTitle }}</ng-template>
 
-    <mat-card [hidden]="!(!isLinuxPlatform && !applianceToInstall.dynamips)">
+    <mat-card [hidden]="!(!isLinuxPlatform || applianceToInstall.dynamips)">
-      Please configure GNS3 VM to install selected appliance
-    </mat-card>
-
-    <mat-card [hidden]="!(isLinuxPlatform || applianceToInstall.dynamips)">
       <div *ngIf="applianceToInstall.qemu">
-        <div>
-          Server type<br />
-          <mat-radio-group class="radio-group">
-            <mat-radio-button
-              [disabled]="!isLinuxPlatform"
-              [checked]="isLocalComputerChosen"
-              class="radio-button"
-              value="1"
-              (click)="setServerType('local')"
-              >Install the appliance locally</mat-radio-button
-            >
-          </mat-radio-group>
-        </div>
         <div>
           Qemu binary<br />
           <mat-select
@@ -321,37 +304,13 @@
       </div>
 
       <div *ngIf="applianceToInstall.docker">
-        <div>
+        
-          Server type<br />
-          <mat-radio-group class="radio-group">
-            <mat-radio-button
-              [disabled]="!isLinuxPlatform"
-              [checked]="isLocalComputerChosen"
-              class="radio-button"
-              value="1"
-              (click)="setServerType('local')"
-              >Install the appliance locally</mat-radio-button
-            >
-          </mat-radio-group>
-        </div>
         <button mat-raised-button color="primary" (click)="createDockerTemplate()" class="create-button">
           Create docker template
         </button>
       </div>
 
       <div *ngIf="applianceToInstall.dynamips">
-        <div>
-          Server type<br />
-          <mat-radio-group class="radio-group">
-            <mat-radio-button
-              [checked]="isLocalComputerChosen"
-              class="radio-button"
-              value="1"
-              (click)="setServerType('local')"
-              >Install the appliance locally</mat-radio-button
-            >
-          </mat-radio-group>
-        </div>
         <div>
           Install required files
           <button
@@ -389,19 +348,6 @@
       </div>
 
       <div *ngIf="applianceToInstall.iou">
-        <div>
-          Server type<br />
-          <mat-radio-group class="radio-group">
-            <mat-radio-button
-              [disabled]="!isLinuxPlatform"
-              [checked]="isLocalComputerChosen"
-              class="radio-button"
-              value="1"
-              (click)="setServerType('local')"
-              >Install the appliance locally</mat-radio-button
-            >
-          </mat-radio-group>
-        </div>
         <div>
           Install required files
           <button

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

@@ -42,7 +42,7 @@ import { TemplateNameDialogComponent } from './template-name-dialog/template-nam
     ]),
   ],
 })
-export class  NewTemplateDialogComponent implements OnInit {
+export class NewTemplateDialogComponent implements OnInit {
   @Input() server: Server;
   @Input() project: Project;
 
@@ -93,7 +93,7 @@ export class  NewTemplateDialogComponent implements OnInit {
     private computeService: ComputeService,
     private changeDetectorRef: ChangeDetectorRef,
     private progressService: ProgressService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.applianceService.getAppliances(this.server).subscribe((appliances) => {
@@ -109,7 +109,6 @@ export class  NewTemplateDialogComponent implements OnInit {
       this.dataSource.paginator = this.paginator;
     });
 
-    if(!this.server.authToken){
     this.templateService.list(this.server).subscribe((templates) => {
       this.templates = templates;
     });
@@ -123,19 +122,19 @@ export class  NewTemplateDialogComponent implements OnInit {
     this.qemuService.getBinaries(this.server).subscribe((binaries) => {
       this.qemuBinaries = binaries;
     });
-    
+
     this.qemuService.getImages(this.server).subscribe((qemuImages) => {
       this.qemuImages = qemuImages;
     });
 
-    this.iosService.getImages(this.server).subscribe((iosImages) => {
+      this.iosService.getImages(this.server).subscribe((iosImages) => {
-      this.iosImages = iosImages;
+        this.iosImages = iosImages;
-    });
+      });
-
-    this.iouService.getImages(this.server).subscribe((iouImages) => {
-      this.iouImages = iouImages;
-    });
 
+      this.iouService.getImages(this.server).subscribe((iouImages) => {
+        this.iouImages = iouImages;
+      });
+    
     this.applianceService.getAppliances(this.server).subscribe((appliances) => {
       this.appliances = appliances;
       this.appliances.forEach((appliance) => {
@@ -195,8 +194,7 @@ export class  NewTemplateDialogComponent implements OnInit {
       this.progressService.deactivate();
       this.uploaderImage.clearQueue();
     };
-  }
+
-  
   }
 
   updateAppliances() {
@@ -215,17 +213,19 @@ export class  NewTemplateDialogComponent implements OnInit {
   }
 
   refreshImages() {
+
     this.qemuService.getImages(this.server).subscribe((qemuImages) => {
       this.qemuImages = qemuImages;
     });
+    
+      this.iosService.getImages(this.server).subscribe((iosImages) => {
+        this.iosImages = iosImages;
+      });
 
-    this.iosService.getImages(this.server).subscribe((iosImages) => {
+      this.iouService.getImages(this.server).subscribe((iouImages) => {
-      this.iosImages = iosImages;
+        this.iouImages = iouImages;
-    });
+      });
-
+    
-    this.iouService.getImages(this.server).subscribe((iouImages) => {
-      this.iouImages = iouImages;
-    });
   }
 
   getAppliance(url: string) {
@@ -246,7 +246,7 @@ export class  NewTemplateDialogComponent implements OnInit {
     let fileReader: FileReader = new FileReader();
     let emulator;
 
-    fileReader.onloadend = () => {
+    fileReader.onloadend= () => {
       let appliance = JSON.parse(fileReader.result as string);
 
       if (appliance.docker) emulator = 'docker';
@@ -256,9 +256,9 @@ export class  NewTemplateDialogComponent implements OnInit {
 
       const url = this.applianceService.getUploadPath(this.server, emulator, fileName);
       this.uploader.queue.forEach((elem) => (elem.url = url));
-
+      
       const itemToUpload = this.uploader.queue[0];
-      (itemToUpload as any).options.disableMultipart = true;
+      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);
     };
@@ -388,7 +388,7 @@ export class  NewTemplateDialogComponent implements OnInit {
     let fileReader: FileReader = new FileReader();
     let emulator;
 
-    fileReader.onloadend = () => {
+    fileReader.onloadend = () => {  
       if (this.applianceToInstall.qemu) emulator = 'qemu';
       if (this.applianceToInstall.dynamips) emulator = 'dynamips';
       if (this.applianceToInstall.iou) emulator = 'iou';
@@ -397,8 +397,8 @@ export class  NewTemplateDialogComponent implements OnInit {
       this.uploaderImage.queue.forEach((elem) => (elem.url = url));
 
       const itemToUpload = this.uploaderImage.queue[0];
-      (itemToUpload as any).options.disableMultipart = true;
+      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);
       this.progressService.activate();
     };

src/app/services/appliances.service.ts

@@ -17,7 +17,7 @@ export class ApplianceService {
   }
 
   getUploadPath(server: Server, emulator: string, filename: string) {
-    return `${server.protocol}//${server.host}:${server.port}/v3/compute/${emulator}/images/${filename}`;
+    return `${server.protocol}//${server.host}:${server.port}/v3/images/upload/${filename}`;
   }
 
   updateAppliances(server: Server): Observable<Appliance[]> {

src/app/services/ios.service.ts

@@ -10,11 +10,11 @@ export class IosService {
   constructor(private httpServer: HttpServer) {}
 
   getImages(server: Server): Observable<any> {
-    return this.httpServer.get<IosImage[]>(server, '/compute/dynamips/images') as Observable<IosImage[]>;
+    return this.httpServer.get<IosImage[]>(server, '/images') as Observable<IosImage[]>;
   }
 
   getImagePath(server: Server, filename: string): string {
-    return `${server.protocol}//${server.host}:${server.port}/v3/compute/dynamips/images/${filename}`;
+    return `${server.protocol}//${server.host}:${server.port}/v3/images/upload/${filename}`;
   }
 
   getTemplates(server: Server): Observable<IosTemplate[]> {

src/app/services/iou.service.ts

@@ -18,11 +18,11 @@ export class IouService {
   }
 
   getImages(server: Server): Observable<any> {
-    return this.httpServer.get<IouImage[]>(server, '/compute/iou/images') as Observable<IouImage[]>;
+    return this.httpServer.get<IouImage[]>(server, '/images') as Observable<IouImage[]>;
   }
 
   getImagePath(server: Server, filename: string): string {
-    return `${server.protocol}//${server.host}:${server.port}/v3/compute/iou/images/${filename}`;
+    return `${server.protocol}//${server.host}:${server.port}/v3/images/upload/${filename}`;
   }
 
   addTemplate(server: Server, iouTemplate: any): Observable<any> {