# 'Missing image file in request. (Perhaps you specified \`image\` in the wrong format?)'

**URL:** <https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410>\
**Category:** API\
**Tags:** dalle2, dalle\
**Created:** [October 24, 2023, 10:41am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410 "2023-10-24T10:41:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![engr.safdarwasim](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/engr.safdarwasim/32/220799_2.png) [@engr.safdarwasim](https://community.openai.com/u/engr.safdarwasim)\
**Post date:** [October 24, 2023, 10:41am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/1 "2023-10-24T10:41:03Z")

</div>

I am getting above mentioned error while sending images as a buffer to create Image variations. I am sending data as a FormData() and Image as ImageData. I think error is because I am sending ImageData where file is required. Somebody mentioned that it is good to convert image into blob or b64. As, I have imageData, I do not know how to do it?

---

<div class="post-metadata">

**Author:** ![\_j](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/_j/32/766292_2.png) [@\_j](https://community.openai.com/u/_j)\
**Post date:** [October 24, 2023, 10:50am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/2 "2023-10-24T10:50:02Z")

</div>

You need to make a PNG file. The PNG file will need to be a multipart MIME attachment. It will need to be square.

I’ve looked at all the http docs recently for this, chain of RFCs, the magic numbers of the image/png, etc. and believe me, you’ll not want to code the network stuff yourself.

If you want to go brute force, you can look at “save form to PNG” libraries, then others to include file as form/multipart (like the curl method in API documentation), and then if you get it all working, see how you can eliminate the actual “file” part.

I’d send some stuff with python to see the end product first before the time investment; “variations” is underwhelming.

---

<div class="post-metadata">

**Author:** ![engr.safdarwasim](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/engr.safdarwasim/32/220799_2.png) [@engr.safdarwasim](https://community.openai.com/u/engr.safdarwasim)\
**Post date:** [October 24, 2023, 10:55am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/3 "2023-10-24T10:55:56Z")

</div>

I am working with javascript. I have imageData because I am preprocessing the image. Also “form/multipart” gives an error. I have imageData and I am converting it into .png as described in the example. I think, I need to convert ImageData into a .png file to resolve this error.

```auto
 let buffer = imageData;
 buffer.name = 'image.png';

```

---

<div class="post-metadata">

**Author:** ![\_j](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/_j/32/766292_2.png) [@\_j](https://community.openai.com/u/_j)\
**Post date:** [October 24, 2023, 11:08am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/4 "2023-10-24T11:08:03Z")

</div>

OpenAI examples are all using node.js backend and openai node library, and reading from files.

I’m no expert programmer, but I’m thinking code like `my_png = my_pixels` is not going to work.

---

<div class="post-metadata">

**Author:** ![engr.safdarwasim](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/engr.safdarwasim/32/220799_2.png) [@engr.safdarwasim](https://community.openai.com/u/engr.safdarwasim)\
**Post date:** [October 24, 2023, 11:12am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/5 "2023-10-24T11:12:56Z")

</div>

Yes, they are using node.js but you can send http request in any language. I read that people are also using Objective-C for it. There must be a solution.

---

<div class="post-metadata">

**Author:** ![\_j](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/_j/32/766292_2.png) [@\_j](https://community.openai.com/u/_j)\
**Post date:** [October 24, 2023, 11:25am UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/6 "2023-10-24T11:25:23Z")

</div>

I asked GPT-4 an informed question knowing what the API needs, and it also goes right to node.js…(and probably has some wishful-thinking hallucination knowing the AI)

> For handling image data and making HTTP requests in JavaScript, you can use the following libraries:
> 
> 1. **sharp** : This is a high performance Node.js image processing library. You can use it to convert your image data into a PNG file.
> 2. **form-data** : This is a library that allows you to create `multipart/form-data` streams. It can be used to submit forms and file uploads to other web applications.
> 3. **axios** : This is a promise-based HTTP client for the browser and Node.js. It can be used to make HTTP requests, including `multipart/form-data` submissions.
> 
> Here is a basic example of how you can use these libraries to convert an image to PNG and then upload it:
> 
> ```auto
> const sharp = require('sharp');
> const FormData = require('form-data');
> const axios = require('axios');
> const fs = require('fs');
> 
> async function convertAndUpload() {
> // Convert image to PNG using sharp
> const pngBuffer = await sharp('input.jpg')
> .png()
> .toBuffer();
> 
> // Write the PNG buffer to a file
> fs.writeFileSync('output.png', pngBuffer);
> 
> // Create a form
> const form = new FormData();
> form.append('image', fs.createReadStream('output.png'));
> form.append('otherField', 'some value');
> 
> // Make a multipart/form-data submission using axios
> const res = await axios.post('http://example.com/upload', form, {
> headers: form.getHeaders()
> });
> 
> console.log(res.data);
> }
> 
> convertAndUpload().catch(console.error);
> 
> ```
> 
> In this example, replace `'input.jpg'` with your image data buffer, `'http://example.com/upload'` with the URL you’re submitting the form to, and `'some value'` with the value of another field you’re submitting.
> 
> Remember to install these libraries using npm:
> 
> ```auto
> npm install sharp form-data axios
> 
> ```
> 
> Please note that you may need to adjust this code to fit your specific use case.

---

<div class="post-metadata">

**Author:** ![engr.safdarwasim](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/engr.safdarwasim/32/220799_2.png) [@engr.safdarwasim](https://community.openai.com/u/engr.safdarwasim)\
**Post date:** [October 24, 2023, 12:26pm UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/7 "2023-10-24T12:26:44Z")

</div>

Okay, I installed these libraries but to use them in JavaScript I need to use Webpack or Browsify.

---

<div class="post-metadata">

**Author:** ![engr.safdarwasim](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/engr.safdarwasim/32/220799_2.png) [@engr.safdarwasim](https://community.openai.com/u/engr.safdarwasim)\
**Post date:** [October 30, 2023, 12:52pm UTC](https://community.openai.com/t/missing-image-file-in-request-perhaps-you-specified-image-in-the-wrong-format/449410/8 "2023-10-30T12:52:19Z")

</div>

There is one issue with your solution. I am working with browser based application. All libraries you used are node.js modules. Now, fs.writeFileSync() writes file locally that you cannot do this with browser based application. Is it possible that we just make a Blob object, assign image to it without saving locally and send it to openai server?
