For the Microsoft Azure Cognitive Services API, the image needs to be passed in this format
Input passed within the POST body. Supported input methods: raw image binary.
So, I was very lost on how to convert the image the user is uploading into that format and make an API request. I'm using ReactJS on the front-end with a NodeJs backend. Could someone please help me get the image in the correct format? I'm not sure whether I have to read it in as an Array Buffer?
import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state ={
file: null
}
}
onSubmit = () => {
console.log(this.state.file);
// console.log(window.atob(this.state.file));
}
onChange = (e) => {
const file = e.target.files[0];
const reader = new FileReader()
reader.addEventListener("load", () => {
// convert image file to base64 string
console.log(reader);
// if (reader.result.includes("data:image/png;base64,")) {
// img = reader.result.replace("data:image/png;base64,", "");
// } else {
// img = reader.result.replace("data:image/jpeg;base64,", "");
// }
//this.setState({file: img});
}, false);
if (file) {
reader.readAsArrayBuffer(file);
}
}
render() {
return(
<div>
<h3 style={{padding: '20px', textAlign: 'center', color: 'white', fontWeight: '100'}}>
Customize your playlist based on your mood!
</h3>
<h5 style={{margin: '30px', padding: '0px',textAlign: 'center', color: 'grey', display:'block'}}>
Click a picture of your surroundings or simply upload one based on what you're currently in the mood for and
<br />
<br />
TuneIn will add a playlist according to your liking!
</h5>
<form onSubmit={this.onSubmit}>
<h1>File Upload</h1>
<input type="file" accept="image/png, image/jpeg" onChange={this.onChange}/>
<button type="submit">Upload</button>
</form>
</div>
);
}
}
export default Dashboard;
