Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Plugin ID
  • Adding the Plugin in Monaca
  • Supported Platforms
  • Where to Store Files
  • File System Layouts
  • iOS File System Layout
  • Android File System Layout
  • Quirks
  • Android Quirks
  • iOS Quirks
  • Upgrading Notes
  • cdvfile protocol
  • Purpose
  • List of Error Codes and Meanings
  • Configuring the Plugin (Optional)
  • Android
  • iOS
  • Sample: Create Files and Directories, Write, Read, and Append files
  • Create a persistent file
  • Create a temporary file
  • Write to a file
  • Read a file
  • Append a file using alternative methods
  • Store an existing binary file
  • Display an image file
  • Create Directories

Was this helpful?

  1. API Reference
  2. Core Cordova Plugins
  3. Cordova 11.0

File Plugin

PreviousDialogs PluginNextGeolocation Plugin

Last updated 1 year ago

Was this helpful?

Tested Version:

This document is based on the original Cordova docs available at .

This plugin implements a File API allowing read/write access to files residing on the device. This plugin is based on several specs, including :

  • Although most of the plugin code was written when was current.

  • It also implements the

While the W3C FileSystem spec is deprecated for web browsers, the FileSystem APIs are supported in Cordova applications with this plugin for the platforms listed in the Supported Platforms list, with the exception of the Browser platform.

To get a few ideas how to use the plugin, check out the at the bottom of this page. For additional examples (browser focused), see the HTML5 Rocks' For an overview of other storage options, refer to Cordova's .

This plugin defines global cordova.file object. Although in the global scope, it is not available until after the deviceready event.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.file);
}

Plugin ID

cordova-plugin-file

Adding the Plugin in Monaca

Supported Platforms

  • Android

  • iOS

Where to Store Files

  • cordova.file.applicationDirectory - Read-only directory where the application is installed. (iOS, Android, BlackBerry 10, OSX, windows)

  • cordova.file.applicationStorageDirectory - Root directory of the application's sandbox; on iOS & windows this location is read-only (but specific subdirectories [like /Documents on iOS or /localState on windows] are read-write). All data contained within is private to the app. (iOS, Android, BlackBerry 10, OSX)

  • cordova.file.dataDirectory - Persistent and private data storage within the application's sandbox using internal memory (on Android, if you need to use external memory, use .externalDataDirectory). On iOS, this directory is not synced with iCloud (use .syncedDataDirectory). (iOS, Android, BlackBerry 10, windows)

  • cordova.file.cacheDirectory - Directory for cached data files or any files that your app can re-create easily. The OS may delete these files when the device runs low on storage, nevertheless, apps should not rely on the OS to delete files in here. (iOS, Android, BlackBerry 10, OSX, windows)

  • cordova.file.externalApplicationStorageDirectory - Application space on external storage. (Android)

  • cordova.file.externalDataDirectory - Where to put app-specific data files on external storage. (Android)

  • cordova.file.externalCacheDirectory - Application cache on external storage. (Android)

  • cordova.file.externalRootDirectory - External storage (SD card) root. (Android, BlackBerry 10)

  • cordova.file.tempDirectory - Temp directory that the OS can clear at will. Do not rely on the OS to clear this directory; your app should always remove files as applicable. (iOS, OSX, windows)

  • cordova.file.syncedDataDirectory - Holds app-specific files that should be synced (e.g. to iCloud). (iOS, windows)

  • cordova.file.documentsDirectory - Files private to the app, but that are meaningful to other application (e.g. Office files). Note that for OSX this is the user's ~/Documents directory. (iOS, OSX)

  • cordova.file.sharedDirectory - Files globally available to all applications (BlackBerry 10)

File System Layouts

Although technically an implementation detail, it can be very useful to know how the cordova.file.* properties map to physical paths on a real device.

iOS File System Layout

Device Path

cordova.file.*

iosExtraFileSystems

r/w

persistent

OS clears

sync

private

/var/mobile/Applications/<UUID>/

applicationStorageDirectory

r

N/A

N/A

N/A

Yes

appname.app/

applicationDirectory

bundle

r

N/A

N/A

N/A

Yes

www/

r

N/A

N/A

N/A

Yes

Documents/

documentsDirectory

documents

r/w

Yes

No

Yes

Yes

NoCloud/

documents-nosync

r/w

Yes

No

No

Yes

Cloud/

syncedDataDirectory

r/w

Yes

No

Yes

Yes

Caches/

cacheDirectory

cache

r/w

Yes*

No***

No

Yes

tmp/

tempDirectory

r/w

No**

Yes***

No

Yes

* Files persist across app restarts and upgrades, but this directory can be cleared whenever the OS desires. Your app should be able to recreate any content that might be deleted.

** Files may persist across app restarts, but do not rely on this behavior. Files are not guaranteed to persist across updates. Your app should remove files from this directory when it is applicable, as the OS does not guarantee when (or even if) these files are removed.

*** The OS may clear the contents of this directory whenever it feels it is necessary, but do not rely on this. You should clear this directory as appropriate for your application.

Android File System Layout

Device Path

cordova.file.*

AndroidExtraFileSystems

r/w

persistent

OS clears

private

file:///android_asset/

applicationDirectory

assets

r

N/A

N/A

Yes

/data/data/<app-id>/

applicationStorageDirectory

r/w

N/A

N/A

Yes

cache

cacheDirectory

cache

r/w

Yes

Yes*

Yes

files

dataDirectory

files

r/w

Yes

No

Yes

Documents

documents

r/w

Yes

No

Yes

<sdcard>/

externalRootDirector

sdcard

r/w***

Yes

No

No

Android/data/<app-id>/

externalApplicationStorageDirectory

r/w

Yes

No

No

cache

externalCacheDirectory

cache-external

r/w

Yes

No**

No

files

externalDataDirectory

files-external

r/w

Yes

No

No

* The OS may periodically clear this directory, but do not rely on this behavior. Clear the contents of this directory as appropriate for your application. Should a user purge the cache manually, the contents of this directory are removed.

** The OS does not clear this directory automatically; you are responsible for managing the contents yourself. Should the user purge the cache manually, the contents of the directory are removed.

*** As of API 30, these directories are no longer writable.

If external storage can't be mounted, the cordova.file.external* properties are null.

Quirks

Android Quirks

Android Persistent storage location

Previous versions of the plugin would choose the location of the temporary and persistent files on startup, based on whether the device claimed that the SD Card (or equivalent storage partition) was mounted. If the SD Card was mounted, or if a large internal storage partition was available (such as on Nexus devices,) then the persistent files would be stored in the root of that space. This meant that all Cordova apps could see all of the files available on the card.

If the SD card was not available, then previous versions would store data under /data/data/<packageId>, which isolates apps from each other, but may still cause data to be shared between users.

It is now possible to choose whether to store files in the internal file storage location, or using the previous logic, with a preference in your application's config.xml file. To do this, add one of these two lines to config.xml:

<preference name="AndroidPersistentFileLocation" value="Internal" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />

Without this line, the File plugin will use Internal as the default. If a preference tag is present, and is not one of these values, the application will not start.

If your application has previously been shipped to users, using an older (pre- 3.0.0) version of this plugin, and has stored files in the persistent filesystem, then you should set the preference to Compatibility if your config.xml does not specify a location for the persistent filesystem. Switching the location to "Internal" would mean that existing users who upgrade their application may be unable to access their previously-stored files, depending on their device.

If your application is new, or has never previously stored files in the persistent filesystem, then the Internal setting is generally recommended.

Slow recursive operations for /android_asset

Listing asset directories is really slow on Android. You can speed it up though, by adding src/android/build-extras.gradle to the root of your android project (also requires cordova-android@4.0.0 or greater).

Permission to write to external storage when it's not mounted on Marshmallow

iOS Quirks

  • cordova.file.applicationStorageDirectory is read-only; attempting to store files within the root directory will fail. Use one of the other cordova.file.* properties defined for iOS (only applicationDirectory and applicationStorageDirectory are read-only).

  • FileReader.readAsText(blob, encoding)

  • The encoding parameter is not supported, and UTF-8 encoding is always in effect.

iOS Persistent storage location

There are two valid locations to store persistent files on an iOS device: the Documents directory and the Library directory. Previous versions of the plugin only ever stored persistent files in the Documents directory. This had the side-effect of making all of an application's files visible in iTunes, which was often unintended, especially for applications which handle lots of small files, rather than producing complete documents for export, which is the intended purpose of the directory.

It is now possible to choose whether to store files in the documents or library directory, with a preference in your application's config.xml file. To do this, add one of these two lines to config.xml:

<preference name="iosPersistentFileLocation" value="Library" />
<preference name="iosPersistentFileLocation" value="Compatibility" />

Without this line, the File plugin will use Compatibility as the default. If a preference tag is present, and is not one of these values, the application will not start.

If your application has previously been shipped to users, using an older (pre- 1.0) version of this plugin, and has stored files in the persistent filesystem, then you should set the preference to Compatibility. Switching the location to Library would mean that existing users who upgrade their application would be unable to access their previously-stored files.

If your application is new, or has never previously stored files in the persistent filesystem, then the Library setting is generally recommended.

Upgrading Notes

In v1.0.0 of this plugin, the FileEntry and DirectoryEntry structures have changed, to be more in line with the published specification.

Previous (pre-1.0.0) versions of the plugin stored the device-absolute-file-location in the fullPath property of Entry objects. These paths would typically look like

/var/mobile/Applications/<application UUID>/Documents/path/to/file  (iOS)
/storage/emulated/0/path/to/file                                    (Android)

These paths were also returned by the toURL() method of the Entry objects.

With v1.0.0, the fullPath attribute is the path to the file, relative to the root of the HTML filesystem. So, the above paths would now both be represented by a FileEntry object with a fullPath of

/path/to/file

If your application works with device-absolute-paths, and you previously retrieved those paths through the fullPath property of Entry objects, then you should update your code to use entry.toURL() instead.

For backwards compatibility, the resolveLocalFileSystemURL() method will accept a device-absolute-path, and will return an Entry object corresponding to it, as long as that file exists within either the TEMPORARY or PERSISTENT filesystems.

This has particularly been an issue with the File-Transfer plugin, which previously used device-absolute-paths (and can still accept them). It has been updated to work correctly with FileSystem URLs, so replacing entry.fullPath with entry.toURL() should resolve any issues getting that plugin to work with files on the device.

cdvfile://localhost/persistent/path/to/file

which can be used to identify the file uniquely.

In v7.0.0 the return value of toURL() for Android was updated to return the absolute file:// URL when app content is served from the file:// scheme.

If app content is served from the http(s):// scheme, a cdvfile formatted URL will be returned instead. The cdvfile formatted URL is created from the internal method toInternalURL().

An example toInternalURL() return filesystem URL:

https://localhost/persistent/path/to/file

It is recommended to always use the toURL() to ensure that the correct URL is returned.

cdvfile protocol

Not Supported on Android

Purpose

cdvfile://localhost/persistent|temporary|another-fs-root*/path/to/file can be used for platform-independent file paths. cdvfile paths are supported by core plugins - for example you can download an mp3 file to cdvfile-path via cordova-plugin-file-transfer and play it via cordova-plugin-media.

To use cdvfile as a tag' src you can convert it to native path via toURL() method of the resolved fileEntry, which you can get via resolveLocalFileSystemURL - see examples below. You can also use cdvfile:// paths directly in the DOM, for example:

<img src="cdvfile://localhost/persistent/img/logo.png" />

This method requires following Content Security rules updates:

  • Add cdvfile: scheme to Content-Security-Policy meta tag of the index page, e.g.:

html<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  • Add <access origin="cdvfile://*" /> to config.xml.

Converting cdvfile:// to native path

resolveLocalFileSystemURL('cdvfile://localhost/temporary/path/to/file.mp4', function(entry) {
    var nativePath = entry.toURL();
    console.log('Native URI: ' + nativePath);
    document.getElementById('video').src = nativePath;
}

Converting native path to cdvfile://

resolveLocalFileSystemURL(nativePath, function(entry) {
    console.log('cdvfile URI: ' + entry.toInternalURL());
}

Using cdvfile in core plugins

fileTransfer.download(uri, 'cdvfile://localhost/temporary/path/to/file.mp3', function (entry) { ...
var my_media = new Media('cdvfile://localhost/temporary/path/to/file.mp3', ...);
my_media.play();

List of Error Codes and Meanings

When an error is thrown, one of the following codes will be used.

Code

Constant

1

NOT_FOUND_ERR

2

SECURITY_ERR

3

ABORT_ERR

4

NOT_READABLE_ERR

5

ENCODING_ERR

6

NO_MODIFICATION_ALLOWED_ERR

7

INVALID_STATE_ERR

8

SYNTAX_ERR

9

INVALID_MODIFICATION_ERR

10

QUOTA_EXCEEDED_ERR

11

TYPE_MISMATCH_ERR

12

PATH_EXISTS_ERR

Configuring the Plugin (Optional)

The set of available filesystems can be configured per-platform. Both iOS and Android recognize a tag in config.xml which names the filesystems to be installed. By default, all file-system roots are enabled.

<preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" />

Android

  • files: The application's internal file storage directory

  • files-external: The application's external file storage directory

  • sdcard: The global external file storage directory (this is the

    root of the SD card, if one is installed). You must have the

    android.permission.WRITE_EXTERNAL_STORAGE permission to use this.

  • cache: The application's internal cache directory

  • cache-external: The application's external cache directory

  • assets: The application's bundle (read-only)

  • root: The entire device filesystem

Android also supports a special filesystem named "documents", which represents a "/Documents/" subdirectory within the "files" filesystem.

iOS

  • library: The application's Library directory

  • documents: The application's Documents directory

  • cache: The application's Cache directory

  • bundle: The application's bundle; the location of the app itself

    on disk (read-only)

  • root: The entire device filesystem

By default, the library and documents directories can be synced to iCloud. You can also request two additional filesystems, library-nosync and documents-nosync, which represent a special non-synced directory within the /Library or /Documents filesystem.

Sample: Create Files and Directories, Write, Read, and Append files

The File plugin allows you to do things like store files in a temporary or persistent storage location for your app (sandboxed storage) and to store files in other platform-dependent locations. The code snippets in this section demonstrate different tasks including:

Create a persistent file

Before you use the File plugin APIs, you can get access to the file system using requestFileSystem. When you do this, you can request either persistent or temporary storage. Persistent storage will not be removed unless permission is granted by the user.

When you get file system access using requestFileSystem, access is granted for the sandboxed file system only (the sandbox limits access to the app itself), not for general access to any file system location on the device. (To access file system locations outside the sandboxed storage, use other methods such as window.resolveLocalFileSystemURL, which support platform-specific locations. For one example of this, see Append a File.)

Here is a request for persistent storage.

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {

    console.log('file system open: ' + fs.name);
    fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) {

        console.log("fileEntry is file?" + fileEntry.isFile.toString());
        // fileEntry.name == 'someFile.txt'
        // fileEntry.fullPath == '/someFile.txt'
        writeFile(fileEntry, null);

    }, onErrorCreateFile);

}, onErrorLoadFs);

The success callback receives FileSystem object (fs). Use fs.root to return a DirectoryEntry object, which you can use to create or get a file (by calling getFile). In this example, fs.root is a DirectoryEntry object that represents the persistent storage in the sandboxed file system.

The success callback for getFile receives a FileEntry object. You can use this to perform file write and file read operations.

Create a temporary file

Here is an example of a request for temporary storage. Temporary storage may be deleted by the operating system if the device runs low on memory.

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {

    console.log('file system open: ' + fs.name);
    createFile(fs.root, "newTempFile.txt", false);

}, onErrorLoadFs);

When you are using temporary storage, you can create or get the file by calling getFile. As in the persistent storage example, this will give you a FileEntry object that you can use for read or write operations.

function createFile(dirEntry, fileName, isAppend) {
    // Creates a new file or returns the file if it already exists.
    dirEntry.getFile(fileName, {create: true, exclusive: false}, function(fileEntry) {

        writeFile(fileEntry, null, isAppend);

    }, onErrorCreateFile);

}

Write to a file

Once you have a FileEntry object, you can write to the file by calling createWriter, which returns a FileWriter object in the success callback. Call the write method of FileWriter to write to the file.

function writeFile(fileEntry, dataObj) {
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function() {
            console.log("Successful file write...");
            readFile(fileEntry);
        };

        fileWriter.onerror = function (e) {
            console.log("Failed file write: " + e.toString());
        };

        // If data object is not passed in,
        // create a new Blob instead.
        if (!dataObj) {
            dataObj = new Blob(['some file data'], { type: 'text/plain' });
        }

        fileWriter.write(dataObj);
    });
}

Read a file

You also need a FileEntry object to read an existing file. Use the file property of FileEntry to get the file reference, and then create a new FileReader object. You can use methods like readAsText to start the read operation. When the read operation is complete, this.result stores the result of the read operation.

function readFile(fileEntry) {

    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function() {
            console.log("Successful file read: " + this.result);
            displayFileData(fileEntry.fullPath + ": " + this.result);
        };

        reader.readAsText(file);

    }, onErrorReadFile);
}

Append a file using alternative methods

Of course, you will often want to append existing files instead of creating new ones. Here is an example of that. This example shows another way that you can access the file system using window.resolveLocalFileSystemURL. In this example, pass the cross-platform Cordova file URL, cordova.file.dataDirectory, to the function. The success callback receives a DirectoryEntry object, which you can use to do things like create a file.

window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dirEntry) {
    console.log('file system open: ' + dirEntry.name);
    var isAppend = true;
    createFile(dirEntry, "fileToAppend.txt", isAppend);
}, onErrorLoadFs);

In addition to this usage, you can use resolveLocalFileSystemURL to get access to some file system locations that are not part of the sandboxed storage system. See Where to store Files for more information; many of these storage locations are platform-specific. You can also pass cross-platform file system locations to resolveLocalFileSystemURL using the cdvfile protocol.

For the append operation, there is nothing new in the createFile function that is called in the preceding code (see the preceding examples for the actual code). createFile calls writeFile. In writeFile, you check whether an append operation is requested.

Once you have a FileWriter object, call the seek method, and pass in the index value for the position where you want to write. In this example, you also test whether the file exists. After calling seek, then call the write method of FileWriter.

function writeFile(fileEntry, dataObj, isAppend) {
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function() {
            console.log("Successful file read...");
            readFile(fileEntry);
        };

        fileWriter.onerror = function (e) {
            console.log("Failed file read: " + e.toString());
        };

        // If we are appending data to file, go to the end of the file.
        if (isAppend) {
            try {
                fileWriter.seek(fileWriter.length);
            }
            catch (e) {
                console.log("file doesn't exist!");
            }
        }
        fileWriter.write(dataObj);
    });
}

Store an existing binary file

We already showed how to write to a file that you just created in the sandboxed file system. What if you need to get access to an existing file and convert that to something you can store on your device? In this example, you obtain a file using an xhr request, and then save it to the cache in the sandboxed file system.

Before you get the file, get a FileSystem reference using requestFileSystem. By passing window.TEMPORARY in the method call (same as before), the returned FileSystem object (fs) represents the cache in the sandboxed file system. Use fs.root to get the DirectoryEntry object that you need.

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {

    console.log('file system open: ' + fs.name);
    getSampleFile(fs.root);

}, onErrorLoadFs);

For completeness, here is the xhr request to get a Blob image. There is nothing Cordova-specific in this code, except that you forward the DirectoryEntry reference that you already obtained as an argument to the saveFile function. You will save the blob image and display it later after reading the file (to validate the operation).

function getSampleFile(dirEntry) {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://cordova.apache.org/static/img/cordova_bot.png', true);
    xhr.responseType = 'blob';

    xhr.onload = function() {
        if (this.status == 200) {

            var blob = new Blob([this.response], { type: 'image/png' });
            saveFile(dirEntry, blob, "downloadedImage.png");
        }
    };
    xhr.send();
}

After getting the file, copy the contents to a new file. The current DirectoryEntry object is already associated with the app cache.

function saveFile(dirEntry, fileData, fileName) {

    dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {

        writeFile(fileEntry, fileData);

    }, onErrorCreateFile);
}

In writeFile, you pass in the Blob object as the dataObj and you will save that in the new file.

function writeFile(fileEntry, dataObj, isAppend) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function() {
            console.log("Successful file write...");
            if (dataObj.type == "image/png") {
                readBinaryFile(fileEntry);
            }
            else {
                readFile(fileEntry);
            }
        };

        fileWriter.onerror = function(e) {
            console.log("Failed file write: " + e.toString());
        };

        fileWriter.write(dataObj);
    });
}

After writing to the file, read it and display it. You saved the image as binary data, so you can read it using FileReader.readAsArrayBuffer.

function readBinaryFile(fileEntry) {

    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function() {

            console.log("Successful file write: " + this.result);
            displayFileData(fileEntry.fullPath + ": " + this.result);

            var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
            displayImage(blob);
        };

        reader.readAsArrayBuffer(file);

    }, onErrorReadFile);
}

After reading the data, you can display the image using code like this. Use window.URL.createObjectURL to get a DOM string for the Blob image.

function displayImage(blob) {

    // Displays image if result is a valid DOM string for an image.
    var elem = document.getElementById('imageFile');
    // Note: Use window.URL.revokeObjectURL when finished with image.
    elem.src = window.URL.createObjectURL(blob);
}

Display an image file

To display an image using a FileEntry, you can call the toURL method.

function displayImageByFileURL(fileEntry) {
    var elem = document.getElementById('imageFile');
    elem.src = fileEntry.toURL();
}

If you are using some platform-specific URIs instead of a FileEntry and you want to display an image, you may need to include the main part of the URI in the Content-Security-Policy element in index.html. Here is an example.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Create Directories

In the code here, you create directories in the root of the app storage location. You could use this code with any writable storage location (that is, any DirectoryEntry). Here, you write to the application cache (assuming that you used window.TEMPORARY to get your FileSystem object) by passing fs.root into this function.

This code creates the /NewDirInRoot/images folder in the application cache. For platform-specific values, look at File System Layouts.

function createDirectory(rootDirEntry) {
    rootDirEntry.getDirectory('NewDirInRoot', { create: true }, function (dirEntry) {
        dirEntry.getDirectory('images', { create: true }, function (subDirEntry) {

            createFile(subDirEntry, "fileInNewSubDir.txt");

        }, onErrorGetDir);
    }, onErrorGetDir);
}

When creating subfolders, you need to create each folder separately as shown in the preceding code.

In order to use this plugin, please In order to use this plugin, please File plugin in Monaca Cloud IDE.

As of v1.2.0, URLs to important file-system directories are provided. Each URL is in the form , and can be converted to a DirectoryEntry using window.resolveLocalFileSystemURL().

There are multiple valid locations to store persistent files on an Android device. See for an extensive discussion of the various possibilities.

Marshmallow requires the apps to ask for permissions when reading/writing to external locations. By , your app has permission to write to cordova.file.applicationStorageDirectory and cordova.file.externalApplicationStorageDirectory, and the plugin doesn't request permission for these two directories unless external storage is not mounted. However due to a limitation, when external storage is not mounted, it would ask for permission to write to cordova.file.externalApplicationStorageDirectory.

In v1.1.0 the return value of toURL() was changed (see ) to return an absolute '' URL. wherever possible. To ensure a 'cdvfile:'-URL you can use toInternalURL() now. This method will now return filesystem URLs of the form

See , and for more details about available fs roots.

Using cross-platform Cordova file URLs to (see Where to Store Files for more info)

Creating and

For Cordova 5 security, the preceding code requires that you add the domain name, , to the Content-Security-Policy element in index.html.

file:///path/to/spot/
this page
default
CB-6394
file://
http://cordova.apache.org
7.0.0
Cordova Docs
The HTML5 File API
The Directories and System extensions Latest
an earlier spec
FileWriter spec
FileSystem article.
storage guide
sample
Where to Store Files
File System Layouts
Configuring the Plugin
Accessing the file system
store your files
files
directories
Writing to files
Reading files
Appending files
Display an image file
enable