Using File Dropzone and Then Upload File via REST API

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?

This is my resource definition:

This is my query:

Hey @haj, can you try formatting your file object like this:

{ data: {{fileDropzone1.value[0]}}, ...{{fileDropozone1.files[0]}} }

and let us know how that goes? Thanks!

Joe. I tried (but maybe incorrectly) your suggestion:

The linter doesn't seem to like the spread operator, but I'm not sure that's the problem.

Thanks.

Thanks @haj, Yeah lets switch that syntax a bit to
{{ {"data": fileDropzone1.value[0], ...fileDropzone1.files[0]} }}

That should send the full file object, if the API endpoint returns another error, we can dig into that but it should be sending the proper file this way.

Joe. Thanks so much. Your syntax tweak was a crucial part of the solution that I have finally discovered. The other was to stop sending the multi-part header in the API Resource definition. Apparently, if I send that header, I must define the multi-part boundary myself, but if I remove the header, the browser or retool did it for me. So, problem solved!!!!

1 Like