Filesystem improvements

[joel-daros]

• The FileWriteOptions directory property needs to accept string concatenations like FilesystemDirectory.ExternalStorage + '/downlad', not only types defined in Enum.

• Will be useful If the The FileWriteOptions directory accepts Blob type not only strings.

• When you write a file, if it already exists, it will be overwritten? Is there any parameter for this?

[vially]

:+1: Using Blobs for file read/writes would be really useful.

[nikosdouvlis]

Hello, are there any plans to implement any of the improvements suggested above?

[oliverandersencox]

@jcesarmobile is there any progress with saving as a blob? If not, what would you recommend is the best approach to store blob data?

[mlynch]

Would be a good one to look at after 1.0 to improve filesystem performance, along with #1392 and #1391

[pnaylor]

Also feeling pretty limited without Blob writability currently. Is the best option to just fall back to cordova-plugin-file for that usage for now?

[black-hawk85]

Sharing my workaround with you.

I'm using web-implementation of the Filesystem plugin. Don't know if it's a good solution but it helps solving my problem.

import { FilesystemDirectory, FilesystemEncoding } from '@capacitor/core'
// const { Filesystem } = Plugins // => Doesn't work with blob in native
// Workaround: Use Web-Implementation of plugin
import { FilesystemPluginWeb } from '@capacitor/core/dist/esm/web/filesystem.js'
const Filesystem = new FilesystemPluginWeb()

[digaus]

Any news on blob support?

[digaus]

If anyone still needs this, I implemented a solution myself which works with current cap version. Here is a sample app:

https://github.com/digaus/CapacitorSaveBlob

Tested myself in browser, android and on iOS.

Maybe @jcesarmobile or someone else is willing to integrate this into the current filesystem plugin (maybe add a new encoding type blob) if this solution is up to their standard :smile:

Edit: with this PR it will also work for electron -> https://github.com/ionic-team/capacitor/pull/2567

[mishrasatyam]

Any update on this in version 3?

[qliqdev]

Capacitor V3

Trying to safe Fetched PDF file. But when i open the file it outputs blank page

Preview: pdfOut.pdf

My Code:

const reader = new FileReader();
reader.addEventListener('loadend', (e) => {
  const text = e.target.result;
  this.writeFile(text, 'title.pdf').then();
});
reader.readAsBinaryString(myBlobPdfFile);

async writeFile(str, title) {
  const {publicStorage} = await Filesystem.checkPermissions();
  if (publicStorage === 'granted') {
    this.checkDir().then(async () => {
      const {uri} = await Filesystem.writeFile({
        path: 'pdf/' + title,
        data: str,
        directory: Directory.Documents,
        encoding: Encoding.UTF8,
      });
      if (uri) {
        /// action to share or open file
      }
    });
  } else {
    await Filesystem.requestPermissions();
  }
}

Here is result of reader

%PDF-1.3
%ºß¬à
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/MediaBox [0 0 263.6220472440945173 453.5433070866141634]
/Contents 4 0 R
>>
endobj
....
....
....
<<
/Size 28
/Root 27 0 R
/Info 26 0 R
/ID [ <FB056280F091518448E6503C4DC48D31> <FB056280F091518448E6503C4DC48D31> ]
>>
startxref
44017
%%EOF

@capacitor/core 3.0.2
@capacitor/cli 3.0.2
@capacitor/android 3.0.2
@capacitor/ios 3.0.2

@capacitor/filesystem (1.0.2

[Hodes]

It would be really useful specially because there is an issue wthin the FileReader which in this case can be used to convert a Blob to a base64 to be written using current Filesystem.writeFile.

The issue consists in not firing the onloadend, onload etc... on FileReader instance when using Capacitor. The thread: FileReader API not firing metions a workaround which is working fine for converting Blob to base64, then saving with Filesystem.

I'm watching this thread now looking forward to replace the current workaround with a final solution, hopefully saving the Blob instance directly.

Thanks !

[iamcco]

Any update?

[caiorsantanna]

It would be really useful specially because there is an issue wthin the FileReader which in this case can be used to convert a Blob to a base64 to be written using current Filesystem.writeFile.

The issue consists in not firing the onloadend, onload etc... on FileReader instance when using Capacitor. The thread: FileReader API not firing metions a workaround which is working fine for converting Blob to base64, then saving with Filesystem.

I'm watching this thread now looking forward to replace the current workaround with a final solution, hopefully saving the Blob instance directly.

Thanks !

Hi, a cannot comment on the mentioned issue anymore, so i will comment here so the next guys wont stuck anymore :)

-> If in web (for development) get normal FileReader instance -> For native, get _realReader instance -> Force angular to change detection because this will not work properly otherwise

private run() {
  const response = await fetch(path);
  const blob = await response.blob();
  const reader = this.getFileReader();

  reader.onload = (): void => {
    console.log(reader.result)
    this.changeDetectorRef.detectChanges();
  };

  reader.readAsDataURL(blob);
}

private getFileReader(): FileReader {
  if (!Capacitor.isNativePlatform()) {
    return new FileReader();
  }

  const fileReader = new FileReader() as any;
  const reader = fileReader._realReader;

  return reader;
}