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: ""
}

is data:image/jpeg;base64,file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg even a thing? a data URI, encoded in base64 is the raw data of a thing (image in this case) encoded in base64 - not the path of an actual file — Jaromanda X
Yes it is, I get that from this plugin in Ionic this.camera.getPicture(options).then( (imageData) => {} Here, imageData is what I have posted, the Base64 File Image URI — coderpc
the Base64 File Image URI - huh? are you saying file:///storage/emulated/0/Android/data/com.abc/cache/1586842420784.jpg is base64? . and : are not part of base64, and a file with .jpg extension is unlikely to contain base64 encoded data - so, from start to finish, you are not making sense — Jaromanda X
Just read the documentation for that getPicture function ... imageData is either a base64 encoded string OR a file URI ... now, a base64 encoded string would be like ABCDEFG, i.e. a series of characters, A-Z,a-z,0-9,+,/ ... whereas, a file URI would be like file:///some/path/filename.jpg .... you've confused yourself and added a data URI prefix to a file URI — Jaromanda X
In the documentation, the let base64Image = 'data:image/jpeg;base64,' + imageData; is if imageData is a base64 string - the fact that you end up with data:image/jpeg;base64,file:///... is because your code is adding that prefix when it doesn't need to for a file URI — Jaromanda X

Evans Evans · Accepted Answer · 2021-07-10T10:08:05

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.

Convert Base64 Image File URI to a File Object

2 Answers