[Ionic - React] Filesystem.writefile gives no errors but is not working

Capacitor
1

Hi, I’m buildig an app with Ionic and React. I’ve been stuck for a couple of days now on creating a simple text file. This is the code that I currently have:

    setLoading(true);

    try {
      const test = await Filesystem.writeFile({
        path: 'Download/text.txt',
        data: 'This is a test',
        directory: Directory.External,
        encoding: Encoding.UTF8,
        recursive: true,
      });
      console.log(test);
    } catch (e) {
      console.error(e);
    }

    setLoading(false);

The loading screen will appear very briefly (I think about 0.2 sec) and then it will finish without any errors. The test variable logs the following: {uri: "/EXTERNAL/Download/text.txt"} but the file does not show up anywhere in the device storage. I’ve tested it in the browser, on an android emulator and on a physical android phone and none worked.

I added the following to my AndroidManifest.xml:
in the application tag:

android:requestLegacyExternalStorage="true"

Permissions part:

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

I use the following packages which might be relevant:

    "@capacitor/android": "^3.4.3",
    "@capacitor/core": "^3.4.3",
    "@capacitor/filesystem": "^1.1.0",
    "@ionic/core": "latest",
    "@ionic/react": "^5.0.7",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/core": "^5.36.0",

Any one who can help me out please? :slight_smile:

2

What version of Android are you testing on?

3

I’ve tested it on Android 11 and 12

4

Save it using Directory.Document and in iOS you need to keep key string in info.plist. You are trying to save it in download directory but i think it doesn’t store there because not exist the directory. So first let try to download it it will see you in document folder in android.

   try {
      const test = await Filesystem.writeFile({
        path: 'text.txt',
        data: 'This is a test',
        directory: Directory. Documents,
        encoding: Encoding.UTF8
      });
      console.log(test);
    } catch (e) {
      console.error(e);
    }

Or follow this document guide Capacitor filesystem

5

The File API was changed in Android 10 and further changed in Android 11/12. We are updating the @capacitor/filesystem plugin to work with the newer APIs with Capacitor 4, but at the moment you can only save files to the Documents folder.

This StackOverflow link has a good explanation on the changes made to the permissions and how each API version is affected

6

Thank you all for your responses, I’ve (finally) got it working now :smiley:! I’m currently saving the file in the documents folder, and I encountered another thing that I had to fix, for people who have the same problem:
In my AndroidManifest.xml, I had the following code for write permissions, which I literally copied and pasted from the internet without too much thought.

This seemed to work, and did not give any errors as far as I could see, but it did not work. It had to be like this:

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