Succed calling API and console log prediction

ClientApp/components/FetchData.tsx

@@ -1,63 +1,49 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import 'isomorphic-fetch';
+const logo = require('./logo.svg') as string;
 
-interface FetchDataExampleState {
-    forecasts: WeatherForecast[];
-    loading: boolean;
-}
-
-export class FetchData extends React.Component<RouteComponentProps<{}>, FetchDataExampleState> {
-    constructor() {
-        super();
-        this.state = { forecasts: [], loading: true };
+// Use Javascript module in Typescript
+// https://stackoverflow.com/questions/38224232/how-to-consume-npm-modules-from-typescript
+const ImageUploader: any = require('react-images-upload');
 
-        fetch('api/SampleData/WeatherForecasts')
-            .then(response => response.json() as Promise<WeatherForecast[]>)
-            .then(data => {
-                this.setState({ forecasts: data, loading: false });
-            });
+export class FetchData extends React.Component<RouteComponentProps<{}>, {}> {
+    constructor(props: any) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
     }
 
-    public render() {
-        let contents = this.state.loading
-            ? <p><em>Loading...</em></p>
-            : FetchData.renderForecastsTable(this.state.forecasts);
+    handleChange(pictures: FileList | null) {
+        if (pictures == null)
+            return;
 
-        return <div>
-            <h1>Weather forecast</h1>
-            <p>This component demonstrates fetching data from the server.</p>
-            { contents }
-        </div>;
-    }
 
-    private static renderForecastsTable(forecasts: WeatherForecast[]) {
-        return <table className='table'>
-            <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Temp. (C)</th>
-                    <th>Temp. (F)</th>
-                    <th>Summary</th>
-                </tr>
-            </thead>
-            <tbody>
-            {forecasts.map(forecast =>
-                <tr key={ forecast.dateFormatted }>
-                    <td>{ forecast.dateFormatted }</td>
-                    <td>{ forecast.temperatureC }</td>
-                    <td>{ forecast.temperatureF }</td>
-                    <td>{ forecast.summary }</td>
-                </tr>
-            )}
-            </tbody>
-        </table>;
+        console.log(pictures);
+
+        var formData = new FormData();
+        for(var name in pictures){
+            formData.append(name, pictures[name]);
+        }
+        fetch('http://localhost:49492/api/storage/photoUpload', {
+            method: 'POST',
+            headers: new Headers({
+                'Access-Control-Allow-Origin': '*',
+            }),
+            body: formData
+        }).then((response) => {
+            return response.json();
+        })
+            .then((json) => {
+                console.log("Name: " + json['PhotoName']);
+                console.log("PhotoUrl: " + json['PhotoUrl']);
+                console.log("Prediction: " + json['Prediction']);
+                this.setState({ url: json['PhotoUrl'], prediction: json['Prediction'] });
+            }).catch(err => console.log(err));
     }
-}
 
-interface WeatherForecast {
-    dateFormatted: string;
-    temperatureC: number;
-    temperatureF: number;
-    summary: string;
+    render() {
+        return <div>
+            <input type="file" onChange={(e) => this.handleChange(e.target.files)} />
+        </div>;
+    }
 }

my-new-app.csproj

@@ -50,4 +50,6 @@
     </ItemGroup>
   </Target>
 
+  <ProjectExtensions><VisualStudio><UserProperties package_1json__JSONSchema="http://json.schemastore.org/nuget-project" /></VisualStudio></ProjectExtensions>
+
 </Project>

my-new-app.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 15
+VisualStudioVersion = 15.0.27130.2036
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "my-new-app", "my-new-app.csproj", "{E73A67A2-E99C-4FB1-9B57-4E6DF912607F}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{E73A67A2-E99C-4FB1-9B57-4E6DF912607F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E73A67A2-E99C-4FB1-9B57-4E6DF912607F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E73A67A2-E99C-4FB1-9B57-4E6DF912607F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E73A67A2-E99C-4FB1-9B57-4E6DF912607F}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {B2A2C27B-6C9F-44A8-BC64-44047B32DD90}
+	EndGlobalSection
+EndGlobal

package.json

@@ -10,6 +10,7 @@
     "@types/react-router": "4.0.12",
     "@types/react-router-dom": "4.0.5",
     "@types/webpack-env": "1.13.0",
+    "@types/ng-file-upload": "12.2.2",
     "aspnet-webpack": "^2.0.1",
     "aspnet-webpack-react": "^3.0.0",
     "awesome-typescript-loader": "3.2.1",
@@ -24,11 +25,13 @@
     "react": "15.6.1",
     "react-dom": "15.6.1",
     "react-hot-loader": "3.0.0-beta.7",
+    "react-images-upload": "^1.1.1",
     "react-router-dom": "4.1.1",
     "style-loader": "0.18.2",
     "typescript": "2.4.1",
     "url-loader": "0.5.9",
     "webpack": "2.5.1",
     "webpack-hot-middleware": "2.18.2"
+
   }
 }