I'm using the File Dropzone component to get a PDF from the user. I then want to submit the file to the Mindee REST API for scanning and OCR. The Mindee documentation provides this guidance:
<form onsubmit="mindeeSubmit(event)" >
<input type="file" id="my-file-input" name="file" />
<input type="submit" />
</form>
<script type="text/javascript">
const mindeeSubmit = (evt) => {
evt.preventDefault()
let myFileInput = document.getElementById('my-file-input');
let myFile = myFileInput.files[0]
if (!myFile) { return }
let data = new FormData();
data.append("document", myFile, myFile.name);
let xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "https://api.mindee.net/v1/products/mindee/invoices/v4/predict");
xhr.setRequestHeader("Authorization", "Token my-api-key-here");
xhr.send(data);
}
</script>
I have an API resource created for Mindee with my authorization token. I am successfully connecting to the Mindee API when I run a query using that resource, but the query constantly returns an error.
My first thought is that I am not composing the data correctly for submission to the API. I've tried so many different combinations of body type and fileDropZone1.value[0] and the like. Looking at the guidance above, can anyone suggest the correct form of query of the Mindee API?