Empty base64 string

Question

I have a problem with the Instagram plugin and the base64 Plugin from Cordova.

What I am trying is: I want to share an Image via Instagram (prefereably Story).

I have the absolute path like this: '/assets/images/storyTemplates/diary.png'

And now, the documentation says, all I have to do is something like this:

this.base64.encodeFile(path).then((base64File: string) => {
   console.log('nativepath: ' + path);
   console.log('base64: ' + base64File);
   if (this.instagram.isInstalled()) {
      this.instagram.share('data:image/png;base64,file://' + base64File, 'caption').then(data => {
            if (data) {
              console.log(data);
            }
          });
        }
      });

but the console.log(base64File) is empty... Error outputs:

nativepath: /assets/images/storyTemplates/diary.png
base64: 
copying caption:  caption

vendor.js:45196 ERROR Error: Uncaught (in promise): Share Cancelled
    at resolvePromise (polyfills.js:4086)
    at resolvePromise (polyfills.js:4043)
    at polyfills.js:4147
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3657)
    at Object.onInvokeTask (vendor.js:64580)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3656)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:3429)
    at drainMicroTaskQueue (polyfills.js:3835)

Do I have to import some XML in the config file? or in the AndroidManifest?

I am really helpless right now :D

Thanks in advance!

That is a relative path. An absolute path would start with `/`. — Andrew Morton, Jan 29 '20 at 13:36
ok thanks, so '/assets/images/.../template.png' works at least visually. but is this the absolute path then? the base64 string is still empty :/ — SunnyAdventurer, Jan 29 '20 at 14:08
That is indeed an absolute path. You can check the image is where you intend it to be: if your website is at `https://www.example.com` then enter `https://www.example.com/assets/images/storyTemplates/diary.png` in the address bar and see if the image appears. — Andrew Morton, Jan 29 '20 at 14:22
There's another problem you haven't got to yet: an example of a base64-encoded image is [here](https://stackoverflow.com/q/5242319/1115360) - so I'm pretty sure that you need to remove the `file://` from it. Beyond that, I can't help here. — Andrew Morton, Jan 29 '20 at 14:23

SunnyAdventurer · Answer 1 · 2020-01-30T10:28:21.353

Ok so I found the solution. The App installed on a device is not able to access the assets folder, where my Image is stored.

I had to copy the file to the data Directory of the App to use it further.

the code looks like this:

private basedirectory = 'www/assets/images/storyTemplates/';

socialShare(filename){
 this.file.copyFile(this.file.applicationDirectory + this.basedirectory, filename, this.file.dataDirectory, filename).then(() => {
      this.file.checkFile(this.file.dataDirectory, filename).then(result => {
        this.file.readAsDataURL(this.file.dataDirectory, filename).then(base64file => {
          console.log('encoded: ' + base64file);
          if (this.instagram.isInstalled()) {
            this.instagram.share('data:image/png;base64,file:///' + base64file, 'pferdesporthaus_loesdau').then(instagramData => {
              if (instagramData) {
                console.log(instagramData);
              }
            });
          }
        });
      }, (error) => {
        console.log('checkFile Error');
        console.log(error);
      });
    }).catch(err => {
      console.log('copying error');
      console.log(err);
    });
}

I hope you get the answer, I am terrible at explaning :D

Well, that worked a few weeks ago and now it doesn't anymore. I dint't change anything in the code, but the error message says, "ERROR TypeError: this.file.copyFile is not a function"... this is really confusing and makes no sense to me :D — SunnyAdventurer, Feb 13 '20 at 14:03

score 0 · Answer 2 · answered May 06 '20 at 05:15

ok wow. I hate my life. I've been debugging this code for a while now, and it seems like this.file is a String. Although i declared it as private file: File; In this component in ionViewWillEnter I get a navParam called 'file'. And console.log(this.file) apparently prints out what`s in the navParam called 'file'.

Had to rename the navParam and it works... Don't know if this makes sense or not :D

Empty base64 string

2 Answers2