Fix bugs

src/upload/Upload.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import FileReaderInput from 'react-file-reader-input';
-
+import CarVisualisation from './CarVisualisation'; 
 
 export class Upload extends React.Component {
 
   constructor() { 
     super();
     this.state = {
-      url: ''
+      url: '',
+      instances: []
     }
   }
 
@@ -15,22 +16,59 @@ export class Upload extends React.Component {
     var file = e.target.files[0],
     reader = new FileReader();
 
+    if (!file) return;
+
+    const filename = file.name
+
+    let last_dot = filename.lastIndexOf('.')
+    let ext = filename.slice(last_dot + 1)
+    let name = filename.slice(0, last_dot)
+
     reader.onloadend = (function () {
       // Since it contains the Data URI, we should remove the prefix and keep only Base64 string
       this.setState({url: reader.result})
       var b64 = reader.result.replace(/^data:.+;base64,/, '');
-      console.log(b64); //-> "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
+
+      this.getCars(b64, ext); 
     }).bind(this);
 
     reader.readAsDataURL(file);
   }
 
+  getCars(picture, extension) {
+   // const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
+   const url = 'https://parking-koncept.herokuapp.com/analyze_parking';
+// The data we are going to send in our request
+    let data = {
+      picture_base64: picture,
+      extension: extension
+    }
+// The parameters we are gonna pass to the fetch function
+    let fetchData = { 
+      method: 'POST', 
+      body: JSON.stringify(data),
+      headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+      }
+    }
+    fetch(url, fetchData)
+    .then(response => {
+      response.json().then( data => {
+        this.setState({...this.state, instances: data})
+      })
+    });
+  }
+
+
+
   render() {
     return (
-      <form>
+      <form style={{backgroundColor: "white"}}>
         <label htmlFor="my-file-input">Upload a File:</label>
-       <input type="file" name="file" onChange={this.handleChange}/>
-       <img src={this.state.url} />
+          <CarVisualisation src={this.state.url} instances={this.state.instances} />
+          <input type="file" name="file" onChange={this.handleChange} style={{zIndex: 200}}/>
+
       </form>
     );
   }