Implement the client-side to upload a photo.

ClientApp/app/app.module.ts

@@ -16,6 +16,7 @@ import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { CounterComponent } from './components/counter/counter.component';
 import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
+import { PhotoService } from "./services/photo.service";
 
 Raven.config('https://[email protected]/155312').install();
 
@@ -50,7 +51,8 @@ Raven.config('https://[email protected]/155312').instal
     ],
     providers: [
       { provide: ErrorHandler, useClass: AppErrorHandler },
-      VehicleService
+      VehicleService,
+      PhotoService
     ]
 })
 export class AppModule {

ClientApp/app/components/view-vehicle/view-vehicle.html

@@ -37,6 +37,7 @@ <h2>Contact</h2>
     <!-- Photos tab -->
     <div role="tabpanel" class="tab-pane" id="photos">
       <h2>Photos</h2>
+      <input type="file" (change)="uploadPhoto()" #fileInput> 
     </div>
   </div>
 </div>

ClientApp/app/components/view-vehicle/view-vehicle.ts

@@ -1,19 +1,22 @@
+import { PhotoService } from './../../services/photo.service';
 import { ToastyService } from 'ng2-toasty';
 import { VehicleService } from './../../services/vehicle.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   templateUrl: 'view-vehicle.html'
 })
 export class ViewVehicleComponent implements OnInit {
+  @ViewChild('fileInput') fileInput: ElementRef;
   vehicle: any;
   vehicleId: number; 
 
   constructor(
     private route: ActivatedRoute, 
     private router: Router,
     private toasty: ToastyService,
+    private photoService: PhotoService,
     private vehicleService: VehicleService) { 
 
     route.params.subscribe(p => {
@@ -45,4 +48,11 @@ export class ViewVehicleComponent implements OnInit {
         });
     }
   }
+
+  uploadPhoto() {
+    var nativeElement: HTMLInputElement = this.fileInput.nativeElement;
+
+    this.photoService.upload(this.vehicleId, nativeElement.files[0])
+      .subscribe(x => console.log(x));
+  }
 }

ClientApp/app/services/photo.service.ts

@@ -0,0 +1,15 @@
+import { Http } from '@angular/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PhotoService {
+
+  constructor(private http: Http) { }
+
+  upload(vehicleId, photo) {
+    var formData = new FormData();
+    formData.append('file', photo);
+    return this.http.post(`/api/vehicles/${vehicleId}/photos`, formData)
+      .map(res => res.json());
+  }
+}