Hey, new here, and am having some trouble on the developer side, maybe someone can help me?
I’m calling OpenAI APIs in my frontend code using Fetch requests and Kor Connect as a proxy to hide my API Key.
I’ve been having a lot of fun using text and generation endpoints, but now I want to experiment with the variations and editing endpoints for images.
How can I upload a source image (for variations, or mask, for inpainting) from my frontend using an HTML File form? I want to be able to upload an image using the standard HTML file form, then pass the result of that upload as the “image” parameter in the body payload of the fetch request. I keep getting 415 error codes because I can’t figure out what the format should be since I’m not using the OpenAI node package.
Any help would be appreciated!
Thanks in advance!
This StackOverflow post was super helpful.
Basically, if I use a FormData object and not include a “Content-Type” header, and put the inputForm.files[0] directly in the formData, then it works well!
I hope this helps someone else with this trouble 
1 Like
Hi, I’m having the same issues with not being able to understand how to specify the image data.
In your reply, you’re using technology that I’m not. Can you explain exactly what “inputForm.files[0]” is? I have been assuming it’s a base64 encoded string represented by UTF8 characters which when interpreted as a binary stream represents a PNG file. But, the documentation is very much incomplete here.
I managed to get Postman to perform a call for me using its ability to specify a file as an argument - when I sniffed the payload, it indeed looked like a base64 stream, so I don’t know what I’m missing. I’ll play with removing the content-type, but that seems a bit odd.