Raw Binary Data for Microsoft Cognitive Service API

Question

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;

Answer 1

Here is the sample for Analyzing a local image using the Computer Vision REST API and javascript.

https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js