Capacitor: Read File URI taken with the Camera on Android end up in error

[peterpeterparker]

[X] I would to submit a bug report

Current behavior

For my test I chain the actions of taking a photo with the camera plugin with reading the result URI (path) with the file plugin.

I was able to test my code/app on my (real device) iPhone 6s but it fails on Android (both version 7, Samsung Edge, and 8, Google Nexus)

Expected behavior

Being able to read the content on Android too ;)

Code

Html

<button (click)="takePicture()" ion-button color="primary">Take Picture</button>

<button (click)="fileRead()" ion-button color="secondary">Read file</button>

Ts

 image: string; // webPath to display the photo
 imageDevicePath: string; // device path to read the content

 async takePicture() {
    const { Camera } = Plugins;

    const imageUrl: CameraPhoto = await Camera.getPhoto({
      height: 1080,
      width: 1080,
      resultType: CameraResultType.Uri
    });

    console.log(imageUrl.path); 

    this.image = imageUrl.webPath; // --> Ok image in correctly on iOS and Android

    this.imageDevicePath = imageUrl.path; // See screenshot, is set
  }

  async fileRead() {
    const { Filesystem } = Plugins;

    let contents = await Filesystem.readFile({
      path: this.imageDevicePath,
      directory: FilesystemDirectory.Documents
    });

    console.log(contents);
  }

Error log

result Filesystem.readFile (#24336284)
capacitor-runtime.js:67 ERROR Error: Uncaught (in promise): [object Object]
at c (polyfills.js:3)

[mlynch]

Can you try it without the directory option when you readFile? This works in my example

[peterpeterparker]

@mlynch you are totally right, without directory: FilesystemDirectory.Documents it works like a charm on both Android 7 and 8 👍

I should have read better the doc and not just copy/paster the example like a dumb user ;)

Thx for the quick support

[prantikv]

Getting the same error on Android 7.1 when using resultType: CameraResultType.Base64 here is the code.

  const result = await Camera.getPhoto({
        quality: 75,
        allowEditing: false,
        source: CameraSource.Camera,
        resultType: CameraResultType.Base64
      });

      this.image = this.domsanitizer.bypassSecurityTrustResourceUrl(result && result.base64Data);

[jcesarmobile]

Can you make sure you are using latest Capacitor? (1.0.0-alpha.34)

[prantikv]

Using the following versions as in my package.json

   "@capacitor/android": "^1.0.0-alpha.34",
    "@capacitor/cli": "^1.0.0-alpha.34",
    "@capacitor/core": "^1.0.0-alpha.34",

[jcesarmobile]

And does your settings.gradle have this?
include ':capacitor-android' project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor/')
And the app's build.gradle implementation project(':capacitor-android') instead of implementation 'ionic-team:capacitor-android:1.0.+'?

We changed it to use a local capacitor-android, but old projects might still have the old approach, which will prevent from picking latest version

[prantikv]

I do have the following in my settings.gradle

include ':app'
include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor/')
include ':capacitor-android-plugins'
project(':capacitor-android-plugins').projectDir = new File('../node_modules/@capacitor/cli/assets/capacitor-android-plugins/')

apply from: 'capacitor.settings.gradle'

But the build.gradle does not have implementation 'ionic-team:capacitor-android:1.0.+'

[jcesarmobile]

What's your actual error?

Looking at the original issue, the camera seems to work fine, but the error is when using File plugin to copy, and in your code you don't use File plugin, so doesn't seem the same issue.

Are you getting a ERROR Error: Uncaught (in promise): [object Object]?

Try putting your code inside a try/catch

try {
  //your code
}  catch(e) {
  console.log(e);
}

and create a new issue with the error message logged in the catch

[prantikv]

Yes am getting ERROR Error: Uncaught (in promise): [object Object]

I did try try-catch. But the try catch block never gets executed for some reason.

Can't spent more time on this. Will come back to capacitor one it is released.

[jcesarmobile]

Ok, thanks anyway.
I've tested your code in three different devices, Android 5.0.1, Android 7.0 and Android 8.1 and couldn't reproduce.

[peterpeterparker]

@prantikv just in case, I thought about this after reading your msg "I did try try-catch. But the try catch block never gets executed for some reason." ... after having bundled your app again, did you copy the content to the platform?

ionic build --prod
ngx cap copy // <--I mean this after each bundle

[davidsadrinas]

How can I save the photo object just before the photo was taken and the camera app close?