Share files with capacitor share plugin

Question

I need to share a PDF file. I am using CapacitorJS for native functionality.

let shareRet = await Share.share({
  title: 'See cool stuff',
  text: 'Really awesome thing you need to see right meow',
  url: 'http://ionicframework.com/',
  dialogTitle: 'Share with buddies'
});

This is from the example. But I have my data as a base64 string. Is there a way to share this as an attachment?

Prate

You can only specify a URL, so you could try saving your base64 content to a local file and point to that file via its URL. – Wobble

Answer 1

This code works for me on iOS and Android:

import { Directory, Filesystem } from '@capacitor/filesystem';
import { Share } from '@capacitor/share';

function share(fileName: string, base64Data: string) {
  return Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Cache
  })
    .then(() => {
      return Filesystem.getUri({
        directory: Directory.Cache,
        path: fileName
      });
    })
    .then((uriResult) => {
      return Share.share({
        title: fileName,
        text: fileName,
        url: uriResult.uri,
      });
    });
}

Discourse

Great!!! Works in Capacitor v3, important note to use Directory.Cache, with Directory.Data doesn't work – Rives

You can use encoding: 'utf8', – Sateen

Thank you so much! As I said in my comment on the question, I had this exact problem and question, and this answer is awesome! – Shardashare

Answer 2

Try using files: [] property, this code might help if you wanna send a binary file like image via email or instagram or whatsapp my capacitor version 4.x

import { Share } from '@capacitor/share';


shareImage() {
try {
//1. get image as base64
// this function just downloads the file from link and converts to base64

      const b64image = await this._mediaUploadService.downloadImage(this.selectedImages[0]) as string;
      


//2.  save file in cache
      await Filesystem.writeFile({
        path: this.selectedImages[0],
        data: b64image,
        directory: Directory.Cache
      });



//3. get full uri of the saved image
      let imgData = await Filesystem.getUri({
        path: this.selectedImages[0],
        directory: Directory.Cache
      });

// share using @capacitor/share plugin
      Share.share({
        text: "hello",
        dialogTitle: "Share via",
        files: [imgData.uri],
      });
    } catch (e) {
         console.error(e);
    }
}

September

Answer 3

This code will share images, try to edit it using jspdf for create and share pdf

import domtoimage from 'dom-to-image';
import { Share } from '@capacitor/share';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Capacitor } from '@capacitor/core';
import { Camera, CameraResultType } from '@capacitor/camera';


  async shareImage() {
    let receiptName = 'Receipt N:' + this.invoice?.invoiceNumber + '.png';
    const div = this.screenshotElement.nativeElement;
    const divHeight = div.clientHeight;
    const divWidth = div.clientWidth;
    const options = { background: '#ffffff', width: divWidth, height: divHeight };

    await Filesystem.requestPermissions();

    let base64Data = await domtoimage.toPng(div, options);

    // browser download 
    this.downloadImgElement.nativeElement.src = base64Data;
    this.downloadLinkElement.nativeElement.href = base64Data;
    this.downloadLinkElement.nativeElement.download = receiptName;
    this.downloadLinkElement.nativeElement.click();



    // device shareing
    await Filesystem.writeFile({
      path: receiptName,
      data: base64Data,
      directory: Directory.Cache
    });


    let fileResult = await Filesystem.getUri({
      directory: Directory.Cache,
      path: receiptName
    });

    let imageLink = Capacitor.convertFileSrc(fileResult.uri);

    Share.share({
      title: receiptName,
      text: receiptName,
      url: fileResult.uri,
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error sharing ::: ', error));

  }

Surfperch