0

I am using Angular 9 together with ionic5 and I am trying to save a file on my Android 9 device. Unfortunately, every time I try to write file by using Capacitor, the file is saved to the IndexedDB and not on disc/sdcard. Is there some way to tell ionic that I want to save to sdcard and/or fix my code?

Code for saving files

const fileName = decodeURIComponent(attachment.Name);

const savedFile = await Filesystem.writeFile({
    path: fileName,  // filename.png
    data: attachment.Content,  // base64 encoded png file
    directory: FilesystemDirectory.ExternalStorage,
});
console.log(savedFile.uri);

Permissions

The app should have permissions to write to the SD card, as this is defined inside AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Expected result

According to the documentation, this should save the file to the root of the sdcard.

Actual result

When executing this, the returned URI is /EXTERNAL_STORAGE/filename.png, but the file is not present on the sdcard, because it was saved inside IndexedDB, as seen on the screenshot from Chrome Inspector attached to the application running on my Android:

Screenshot of content of the IndexedDB

Adam H
  • 136
  • 1
  • 6

1 Answers1

2

After I wrote this question, stackoverflow was able to find a similar one, that was not resolved, but anwsered my question.

The solution is to make sure, that you use Plugins and not import:

Correct

const { Filesystem } = Plugins;

Incorrect

import { Filesystem } from '@capacitor/core';

Adam H
  • 136
  • 1
  • 6
  • This solution is confusing because what you describe as "incorrect" is what is found in the example code of the capacitor documentation. https://capacitorjs.com/docs/apis/filesystem#example – deltamind106 Jan 19 '22 at 20:18
  • Interesting. It is possible that they have changed it in the last couple of months. Is the code working properly, when you use the import method? – Adam H Jan 20 '22 at 09:24
  • You have to change it to: import { Filesystem } from ‘@capacitor/vue’ and then it does work properly. – deltamind106 Jan 22 '22 at 14:28
  • Isn't `@capacitor/vue` only for Vue framework? Because here I am talking about Angular application. – Adam H Jan 23 '22 at 15:05