In what format should a fetch POST request be created to access the Imagga API?

Question

I am building a mobile application using React-Native that recommends clothing to users. I am using Imagga's API to get the colors of the clothing while excluding the background. I have tried to make a POST request using fetch from analyzing the node.js code given in the documentation:

image_file_b64 = "" + image_file_b64

//Extracting the colors from the object
  let response = await fetch('https://api.imagga.com/v2/colors', {  
    method: 'POST',
    headers: {
        'apiKey': '<PLACEHOLDER>',
        'apiSecret': '<PLACEHOLDER>',
        'Authorization': '<PLACEHOLDER>',
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        image_base64: image_file_b64,
        extract_overall_colors: 0,
    })
})
let responseJson = await response.json()
console.log(responseJson)

However, the only output that I have received is (what is logged on the last line):

Object {
  "status": Object {
    "text": "Please provide content for processing.",
    "type": "error",
  },
}

I've worked with someone from Imagga to solve this issue, but he wasn't familiar with react native. he suggested changing the content-type to "application/x-www-form-urlencoded" or "application/x-www-form-urlencoded;charset=UTF-8", but neither have worked.

I am fairly confident that the problem is from the way that I set up my fetch. If anybody is familiar with the Imagga API, can you please identify what in the code is wrong or the mismatch in formatting between what Imagga expects and what I am giving it that results in it not thinking that I have given it input. Thanks!

Are you using this api in react-native or node.js? – SuleymanSah Nov 04 '19 at 08:37 — SuleymanSah, Nov 04 '19 at 08:37
@SuleymanSah I am using the API in react-native – NoahGonzales Nov 04 '19 at 16:05 — NoahGonzales, Nov 04 '19 at 16:05

Lenoarod · Accepted Answer · 2019-11-04T08:54:03.427

0

the fetch body is not correct, the Content-Type that you use is JSON, why you send the string. modify it as the following, and try it.

let response = await fetch('https://api.imagga.com/v2/colors', {  
    method: 'POST',
    headers: {
        'apiKey': '<PLACEHOLDER>',
        'apiSecret': '<PLACEHOLDER>',
        'Authorization': '<PLACEHOLDER>',
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: {
        image_base64: image_file_b64,
        extract_overall_colors: 0,
    })
})

I read the official API, it gives the node.js example. you can according to it and modify. If the above code is not successful, you can change the content-type to formdata

let params = {
        image_base64: image_file_b64,
        extract_overall_colors: 0,
    };
let formData = new FromData()
formdata.append('RequestData',JSON.stringify(params))
let response = await fetch('https://api.imagga.com/v2/colors', {  
    method: 'POST',
    headers: {
        'apiKey': '<PLACEHOLDER>',
        'apiSecret': '<PLACEHOLDER>',
        'Authorization': '<PLACEHOLDER>',
         Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
    },
    body: formData)
})

this is the official api, and you can use postman software to test the request

edited Nov 04 '19 at 08:54

answered Nov 04 '19 at 08:31

Lenoarod

3,441
14
25

I used Postman and successfully made a request. However, I can't successfully transfer that to fetch. Here is what my code looks like - I used the format suggested when I try to share the collection. I am still getting the same output. What could be wrong? – NoahGonzales Nov 05 '19 at 06:51
@ NoahGonzales, hi, I do not see the code link, please edit again, – Lenoarod Nov 05 '19 at 07:01
The following the link to my collection: https://www.getpostman.com/collections/fd9577c6602f730f945b and here is a link to my code: https://wetransfer.com/downloads/c6e36b9de57bc498331f2f2b991c395920191106092609/d4ec24 – NoahGonzales Nov 06 '19 at 09:26
@ NoahGonzales, the fetch is not supported for content-type is `form-urlencoded`, you have to convert it by yourself, you can see this question's answer(https://stackoverflow.com/questions/35325370/post-a-x-www-form-urlencoded-request-from-react-native). – Lenoarod Nov 06 '19 at 10:23
@ NoahGonzales, my answer the content-type is FormData if it can get data successfully, I suggest you use it – Lenoarod Nov 06 '19 at 10:26
It works using the format in the question you linked and "multipart/form-data" as the content type like you said. Thanks! – NoahGonzales Nov 17 '19 at 04:10
if it helps you, please accept the answer or upvote it. thanks – Lenoarod Nov 17 '19 at 07:53

In what format should a fetch POST request be created to access the Imagga API?

1 Answers1