Base64 to Image File Convertion in JS

Issue

I am working on a project where I have to upload an image as form data along with other text fields. I have my file in Base64 string at first, then I convert it into a file before uploading it to the server.

const data = await fetch(base64String);
const blob = await data.blob();
const file = await new File([blob], 'avatar', { type: 'image/png' });

I logged the base64String in the client side before uploading it to the server. Then I upload file to the server as a File. Before saving it to MongoDB when I log it as a base64 string again in the server side, I see my string is not the same as before. I feel like while converting the base64 to file in the client side I am doing something wrong. Help me out please.

Solution

I have figured out my problem. When I take image file input from my computer I get a base64 string like below -

dataimage/jpegbase64/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...

But, when I convert it back into a file it expects a string like below -

/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA....

So, basically, I had to trim the string accordingly to match the expected format and wrote a base64 to file conversion function following this answer. Here is my function to convert a base64 string to an image file

export function getFileFromBase64(string64:string, fileName:string) {
  const trimmedString = string64.replace('dataimage/jpegbase64', '');
  const imageContent = atob(trimmedString);
  const buffer = new ArrayBuffer(imageContent.length);
  const view = new Uint8Array(buffer);

  for (let n = 0; n < imageContent.length; n++) {
    view[n] = imageContent.charCodeAt(n);
  }
  const type = 'image/jpeg';
  const blob = new Blob([buffer], { type });
  return new File([blob], fileName, { lastModified: new Date().getTime(), type });
}

Answered By - asif.ibtihaj