@capacitor/share plugin not working with Android to share image files

Capacitor
1

Bug Report

I have a Capacitor 2 project where I can share images with other applications (Instagram, Facebook, WhatsApp, etc) using the @capacitor/share plugin and passing a fileUri as a value for the url property. Everything works normally for both Android and iOS.

However, when upgrading the project to Capacitor 4 (I didn’t do the migration, but created a blank project already with Capacitor 4 and then adapted my codes where necessary) the exact same code logic doesn’t work on my Android devices. For iOS, image sharing works correctly (I tested it on an iPhone 11 with iOS 16.1.2).

In AndroidManifest.xml I already have the android.permission.READ_EXTERNAL_STORAGE and android.permission.WRITE_EXTERNAL_STORAGE permissions and when checking the Android Studio console I always get Error: Share canceled log coming from the catch block of my share method. I’m also saving the image files in the cache directory, so I don’t know why this problem is happening. I’m using @capacitor/share@^4.1.0.

Capacitor Version

💊   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/cli: 4.6.1
  @capacitor/core: 4.6.1
  @capacitor/android: 4.6.1
  @capacitor/ios: 4.6.1

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

Android (tested on physical devices with Android 8.0.0 and Android 9.0.0 and both with the same behavior)

Current Behavior

The sharing dialog opens normally and shows all available apps, including Instagram Stories and Facebook Stories, that is, the plugin is recognizing that I am sharing an image and otherwise these options do not appear in the list of apps. Some examples of results obtained when selecting an app are:

  • Instagram Stories/Facebook Stories: nothing happens.
  • Instagram Feed: Instagram opens and a toast is shown with the message “Unable to load image”, then Instagram closes and focus returns to my app.
  • WhatsApp/WhatsApp Business: A toast is shown with the message “Share failed. Try again.”

As I mentioned earlier the Error: Share cancelled message is also shown in the Android Studio console.

Expected Behavior

That I can share the images with other apps.

Code Reproduction

In this example I’m using fetch to load an external image and save it on the device (tested and writing the images in the cache directory normally) but even if I use the Camera plugin and choose a photo from the gallery the same behavior occurs.

async write(imageURL: string) {
  try {
    const response: Response = await fetch(imageURL);
    const blob: Blob = await response.blob();
    const reader = new FileReader();
  
    reader.onloadend = async () => {
      const file = await Filesystem.writeFile({
        data: reader.result as string,
        directory: Directory.Cache,
        path: `${Date.now()}.jpeg`
      });
  
      this.share(file.uri);
    };
  
    reader.readAsDataURL(blob);
  } catch (error) {
    console.error(error);
  }
}

async share(fileUri: string) {
  try {
    const shareResult = await Share.share({
      dialogTitle: this.stringService.getValue('share'),
      url: fileUri // I also tried using the files property and passing the value as [fileUri] but the same thing happens
    });

    console.log(shareResult.activityType);
  } catch (error) {
    console.log(error);
  }
}

Other Technical Details

npm --version output: 8.19.2

node --version output: v18.12.1

How can I solve this? Thanks!

2

You have to use the files[] option.

In your example would be:

const shareResult = await Share.share({
  files: [fileUri],
  dialogTitle: this.stringService.getValue('share'),
});
3

Thanks for the answer but I also already tried using the files property (commented in the code) and the same behavior occurs. By the way, the url parameter still serves this purpose, since it’s only one file, whereas files can be used for multiple.

4

You’re right. On older SDK (25, 26, 27, 28) don’t work.

I replied your Issue on github: bug: @capacitor/share plugin not working with Android to share image files · Issue #1353 · ionic-team/capacitor-plugins (github.com)

1 Like