Blob or URL to image file for form data upload

Question

I'm trying to take an image blob or url, and upload it via formdata as an image file type.

Here is the object I am working with (this.selectedImage):

{
 blob: "blob:http://localhost:3000/3018fad1-ff11-410e-b724-35bdd582435c"
 blobObj: Blob
   size: 673107
   type: "image/png"
 createdAt: "Wed, 21 Sep 2022 04:39:07 GMT"
 id: "ID_HERE"
 index: 1
 thumb: "IMG_URL_HERE"
 url: "IMG_URL_HERE"
}

Here are the docs for the place I am uploading the image: https://clipdrop.co/apis/docs/super-resolution#examples

And the code I am using. I grabbed this straight out of Postman as I can successfully make the API call there, and could not get the code in the documentation to work, so I tried this.

const file = new File([this.selectedImage], "imagename.jpg");
  var myHeaders = new Headers();
  myHeaders.append("x-api-key", "API_KEY_HERE");

  var formdata = new FormData();
  formdata.append("image_file", file, "image.png");
  formdata.append("upscale", "4");

  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: formdata,
    redirect: 'follow'
  };

  fetch("https://apis.clipdrop.co/super-resolution/v1", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

No matter what I do, I can't get the API to return correctly and best I can tell, it is because I am not formatting/converting the blob to an image file type correctly. Any thoughts on what I am doing wrong here?

Blob or URL to image file for form data upload

0 Answers