79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
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: '',
|
|
instances: []
|
|
}
|
|
}
|
|
|
|
handleChange = (e) => {
|
|
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,/, '');
|
|
|
|
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 style={{backgroundColor: "white"}}>
|
|
<label htmlFor="my-file-input">Upload a File:</label>
|
|
<CarVisualisation src={this.state.url} instances={this.state.instances} />
|
|
<input type="file" name="file" onChange={this.handleChange} style={{zIndex: 200}}/>
|
|
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Upload;
|
|
|