Capacitor Clipboard plugin `.write({image})` on Android pastes text

[GeorgiyZhuravlev]

Bug Report

Plugin(s)

"@capacitor/clipboard": "^1.0.2",

Capacitor Version

user@theMac  ~/mobileapp   feature/qrcodes ●✚  npx cap doctor
💊   Capacitor Doctor  💊 

Latest Dependencies:

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

Installed Dependencies:

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

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

Platform(s)

Android

Current Behavior

I write to Clipboard an image, like described here https://capacitorjs.com/docs/apis/clipboard#writeoptions So, like this:

Clipboard.write({
   image: dataUriBase64String
})

When I paste then to any "image ready" destination, clipboard filled in iOS emulator pastes ok (image), but filled on Android emulator pastes just a text with the (valid) dataUri string, like data:image/png;base64,iVBORw....

Expected Behavior

Expected to have the same behavior as on iOS - if I copied the image, then it pastes the image, not the string.

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

[GeorgiyZhuravlev]

it will need a reliable Code Reproduction

Code Reproduction for the Android platform only?

Being run both on Web and iOS writing an image to Clipboard works just fine - pastes correct image then. The issue is Android-specific - it pastes text (dataUri string), not an image. And the code is as simple as this:

Clipboard.write({
   image: `data:image/png;base64,iVBORw....`
})

[jcesarmobile]

an example of where to copy the image to check that the written image is not pasted as image but as text would be fine

[GeorgiyZhuravlev]

@jcesarmobile

Here's the screencast of the same app run on iOS and Android (1 minute long) https://www.youtube.com/watch?v=W7kd6dAvbDE

Also, tried a production build installed on the real device (through Google's internal testing) - same results.

So, it's not the JS code (the code is the same, that's the point of hybrid apps, right), it's something with the Android part of the plugin. Or, maybe with the mime type of image/png for Android, I don't know...

Thank you!

[jcesarmobile]

I'm not asking because I don't believe you, I'm asking because I need to verify (by testing myself) that it doesn't work as expected and try to fix it and then verify that the fix worked. For that I need a real app or an online website where I can paste images. I've found one that shows clipboard web API and allows to copy/paste an image, it doesn't work for Android if copied from the Clipboard plugin, but doesn't work for iOS neither. I need one where both work (or iOS works but Android shows the issue you described)

[GeorgiyZhuravlev]

@jcesarmobile

I've prepared the repository to reproduce the issue, please check - https://github.com/GeorgiyZhuravlev/clipboard Ionic CLI generated Angular blank + both platforms + Capacitor Clipboard plugin. Just a button to copy image to the clipboard.

Thank you!

[jcesarmobile]

Sorry if it's not clear, but we already have a test-app that copy an image as data url, what I need is an app or website that allows to paste that data url and on iOS it shows the image and fails to show it on Android because it's a string. As you said in the first message, any "image ready" destination where you can paste an image copied from somewhere else but that fails for Capacitor copied images. Something like the example on https://web.dev/async-clipboard/, but that one doesn't work for iOS.

[GeorgiyZhuravlev]

what I need is an app or website that allows to paste that data

any "image ready" destination where you can paste an image copied from somewhere else but that fails for Capacitor copied images.

Just use any app you already have installed on your pc/mac/phone - messengers, photo/documents editor or Gmail app letter editor - it also understands an image copied to the clipboard.

Why do we need some "specially made" destination to test that? Destinations are fine, the issue is with filling the clipboard on Android, setting the type of the content...

[wmadden]

Any progress here? This is a real issue with the @capacitor/clipboard plugin

[ionitron-bot[bot]]

This issue has been labeled as type: bug. This label is added to issues that that have been reproduced and are being tracked in our internal issue tracker.

[gonnavis]

Any progress? Encountered the same issue on Android, only copied plain base64 image string, instead of the real image.

await Clipboard.write({
    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAK5QTFRFAAAAQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMQGCMdURlpwAAADp0Uk5TAAIBAwVPqge4RUP8/6/C+Dz3scU9S/r7+UjPxva2GtmzBMe/GxnbrLrB2typrquwsqj9P81Gtz5HSsnXzJUAAAF3SURBVHicjZPrWsIwDIbTtYDQOE4yJjrOIAdBERC9/xszbdN1Qx+1f9b1e5t+aRqAMISIwk8kBFwNaZgc5oXCUFCp5osSajd1WirpDY23TEhQMTZbRUJCA7GNHUuQ3qUffRdOEdDTqDExhLB6gn1M770psj+gLegIUA80QXzEjAETaDiyiwmOYTK10xRnCiLnrzeYw2LJxNOKJ2vpAlj/myEstlbQSKdbXfiUrP9tIHRJF1Bx/gOBJkbMOgHP7L9AaMwifwdkc8emCqfgPtSFvi8/EONQLPp2vhEJ3/r/iVdO/ooo+NijS3+7CMQOIPIhJisLlGK08ZAXS03tESWCbq/nAOnry5dsiCXtfzvm76tr9T5iIEaYHt2TE15PMKuGbOens9MjqMW8HEeUrZtu5vmzF/DOxVobQx32f6LO8VdQb5v3aevPddGYnkMPSWj1aYt7H9IQ5P9SbCsFrSbOpE+Jqp9erpvqI1Oh6eDwWdb/bttfG/8LFe8ohlFXdYYAAAAASUVORK5CYII=',
});

[datawaslost]

I continue to encounter this same issue on Android - has anyone found a workaround as it remains broken?

[tobeagram]

So we've just implemented Capacitor Clipboard and then discovered this bug in production – users can't copy an image on Android and were instead given a base64 string (works as expected on iOS).

I've hastily done a quick fix and pushed the commit to this fork. The workaround is creating a temporary image using FileProvider so it's pastable in other apps. I will endeavour to clean this up and submit a PR very soon.