Importing appliances extracted to separated component

src/app/app.module.ts

@@ -257,6 +257,7 @@ import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.componen
 import { Gns3vmService } from './services/gns3vm.service';
 import { ThemeService } from './services/theme.service';
 import { ConfigureGns3VMDialogComponent } from './components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
+import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -432,7 +433,8 @@ if (environment.production) {
     ConfirmationBottomSheetComponent,
     ConfigDialogComponent,
     Gns3vmComponent,
-    ConfigureGns3VMDialogComponent
+    ConfigureGns3VMDialogComponent,
+    ImportApplianceComponent
   ],
   imports: [
     BrowserModule,

src/app/components/project-map/import-appliance/import-appliance.component.html

@@ -0,0 +1,12 @@
+<input
+    type="file"
+    accept=".gns3appliance, .gns3a"
+    class="non-visible"
+    #file
+    (change)="uploadAppliance($event)"
+    ng2FileSelect
+    [uploader]="uploader"/>
+<button mat-menu-item (click)="file.click()">
+    <mat-icon>insert_drive_file</mat-icon>
+    <span>Import appliance</span>
+</button>

src/app/components/project-map/import-appliance/import-appliance.component.ts

@@ -0,0 +1,70 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { Project } from '../../../models/project';
+import { Server } from '../../../models/server';
+import { ComputeService } from '../../../services/compute.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { ServerResponse } from '../../../models/serverResponse';
+import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
+
+
+@Component({
+    selector: 'app-import-appliance',
+    templateUrl: './import-appliance.component.html',
+    styleUrls: ['./import-appliance.component.scss']
+})
+export class ImportApplianceComponent implements OnInit {
+    @Input('project') project: Project;
+    @Input('server') server: Server;
+    uploader: FileUploader;
+
+    constructor(
+        private computeService: ComputeService,
+        private toasterService: ToasterService
+    ) {}
+
+    ngOnInit() {
+        this.uploader = new FileUploader({});
+        this.uploader.onAfterAddingFile = file => {
+          file.withCredentials = false;
+        };
+    
+        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+          let serverResponse: ServerResponse = JSON.parse(response);
+          let resultMessage = 'An error occured: ' + serverResponse.message;
+          this.toasterService.error(resultMessage);
+        };
+    
+        this.uploader.onCompleteItem = (
+          item: FileItem,
+          response: string,
+          status: number,
+          headers: ParsedResponseHeaders
+        ) => {
+          this.toasterService.success('Appliance imported successfully');
+        };
+    }
+
+    public uploadAppliance(event) {
+        const url = this.computeService.getUploadPath(this.server, event.target.files[0].name);
+        this.uploader.queue.forEach(elem => (elem.url = url));
+        const itemToUpload = this.uploader.queue[0];
+        this.uploader.uploadItem(itemToUpload);
+    }
+
+    // public uploadAppliance(event) {
+    //     let fileInput = event.target;
+    //     let file: File = fileInput.files[0];
+    //     let name: string = file.name;
+    //     let fileReader: FileReader = new FileReader();
+    
+    //     fileReader.onloadend = () => {
+    //         let appliance = fileReader.result;
+    //         var obj = JSON.parse(appliance as string);
+    //         console.log(obj);
+    //         //   this.computeService.postAppliance(this.server, obj).subscribe(() => {
+    //         //     this.toasterService.success('Appliance imported.');
+    //         //   });
+    //     }
+    //     fileReader.readAsText(file);
+    // }
+}

src/app/components/project-map/project-map.component.html

@@ -75,16 +75,7 @@
           <mat-icon>call_received</mat-icon>
           <span>Import portable project</span>
         </button>
-        <input
+        <app-import-appliance [server]="server" [project]="project" ></app-import-appliance>
-          type="file"
-          accept=".gns3appliance, .gns3a"
-          class="non-visible"
-          #file
-          (change)="uploadAppliance($event)"/>
-        <button mat-menu-item (click)="file.click()">
-          <mat-icon>insert_drive_file</mat-icon>
-          <span>Import appliance</span>
-        </button>
         <button mat-menu-item (click)="closeProject()">
           <mat-icon>close</mat-icon>
           <span>Close project</span>

src/app/components/project-map/project-map.component.ts

@@ -820,23 +820,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
   }
 
-  public uploadAppliance(event) {
-    let fileInput = event.target;
-    let file: File = fileInput.files[0];
-    let name: string = file.name;
-    let fileReader: FileReader = new FileReader();
-
-    fileReader.onloadend = () => {
-      let appliance = fileReader.result;
-      var obj = JSON.parse(appliance as string);
-      console.log(obj);
-      this.computeService.postAppliance(this.server, obj).subscribe(() => {
-        this.toasterService.success('Appliance imported.');
-      });
-    }
-    fileReader.readAsText(file);
-  }
-
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

src/app/services/compute.service.ts

@@ -16,4 +16,8 @@ export class ComputeService {
         // test for one appliance
         return this.httpServer.post<any>(server, `/computes/local/docker/images/chrome.gns3a`, appliance) as Observable<any>;
     }
+
+    getUploadPath(server: Server, project_name: string, filename: string) {
+        return `http://${server.host}:${server.port}/v2/compute/qemu/images/${filename}`;
+    }
 }