I can submit a url without a problem, but when I try to take a jpg, convert it to base64 and send it to my backend, I get an err. Here's the function from the front end where I grab the image, and convert it (or at least that's what I think I'm doing...)
async handleSubmit(event){
console.log(this.state)
event.preventDefault()
let ctx = this.refs.canvas.getContext('2d');
let url = URL.createObjectURL(this.state.image);
let img = new Image();
img.src = url;
img.onload = function () {
ctx.drawImage(img, 0, 0, 600, 600,
0, 0, 200, 200);
}
//I've tried sending with and without the btoa function, neither works.
const canvasChange = this.refs.canvas.toDataURL('image/jpg');
const dataImg = btoa(canvasChange)
const image = await axios.post('/api/clarifai', {dataImg})
}
And here's the back end code:
const app = new Clarifai.App({
apiKey: process.env.CLARIFAI_KEY
})
router.post('/', (req, res, next) => {
try{
app.models.predict(Clarifai.GENERAL_MODEL, req.body.dataImg).then(
function(response) {
res.send(response)
console.log(response);
},
function(err) {
console.log("IT ERRRRRRED")
console.error(err);
}
);
} catch(err){
next(err)
}
})
The request enters the express route, and hits the Clarifai API, but I either get a 10020 or if I format the body of the post differently, a 11100.
TLDR: Can't submit an image to the API, only URLs work. What am I doing wrong?
Thanks for any help!
