bug: editPhoto failed

[VaggV]

Plugin version:

"@capawesome/capacitor-photo-editor": "^0.1.0"

Platform(s):

Android

Current behavior:

It throws an error and it does nothing

Expected behavior:

I don't know what the edit photo does because there is no video or photo of its behavior but i guess a photo editor should open

Steps to reproduce:

I used the code snippet from the readme file

Related code:

import { PhotoEditor } from '@capawesome/capacitor-photo-editor';

import logo512 from '../assets/img/logo512.png';
import React from 'react';


function ImageEditorTest() {
  const [path, setPath] = React.useState("public/logo512.png");

  const editPhoto = async () => {
    
    PhotoEditor.editPhoto({ path: 'public/logo512.png' }).then((result) => {
      console.log("result", result);
    }).catch((error) => {
      console.log("error", error);
    });
  };

  return (
    <>
      <input type={"text"} onChange={(e) => setPath(e.target.value)} />
      <p>{path}</p>
      <button
        onClick={() => {
          editPhoto();
        }}
      >
        Test
      </button>
    </>
    
  );
}

Other information:

Capacitor doctor:

Latest Dependencies:

  @capacitor/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/core: 4.6.1

[success] Android looking great! 👌```

[robingenz]

Which platform do you use?
What is the error message?

[VaggV]

I am using react 17.0.2 with capacitor 4.6.1 and I tested this on an android tablet (Galaxy Tab S7 with Android 11)

The error message is just editPhoto failed

Here is a screenshot of the error

[VaggV]

This error also popped up on android studio's logcat

createEditPhotoIntent failed.
java.lang.IllegalArgumentException: URI is not hierarchical
 at java.io.File.<init>(File.java:421)
 at io.capawesome.capacitorjs.plugins.photoeditor.PhotoEditor.createEditPhotoIntent(PhotoEditor.java:25)
 at io.capawesome.capacitorjs.plugins.photoeditor.PhotoEditorPlugin.editPhoto(PhotoEditorPlugin.java:33)
 at java.lang.reflect.Method.invoke(Native Method)
 at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:138)
 at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:763)
 at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
 at android.os.Handler.handleCallback(Handler.java:938)
 at android.os.Handler.dispatchMessage(Handler.java:99)
 at android.os.Looper.loop(Looper.java:246)
 at android.os.HandlerThread.run(HandlerThread.java:67)

[robingenz]

Thanks, this is the issue. Please use an absolute path. You can use the 'getUri' method from the Capacitor Filesystem plugin for that: https://capacitorjs.com/docs/apis/filesystem#geturi

I need to improve the documentation.

[VaggV]

I am now getting this error (and the URI I used is file:///data/user/0/com.vaggelis.reacttests/files/logo512.png provided by Filesystem.getUri)

createEditPhotoIntent failed.
java.lang.IllegalArgumentException: Failed to find configured root that contains /data/data/com.vaggelis.reacttests/files/logo512.png
 at androidx.core.content.FileProvider$SimplePathStrategy.getUriForFile(FileProvider.java:825)
 at androidx.core.content.FileProvider.getUriForFile(FileProvider.java:450)
 at io.capawesome.capacitorjs.plugins.photoeditor.PhotoEditor.createEditPhotoIntent(PhotoEditor.java:27)
 at io.capawesome.capacitorjs.plugins.photoeditor.PhotoEditorPlugin.editPhoto(PhotoEditorPlugin.java:33)
 at java.lang.reflect.Method.invoke(Native Method)
 at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:138)
 at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:763)
 at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
 at android.os.Handler.handleCallback(Handler.java:938)
 at android.os.Handler.dispatchMessage(Handler.java:99)
 at android.os.Looper.loop(Looper.java:246)
 at android.os.HandlerThread.run(HandlerThread.java:67)

[robingenz]

Please paste your AndroidManifest.xml.

[VaggV]

I'm sorry for the late reply. Here is my AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.vaggelis.reacttests">

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
            android:name="com.vaggelis.reacttests.MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

[robingenz]

Mhm everything seems fine.
Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example) so I can debug the issue.

[VaggV]

Finally made it work

I was using this before:

const photo = await Filesystem.getUri({ path: "logo512.png", directory: Directory.Data});

For some reason the path it returned wasn't correct so to be sure i've tried to write the file again to the documents folder using this:

const photo = await Filesystem.writeFile({
  path: "logo512.png",
  data: logo512,
  directory: Directory.Documents,
  recursive: true
});

The result of writeFile has the URI of the image and it worked with PhotoEditor.editPhoto

Would be nice if I could use a base64 string instead of a path and also get a base64 string result after I edit the photo

[robingenz]

I am glad it works now! In this case i am closing this issue now.

Would be nice if I could use a base64 string instead of a path and also get a base64 string result after I edit the photo

Great idea! Feel free to create a feature request for this.