Capacitor Filesharer plugin fails with large Base64

Ionic Framework
1

I’m trying to implement Capacitor Filesharer in my Capacitor project build with Vue.

This is what I have as a View:

<template>
    <div class="ion-page">
        <ion-content padding>
            <img id="selfie" src="data:image/png;base64,iVBORw0...uQmCC">
            <ion-button @click="shareNow()">Share</ion-button>
        </ion-content>
    </div>
</template>
<script>
import {
    Plugins,
    registerWebPlugin
} from "@capacitor/core";
import {
    FileSharer
} from '@byteowls/capacitor-filesharer';
const {
    Share
} = Plugins;
registerWebPlugin(FileSharer);
export default {
    methods: {
        shareNow() {
            var self = this;
            var img = document.getElementById('selfie').src
            Plugins.FileSharer.share({
                filename: Math.random() + "_selfie.png",
                base64Data: img.replace('data:image/png;base64', '').toString(),
                contentType: "image/png",
            }).then(() => {
                // alert('DONE');
            }).catch(error => {
                console.error(error);
                console.error("File sharing failed:", error.message);
            });
        },
    }
};
</script>

It’s all working, except that I can’t make an actual share. When I try to share a larger image then a few KB, it doesn’t work.

When the image is small (a few KB) it works, but I want to share a photo that I’m making and adding that photo as a Base64 string. I think it’ll fails because of a big Base64 string, but as far as I can tell is the only way to use the Filesharer plugin with a Base64 string.

3 Likes