Upload Base64 string file as formdata for POST endpoint

Question

I'm encountering an issue uploading a file with my endpoint via HTTPS. I've converted my image to a string of base64, and that string to a blob, then I attach the blob to my request. However, I still encounter an error trying to run the endpoint.

VM6:1 POST https://generic.address.com/endpoint net::ERR_CONNECTION_CLOSED (anonymous) @ VM6:1 (anonymous) @ VM40:29 VM40:32 error TypeError: Failed to fetch at :1:876 at :29:1

Here's the code:

var b64img = 'base64data';

var ab = new ArrayBuffer(b64img.length);
var ia = new Uint8Array(ab);

for (var i = 0; i < b64img.length; i++) {
    ia[i] = b64img.charCodeAt(i);
}
var imageBlob = new Blob([ab], { type: 'image/png' })

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
// Other headers . . .

var formdata = new FormData();
formdata.append("File", imageBlob, "filename.png");
// Other formdata . . .

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

fetch("https://generic.address.com/endpoint", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Does this answer your question? [Convert Data URI to File then append to FormData](https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata) — Yogi, Jun 08 '22 at 15:22
Thanks, Yogi, but the blob is being created properly. There's some issue with the networking is my guess which is why I'm getting the ERR_CONNECTION_CLOSED response. — Michael McCabe, Jun 08 '22 at 15:39
Seems like the content type is incorrect. The code is sending formData, but overrides the the default content type (multipart/form-data) and sets it to json. You might trying commenting out that line to see if changes anything. — Yogi, Jun 08 '22 at 16:30

Upload Base64 string file as formdata for POST endpoint

0 Answers0