How to convert an imported image to a blob and use in form data

I recently finished up our new QR-api and whilst I was creating some example calls to the API on our software page to demonstrate how it works, I wanted to POST an image to the API that came from a local directory. Personally, I've never done such thing before, since the usual scenario is that you upload the image from an file input.

So in this tutorial, my goal is to help out whoever is finding themself in a similar situation.

Solution

So what we want to do, is basically transform our imported image into a blob that we can pass with our FormData to the API.

The image that we import, is a base64 string, so what we need to do is write a function that will create a blob from the string.

Below snippet will demonstrate such a function

const base64ToBlob = (base64: string) => {
  const byteCharacters = window.atob(base64);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray]);
};

And then, we just pass in our base64 encoded image into the function.

Note that the base64 string looks like below example when we import it

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAklEQVR4AewaftIAAAKSSURBVO3BQY4bSRAEQY9E///LvnMpoA4qoDlkS8lFmsUfjDaK0UoxWilGK8VopRitFKOVYrRSjFaK0UoxWilGK8VopRitXPxSEp6k8rQkPEnlVcVopRitFKOViw9ReVcSTpKwqHyayruS8K5itFKMVi4ekIS7VD4pCScqdyThLpVPKkYrxWilGK1c/M+pfJNitFKMVi6+UBJOVHZJWFS6K0YrxWilGK1cPEDlSSp3qbxK5V8pRivFaOXiQ5LwryRhUdklYVE5SUIHxWilGK3EH3yZJNyl8k2K0UoxWilGKxcPSMJO5SQJr1LZJWFR2SXhRGVJwrtU3lWMVorRSvzBLyThROUkCTuVT0rCTmVJwk7lVUm4S+VVxWilGK0Uo5WLByRhp7Ko7JLwJyq7JNyhskvCorJLwrtUliS8qxitFKOVi19S2SXhjiTsVP4kCTuVkyScqCxJ2KksSVhUdklYVHZJWFTeVYxWitFKMVq5+KUknKjskrConCRhUdkl4Y4k7FTuUFmScJfKkoSdyquK0UoxWok/+AJJWFR2SThROUnCorIkYafytxSjlWK0UoxWLn4pCU9SOUnCTuUkCYvKu5KwU1mSsFN5VTFaKUYrFx+i8q4k3KGyS8KislN5lcouCYvKLgmfVIxWitHKxQOScJfKHSpLEu5KwpNUliS8qxitFKOVYrRy8YVUTpKwU3lVEk6SsFNZVN5VjFaK0crFl0jConKicpKEE5UTlSUJuyScqLyqGK0Uo5VitHLxAJVPU1mSsFM5ScKicofKLgmLypOK0UoxWrn4kCR8myTcoXJHEnYqrypGK8VopRitxB+MNorRSjFaKUYrxWilGK0Uo5VitFKMVorRSjFaKUYrxWjlP3srEMt5y6d/AAAAAElFTkSuQmCC

And in order for our function to work, we need to strip out data:image/png;base64, part from it, since that is not the actual base64 data.

We will split the string on , and use the latter part, which represents our data.

import image from "./image.png";

image.split(",")[1];

Full code

import image from "./image.png";

const formData = new FormData();
formData.append("myImage", base64ToBlob(image.split(",")[1]));

await fetch(url, {
  method: "POST",
  body: formData,
});

Outro

In todays short guide, we showed how we can forward an imported image to an API using FormData. The logic behind it, is basically that we transform a base64 encoded image to a blob, which we append to the form data. This scenario is probably not super common, but it can be good to know how to do it anyway.

I hope you enjoyed this guide, and thanks for reading!