# External API Request with Image

**URL:** <https://forum.wixstudio.com/t/external-api-request-with-image/1089>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [April 19, 2023, 8:59am UTC](https://forum.wixstudio.com/t/external-api-request-with-image/1089 "2023-04-19T08:59:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![a-anujjp](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@a-anujjp](https://forum.wixstudio.com/u/a-anujjp)\
**Post date:** [April 19, 2023, 8:59am UTC](https://forum.wixstudio.com/t/external-api-request-with-image/1089/1 "2023-04-19T08:59:41Z")

</div>

I would like for a user to upload an Image(s) and then send a request to an external API along with the image(s). After struggling a lot, I have been been able to figure out a way to get the URL for the saved image file but from here on, I am struggling on how to make a POST request with the uploaded image. All help will be immensely appreciated.

---

<div class="post-metadata">

**Author:** ![Certified\_Code](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/certified_code/32/80179_2.png) [@Certified\_Code](https://forum.wixstudio.com/u/Certified_Code)\
**Post date:** [April 19, 2023, 2:23pm UTC](https://forum.wixstudio.com/t/external-api-request-with-image/1089/2 "2023-04-19T14:23:39Z")

</div>

Why you need to make a post request? You mean upload the image to another platform?

If yes, check this out: [javascript - Attach an image from url in form data in JS? - Stack Overflow](https://stackoverflow.com/questions/72394346/attach-an-image-from-url-in-form-data-in-js)

---

<div class="post-metadata">

**Author:** ![a-anujjp](https://avatars.discourse-cdn.com/v4/letter/a/90ced4/32.png) [@a-anujjp](https://forum.wixstudio.com/u/a-anujjp)\
**Post date:** [April 20, 2023, 7:11am UTC](https://forum.wixstudio.com/t/external-api-request-with-image/1089/3 "2023-04-20T07:11:05Z")

</div>

```javascript
I have a server setup (FastAPI with ray) with my ML model, which receives the image and then sends back the result as a JSONResponse.

Below is how I get the imageURLand then send the request to the server following this link (https://www.wix.com/velo/reference/wix-fetch/fetch)

```

export function uploadButton1\_change(event) {  
let imgSrc = “”  
if($w(“#uploadButton1”).value.length \> 0) {  
$w(“#uploadButton1”).uploadFiles()  
.then( (uploadedFiles) =\> {  
imgSrc = uploadedFiles[0].fileUrl;  
imgSrc = “[https://static.wixstatic.com/media/](https://static.wixstatic.com/media/)” + uploadedFiles[0].fileUrl.split(“/”)[3];  
getRecommendation\_click(imgSrc)  
});  
}  
}

export async function getRecommendation\_click(imgSrc) {  
const jsonBody = {  
“file”: imgSrc  
};  
console.log(jsonBody)  
let serverUrl = “…”;  
const response = await fetch(serverUrl, {“method”: “post”,  
“headers”: {“Content-Type”: “multipart/form-data; boundary=MyBoundary”},  
“body”: `–MyBoundary  
Content-Disposition: form-data; name=“url”

${imgSrc}  
–MyBoundary–`  
})  
if (response.ok) {  
const json = await response.json();  
console.log(json)  
}  
}

```javascript

However on the server side I get 400: Bad Request.
On Ngrok's web Interface I see the following RAW query received

```

POST /endpoint HTTP/1.1  
Host: 58eb-103-250-94-214.ngrok-free.app  
User-Agent: node-fetch/1.0 (+https://github.com/bitinn/node-fetch)  
Content-Length: 154  
Accept: _/_  
Accept-Encoding: gzip,deflate  
Content-Type: multipart/form-data; boundary=MyBoundary  
X-Forwarded-For: 34.145.153.120  
X-Forwarded-Proto: https

–MyBoundary  
Content-Disposition: form-data; name=“url”

[https://static.wixstatic.com/media/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*~mv2.jpg](https://static.wixstatic.com/media/ ***************** ~mv2.jpg)  
–MyBoundary–

```javascript

Even though when i click on the imageURL from the browser developer tools, the link shows me the uploaded image, implying the imageURL is indeed valid.

When I send a request for the same imageURL through insomnia, it works and on On Ngrok's web Interface I see the following RAW query received

```

POST /endpoint HTTP/1.1  
Host: 58eb-103-250-94-214.ngrok-free.app  
User-Agent: insomnia/2023.1.0  
Content-Length: 178  
Accept: _/_  
Content-Type: multipart/form-data; boundary=X-INSOMNIA-BOUNDARY  
X-Forwarded-For: 150.249.158.109  
X-Forwarded-Proto: https  
Accept-Encoding: gzip

–X-INSOMNIA-BOUNDARY  
Content-Disposition: form-data; name=“url”  
[https://static.wixstatic.com/media/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*~mv2.jpg](https://static.wixstatic.com/media/ ***************** ~mv2.jpg)  
–X-INSOMNIA-BOUNDARY–

```javascript

To my eyes the two look similar. However for the one generated from the EditorX, results in 400 Bad Request
{"detail":"There was error parsing the body"}

Please do let me know if you have any further suggestions
```