Keep getting "'image' is a required property" when using valid image urls?

Hi, why do I keep getting 400 errors despite having valid image URLs converted into buffers?

const response = await axios.get(input,  { responseType: 'arraybuffer' })
  const buffer = Buffer.from(response.data, "utf-8")
  buffer.name = "image.png";
  var data = JSON.stringify({
  "image": input,
  "n": 10,
  "size": "1024x1024"
});

var config = {
  method: 'post',
  url: 'https://api.openai.com/v1/images/variations',
  headers: { 
    'Authorization': 'Bearer ' + apikey, 
    'Content-Type': 'multipart/form-data'
  },
  data : data
};

await axios(config)
.then(function (response) {
      let toInsert = {
  "key":        key,
  "output":   response.data.data[0].url,
  "output2":   response.data.data[1].url,
  "output3":   response.data.data[2].url,
  "output4":   response.data.data[3].url,
  "output5":   response.data.data[4].url,
  "output6":   response.data.data[5].url,
  "output7":   response.data.data[6].url,
  "output8":   response.data.data[7].url,
  "output9":   response.data.data[8].url,
  "output10":   response.data.data[9].url,
  "title":    "response"
}

Iā€™ve tried passing plain image URLs, Data Urls, and buffers. Why does it keep telling me ā€œImage property is requiredā€ despite having a valid image?

3 Likes

Hey @sewellstephens104, did you find a solution?

Iā€™m getting same error using images edit API with PHP.
My payload is this:

$params = [
            'image' => fopen($filePath, 'r'),
            'prompt' => $prompt,
          ];

I have the same issue, did you find a solution?

I tried with Laravel http client.

Hi, I am getting the similar error. I have image data like this.

let imageData = cxt.getImageData(0, 0, width, height).data;

Then I convert ImageData into image similar described in the tutorial but getting this error.

const buffer = imageData;
buffer.name = "image.png";

Did you find the solution? I am getting similar error but I think error is not about valid image but in sending the request. Why you are sending the input instead of buffer?

Looking throught nodejs sdk docs, I found that the api checks that the object is ~FileLike~ when attempting to append it to FormData. If itā€™s not FileLike, it gets interpreted as an object, which messes the key that gets added to the FormData hence the error.

My solution was to just set the values expected by the file like check on the blob and things seemed to work.

const blob = new Blob()
blob.name = "foo.png"
blob.lastModified = 20

I canā€™t include the link to the code as reference, but you can find it by going to the node js sdk on github, and looking for the function isFileLike. The code messing up is the function addFormValue.

Your content-type is wrong. Set it to something like ā€˜Content-Type: multipart/form-data; boundary=${boundary}ā€™