0

cannot upload an image to microsoft Azure face-detect, the Docs says that i should upload [binary data] with content-type : "application/octet-stream" https://northeurope.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236 . i am uploading image.data (which is binary data) but i am getting error 400, however that i tried to upload a file with postman and it worked that means that i have a problem with my post request, but i find no problem

axios.post("https://northeurope.api.cognitive.microsoft.com/face/v1.0/detect", image.data, {
                    headers: {
                        "Ocp-Apim-Subscription-Key": "*************",
                        "Content-Type": "application/octet-stream"
                    }
                }).then(res => {
                    console.log(res)
                }).catch((error) => {
                    console.log(error)
                    throw error
                })

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:59)
    at XMLHttpRequest.dispatchEvent (event-target-shim.js:818)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:566)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:388)
    at XMLHttpRequest.js:501
    at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
    at MessageQueue.__callFunction (MessageQueue.js:395)
    at MessageQueue.js:106
mHaridy
  • 11
  • 1
  • 2

2 Answers2

1

i found the solution, i must post it as BLOB (binary large object), i could not do it with axios so i used RNFetchBlob temporarily till i find out how to post BLOB with axios

RNFetchBlob.fetch('POST', "https://northeurope.api.cognitive.microsoft.com/face/v1.0/detect", {
                "Ocp-Apim-Subscription-Key": "***********",
                "Content-Type": "application/octet-stream",
            }, RNFetchBlob.wrap(image.path))
                .then((res) => {
                    console.log(" the res --> ")
                    console.log(res)
                })
                .catch((err) => {
                    console.log(" the error --> ")
                    cconsole.log(err)
                })
mHaridy
  • 11
  • 1
  • 2
-4

I think you should to pass image as a FormData and Content-Type as multipart/form-data as below : 

const data = new FormData();
data.append("pictures", { uri: image.uri, name: imageName, type: 'image/*' });
await axios.post(url, data, { headers }).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error);
});
Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57
  • i tried Form data but didn't work and the content-type should be: - For an image URL, Content-Type should be application/json - For a local image, Content-Type should be application/octet-stream https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236 – mHaridy Jul 27 '19 at 08:23