feat: Support binary data in FileSystem API

[imhoffd]

Feature Request

Plugin

FileSystem

Description

The FileSystem plugin should support binary data when using appendFile, readFile, and writeFile. An encoding key could be provided when working with utf8 encoded data.

To represent binary data in JS, Blobs (part of the File API spec) should be used because they best represent file contents: immutable, potentially (but not necessarily) encoded, potentially (but not necessarily) with an associated mime type. Blobs can be converted to ArrayBuffers or streams for alternative use cases.

Platform(s)

• Android
• iOS
• Web (IndexedDB supports Blobs)

Additional Context

• Depends on Support blob/large data capacitor#984
• @diachedelic created a plugin which uses a separate HTTP server for serving binary data: https://github.com/diachedelic/capacitor-blob-writer

[diachedelic]

I'd just like to note that I did try to implement this through the webview itself, and could not. See https://issuetracker.google.com/issues/36918490 and https://bugs.webkit.org/show_bug.cgi?id=179077

[imhoffd]

@diachedelic Thanks for the insight. I think a separate HTTP server is a good way to implement this. I'd rather it be in Capacitor core, however. Perhaps all bridge communication could use the server (benchmarking needed).

[diachedelic]

Oh yeah, that would be great. capacitor-blob-writer would be even quicker for smaller payloads if it didn't make a bridge call before every request.

[izeryab]

Don't think its perfect but somehow i managed to do it like this:

  fetch(jsoncall)
                    .then(res => res.blob()) // Gets the response and returns it as a blob
                    .then(blob => {
                        //saveAs(blob,fileName);
                        //let f = new File([blob],fileName);
                        var reader = new FileReader();//https://developer.mozilla.org/en-US/docs/Web/API/FileReader
                        reader.readAsDataURL(blob);
                        reader.onloadend = function () {
                            var base64data = reader.result;
                                capacitorFilesystem.Filesystem.writeFile({
                                    data: base64data as string,
                                    path: fileName,
                                    directory: capacitorFilesystem.Directory.Data
                                })

                        }
                    });

[HarelM]

Would be nice to also be able to download large files straight to the filesystem without the need "pass" through the webview (i.e. FileTransferPlugin capabilities).See my comment in 984 issue as this can crash the app due to out of memory.