External API Request with Image

Ask the community
,
1

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.

2

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

3 
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/” + 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)
}
}


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
–MyBoundary–




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
–X-INSOMNIA-BOUNDARY–



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