Filesystem.writeFile() crashes when trying to write large PDF files on my Capacitor Ionic applications

Question

I have apps made using the Ionic Framework which uses capacitor (Angular). The apps are deployed on both Android and IOS. From within the apps you can download a generated PDF.

I use the following code to do so:

  static async writeAndOpenFile(data: Blob, fileName: string) {
    const reader = new FileReader();
    reader.readAsDataURL(data);
    reader.onloadend = async function () {
      const base64data = reader.result;

      try {
        const result = await Filesystem.writeFile({
          path: fileName,
          data: <string>base64data,
          directory: Directory.Data,
          recursive: true
        });

        let fileOpener: FileOpener = new FileOpener();
        fileOpener.open(result.uri, data.type)
          .then(() => console.log('File is opened'))
          .catch(e => console.log('Error opening file', e));
      } catch (e) {
        console.error('Unable to write file', e);
      }
    }
  }

however when I try to write larger PDF files the applications crash. I am wondering if theres and solution for this

Thank you

Answer 1

The Filesystem.writeFile(...) method is not intended to write large files. You should use one of the following two plugins instead:

• capacitor-blob-writer
• capacitor-file-chunk

To avoid such problems, you should not load the file into the WebView at all.