capacitor-plugins icon indicating copy to clipboard operation
capacitor-plugins copied to clipboard

Suggestion: document how to write binary files with Filesystem plugin

Open alextreppass opened this issue 1 year ago • 2 comments

Feature Request

Plugin

Filesystem

Description

The filesystem example code uses UTF-8 (i.e. a text encoding)

The use-case I have is:

  • Fetching a PDF on the web side from a bucket
  • Writing it to the phone's cache folder with the Filesystem API
  • So that I can then invoke the Share plugin with the file URI

I was really scratching my head for a while trying to download + read a PDF file on the web side via a FileReader, and having to coerce this into a string. I initially followed the docs and used UTF-8, which was creating an invalid PDF as PDFs are binary files.

Platform(s)

Native (not web)

Preferred Solution

Document some example code for writing binary files, not only text files. Something like this might help:

// reads a file as base64
 async readFile(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        if (reader.result == null) {
          reject('No result from file reader');
        }
        if (reader.result instanceof ArrayBuffer) {
         reject('Unexpected ArrayBuffer');
        }
        resolve(reader.result);
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  }

// downloads a pdf file
const response = await fetch('https://example.com/a.pdf');
const blob = await response.blob();
const file = new File([blob], 'a.pdf' {
  type: blob.type,
});

// stores it to disk
const data = await readFile(file);
const res = await Filesystem.writeFile({
  data: readRes.data,
  directory: Directory.Cache,
  path: file.name,
  // note: no `encoding` param, so that it will write i.e. application/pdf binary data from the base64 stream, not text
});

Alternatives

Additional Context

Thanks!

alextreppass avatar May 24 '24 04:05 alextreppass