Cannot get base64 image from .jpg

Ionic Native
1

Hi,
I have a jpg in externalDataDirectory-Folder (src= path/image.jpg). I want to get the base64 represenation of this file (saved as blob jpg).
I tried:
this.file.checkFile(photo_path, photo_name).then((bol: boolean) => {console.log("file exists")}, (err) => {console.log("file doesnt exist")});
It says the file does not exist, although I can find it in the apps folder…
But then:

this.base64.encodeFile(src).then((base64File: string) => { ...

Doesnt work, the base64File variable is empty. And also this doesn work:
this.file.readAsDataURL(photo_path, photo_name).then((base64File) => {console.log("File is: " + base64File)}, (err) => { console.log("File is not")});

The base64File variable just contains: "data:image/jpeg;base64, "

What am I doing wrong??

2

Hi Refle,

If I remember well from my previous work, there are few steps / hints to check when using Ionic Native Camera Plugin:

  • If you plan to use Base64 image encoding, your data entry must be a string (check data type)
  • Make sure your image file is well saved locally, and you can use local storage for that (personally I chose to store my pictures as a local temp buffer in array)
  • You need to understand a base64 image string is only a string that a browser can see as an image, but it does not exist as a file - unless you save it somewhere (once you have the go from Camera Plugin)

In my opinion, you’re not doing wrong, it’s just you try to load something that doesn’t exist.

Edit : You can try with a data entry that is not a blob, for a solution. Can you convert blob to string? Not sure.

Hope it helps,

3

Thanks for your reply Francois!
So I am using the CameraPreviewPlugin. I get a base64 string as a result. I can save it to a blob using following code:

  private writeFile(img, photo_path, photo_name) {
          const bytes: string = atob(img);
          const byteNumbers = new Array(bytes.length);
          for (let i = 0; i < bytes.length; i++) {
            byteNumbers[i] = bytes.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);

          const blob: Blob = new Blob([byteArray], { type: 'image/jpg' });

          this.file.writeFile(photo_path, photo_name, blob);
        }

What I get is a jpg image at location “photo_path”.
So far so good.
What I now want is to upload this photo to firebase storage. I heard that storing an image on firebase is most simple using a base64 string (or should I do it otherwise? If yes, how?).
So how can I upload this jpg image (that i can even open in the file explorer of my android) to firebase? I wanted to convert it back to a base64 string, which I then can (I did that given a base64 string) upload to firebase… that is all i want. I cant believe how complicated it can be. Should be super simple - maybe I am just dumb…

4

Ok, the problem is that when I retrieve the stored file, this is an asynchronous function, hence I have to wait for the promise to be fulfilled. Then all works as expected. Hope this tipp helps some newbies with the same issue.