Convert Base64 Image File URI to a File Object

Question

I have to send the File object as payload to the backend API. How can I convert a Base64 Image File URI to a File object format as mentioned below? I tried to look up for other solutions but those are with Blob to file conversion or base64 data url conversion. Could anyone please help?

Base64 Image File URL

data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg

This needs to be converted to

File Object

File {
   lastModified: 1582829787565
   lastModifiedDate: Thu Feb 27 2020 10:56:27 GMT-0800 (Pacific Standard Time) {}
   name: "TestImageAM.png"
   size: 186278
   type: "image/png"
   webkitRelativePath: ""
}

Answer 1

Personally I think the best option would be converting the base64 image string to a blob like this

    fetch(base64ImageString)
    .then((res) => res.blob())
    .then((blob) => {
      console.log(blob);
    });

Which logs the blob object to the console like below

Blob {size: 20832, type: "image/jpeg"}

And then upload the image using formData which supports uploading image files in blob format like this.

var formData = new FormData();
formData.append('my_image', blob);

You can get more information regarding how to upload images using formData from the documentation here .

Answer 2

All you need to do is, pass the Base64 Image URI to JavaScript's File constructor and that should give you the File object in your required format.

fileURI = 'data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg'
const file = new File(fileURI, 'anyname.jpg')
console.log('File Object', file)