Test version

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

@@ -75,6 +75,16 @@
           <mat-icon>call_received</mat-icon>
           <span>Import portable project</span>
         </button>
+        <input
+          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

@@ -66,6 +66,7 @@ import { ConfirmationBottomSheetComponent } from '../projects/confirmation-botto
 import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
 import { NotificationService } from '../../services/notification.service';
 import { ThemeService } from '../../services/theme.service';
+import { ComputeService } from '../../services/compute.service';
 
 
 @Component({
@@ -153,7 +154,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private serialLinkWidget: SerialLinkWidget,
     private bottomSheet: MatBottomSheet,
     private notificationService: NotificationService,
-    private themeService: ThemeService
+    private themeService: ThemeService,
+    private computeService: ComputeService
   ) {}
 
   ngOnInit() {
@@ -818,6 +820,23 @@ 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

@@ -11,4 +11,9 @@ export class ComputeService {
     getComputes(server: Server): Observable<Compute[]> {
         return this.httpServer.get<Compute[]>(server, '/computes') as Observable<Compute[]>;
     }
+
+    postAppliance(server: Server, appliance): Observable<any>{
+        // test for one appliance
+        return this.httpServer.post<any>(server, `/computes/local/docker/images/chrome.gns3a`, appliance) as Observable<any>;
+    }
 }