@capacitor/filesystem

The Filesystem API provides a NodeJS-like API for working with files on the device.
🔌 Cordova Plugin · 🤖 Android Library · 🍏 iOS Library

🐛 Report Bug · 💡 Request Feature

Install

npm install @capacitor/filesystem
npx cap sync

Apple Privacy Manifest Requirements

Apple mandates that app developers now specify approved reasons for API usage to enhance user privacy. By May 1st, 2024, it's required to include these reasons when submitting apps to the App Store Connect.

When using this specific plugin in your app, you must create a PrivacyInfo.xcprivacy file in /ios/App or use the VS Code Extension to generate it, specifying the usage reasons.

For detailed steps on how to do this, please see the Capacitor Docs.

For this plugin, the required dictionary key is NSPrivacyAccessedAPICategoryFileTimestamp and the recommended reason is C617.1.

Example PrivacyInfo.xcprivacy

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>NSPrivacyAccessedAPITypes</key>
    <array>
      <!-- Add this dict entry to the array if the PrivacyInfo file already exists -->
      <dict>
        <key>NSPrivacyAccessedAPIType</key>
        <string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
        <key>NSPrivacyAccessedAPITypeReasons</key>
        <array>
          <string>C617.1</string>
        </array>
      </dict>
    </array>
  </dict>
</plist>

Migrating from downloadFile to File Transfer plugin

As of version 7.1.0, the downloadFile functionality in the Filesystem plugin has been deprecated in favor of the new @capacitor/file-transfer plugin.

Installing the File Transfer plugin

npm install @capacitor/file-transfer
npx cap sync

Migration example

Before (using Filesystem plugin):

import { Filesystem, Directory } from '@capacitor/filesystem';

await Filesystem.downloadFile({
  url: 'https://example.com/file.pdf',
  path: 'downloaded-file.pdf',
  directory: Directory.Documents,
  progress: true
});

// Progress events
Filesystem.addListener('progress', (progress) => {
  console.log(`Downloaded ${progress.bytes} of ${progress.contentLength}`);
});

After (using File Transfer plugin):

import { FileTransfer } from '@capacitor/file-transfer';
import { Filesystem, Directory } from '@capacitor/filesystem';

// First get the full file path using Filesystem
const fileInfo = await Filesystem.getUri({
  directory: Directory.Documents,
  path: 'downloaded-file.pdf'
});

// Then use the FileTransfer plugin to download
await FileTransfer.downloadFile({
  url: 'https://example.com/file.pdf',
  path: fileInfo.uri,
  progress: true
});

// Progress events
FileTransfer.addListener('progress', (progress) => {
  console.log(`Downloaded ${progress.bytes} of ${progress.contentLength}`);
});

The File Transfer plugin offers improved reliability, better error handling with specific error codes, and also adds upload functionality.

iOS

To have files appear in the Files app, you must also set the following keys to YES in Info.plist:

• UIFileSharingEnabled (Application supports iTunes file sharing)
• LSSupportsOpeningDocumentsInPlace (Supports opening documents in place)

Read about Configuring iOS for help.

Android

If using Directory.Documents or Directory.ExternalStorage, in Android 10 and older, this API requires the following permissions be added to your AndroidManifest.xml:

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

Read about Setting Permissions in the Android Guide for more information on setting Android permissions.

Note that Directory.ExternalStorage is only available on Android 9 or older and Directory.Documents only allows to access the files/folders created by your app on Android on Android 11 and newer.

Working with large files may require you to add android:largeHeap="true" to the <application> tag in AndroidManifest.xml.

Understanding Directories and Files

iOS and Android have additional layers of separation between files, such as special directories that are backed up to the Cloud, or ones for storing Documents. The Filesystem API offers a simple way to scope each operation to a specific special directory on the device.

Additionally, the Filesystem API supports using full file:// paths, or reading content:// files on Android. Simply leave out the directory param to use a full file path.

Example

import { Filesystem, Directory, Encoding } from "@capacitor/filesystem";

const writeSecretFile = async () => {
  await Filesystem.writeFile({
    path: "secrets/text.txt",
    data: "This is a test",
    directory: Directory.Documents,
    encoding: Encoding.UTF8,
  });
};

const readSecretFile = async () => {
  const contents = await Filesystem.readFile({
    path: "secrets/text.txt",
    directory: Directory.Documents,
    encoding: Encoding.UTF8,
  });

  console.log("secrets:", contents);
};

const deleteSecretFile = async () => {
  await Filesystem.deleteFile({
    path: "secrets/text.txt",
    directory: Directory.Documents,
  });
};

const readFilePath = async () => {
  // Here's an example of reading a file with a full file path. Use this to
  // read binary data (base64 encoded) from plugins that return File URIs, such as
  // the Camera.
  const contents = await Filesystem.readFile({
    path: "file:///var/mobile/Containers/Data/Application/22A433FD-D82D-4989-8BE6-9FC49DEA20BB/Documents/text.txt",
  });

  console.log("data:", contents);
};

API

Check the plugin's api here