Image via post request and form-data body

Question

Im trying to do an simple implementation of MAX Image Caption Generator (https://github.com/IBM/MAX-Image-Caption-Generator-Web-App) for an Webproject. This wont be in any production environment, im just doing it for my bachelor thesis. The MAX Image Caption Generator is running in an local Docker Container.

The API of MAX Image Caption Generator takes an POST request with an image file via form-data as body. Im trying to implement an automatic function to run all Images of an Webpage through the API and using the result as image alternative texts. But somehow the API wont take my given images and only respondes with:

{
  errors: {
    image: "An image file Missing required parameter in an uploaded file",
  },
  message: "Input payload validation failed",
};

I tried using the append() function of the Formdata datatype in JS, but that only takes blobs or files. So i converted the html img to canvas than to base64 and then to blob... But I'm getting the above error. Because i thought maybe the images get faulty or something while converting them from img to blob, i tested with the fileinput.files[] Object via HTML and JS. But that requests also the same error from above. In Postman just adding an image file via form-data works. So the API is fine. What exactly am I doing wrong? I don't really know how to move forward. Not even an simple Image file using file input is working.

My conversion from img to blob:

async function convertImage(image) {
  var canvas = document.createElement("canvas");
  var canvasContext = canvas.getContext("2d");
  var img = image;
  var width = img.width;
  var height = img.height;
  canvasContext.drawImage(img, 0, 0, width, height);
  var base64Image = canvas.toDataURL("image/jpeg");
  return await fetch(base64Image).then((res) => res.blob());
}

The API call for all images using my conversion:

var imagePath = document.getElementsByClassName("image-embed-item");

for (var i = 0; i < imagePath.length; i++) {
  var blob = await convertImage(imagePath[i]);
  var imageName = getImageName(imagePath[i]);
  var formdata = new FormData();

  formdata.append("image", blob, imageName);
  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: formdata,
    redirect: "follow",
  };

  fetch("http://localhost:5000/model/predict", requestOptions)
    .then((response) => response.text())
    .then((result) => console.log(result))
    .catch((error) => console.log("error", error));
}

The API call using an image uploaded through the HTML file input:

const fileInput = document.getElementById("input");
fileInput.onchange = () => {
  const selectedFile = fileInput.files[0];
  formdata.append("image", selectedFile);
  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: formdata,
    redirect: "follow",
  };

  fetch("http://localhost:5000/model/predict", requestOptions)
    .then((response) => response.text())
    .then((result) => console.log(result))
    .catch((error) => console.log("error", error));
};

MyHeaders:

var myHeaders = new Headers();
    myHeaders.append("accept", "application/json");
    myHeaders.append("Content-Type", "multipart/form-data");