Support for IOU images

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

@@ -41,8 +41,8 @@
                                 placeholder="IOU image" 
                                 [(ngModel)]="iouTemplate.path"
                                 [ngModelOptions]="{standalone: true}">
-                                <mat-option *ngFor="let image of iouImages" [value]="image">
-                                    {{image}}
+                                <mat-option *ngFor="let image of iouImages" [value]="image.path">
+                                    {{image.path}}
                                 </mat-option>
                             </mat-select>
                         </mat-form-field>

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

@@ -10,6 +10,8 @@ import { IouTemplate } from '../../../../models/templates/iou-template';
 import { IouService } from '../../../../services/iou.service';
 import { ComputeService } from '../../../../services/compute.service';
 import { Compute } from '../../../../models/compute';
+import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';
+import { IouImage } from 'src/app/models/iou/iou-image';
 
 
 @Component({
@@ -24,7 +26,8 @@ export class AddIouTemplateComponent implements OnInit {
     newImageSelected: boolean = false;
     types: string[] = ['L2 image', 'L3 image'];
     selectedType: string;
-    iouImages: string[] = [];
+    iouImages: IouImage[] = [];
+    uploader: FileUploader;
 
     templateNameForm: FormGroup;
     imageForm: FormGroup;
@@ -55,9 +58,27 @@ export class AddIouTemplateComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.uploader = new FileUploader({});
+        this.uploader.onAfterAddingFile = file => {
+            file.withCredentials = false;
+        };
+        this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
+            this.toasterService.error('An error occured: ' + response);
+        };
+        this.uploader.onSuccessItem = (
+            item: FileItem,
+            response: string,
+            status: number,
+            headers: ParsedResponseHeaders
+        ) => {
+            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;
+            this.getImages();
 
             this.templateMocksService.getIouTemplate().subscribe((iouTemplate: IouTemplate) => {
                 this.iouTemplate = iouTemplate;
@@ -69,6 +90,12 @@ export class AddIouTemplateComponent implements OnInit {
         });
     }
 
+    getImages() {
+        this.iouService.getImages(this.server).subscribe((images: IouImage[]) => {
+            this.iouImages = images;
+        });
+    }
+
     setServerType(serverType: string) {
         if (serverType === 'gns3 vm' && this.isGns3VmAvailable) {
             this.isGns3VmChosen = true;
@@ -83,8 +110,18 @@ export class AddIouTemplateComponent implements OnInit {
         this.newImageSelected = value === "newImage";
     }
 
-    uploadImageFile(event) {
-        this.iouTemplate.path = event.target.files[0].name;
+    uploadImageFile(event): void {
+        let name = event.target.files[0].name;
+        this.imageForm.controls['imageName'].setValue(name);
+        let fileName = event.target.files[0].name;
+
+        const url = this.iouService.getImagePath(this.server, fileName);
+        this.uploader.queue.forEach(elem => (elem.url = url));
+
+        const itemToUpload = this.uploader.queue[0];
+        (itemToUpload as any).options.disableMultipart = true;
+
+        this.uploader.uploadItem(itemToUpload);
     }
 
     goBack() {
@@ -95,7 +132,7 @@ export class AddIouTemplateComponent implements OnInit {
         if (!this.templateNameForm.invalid && ((this.newImageSelected && !this.imageForm.invalid) || (!this.newImageSelected && this.iouTemplate.path))) {
             this.iouTemplate.template_id = uuid();
             this.iouTemplate.name = this.templateNameForm.get("templateName").value;
-            this.iouTemplate.path = this.imageForm.get("imageName").value;
+            if (this.newImageSelected) this.iouTemplate.path = this.imageForm.get("imageName").value;
             this.iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
 
             this.iouService.addTemplate(this.server, this.iouTemplate).subscribe((template: IouTemplate) => {

src/app/services/iou.service.ts

@@ -21,6 +21,10 @@ export class IouService {
         return this.httpServer.get<IouImage[]>(server, '/compute/iou/images') as Observable<IouImage[]>;
     }
 
+    getImagePath(server: Server, filename: string): string {
+        return `http://${server.host}:${server.port}/v2/compute/iou/images/${filename}`;
+    }
+
     addTemplate(server: Server, iouTemplate: any): Observable<any> {
         return this.httpServer.post<IouTemplate>(server, `/templates`, iouTemplate) as Observable<IouTemplate>;
     }