## react-native-fs Native filesystem access for react-native ## Changes for v2.5 - breaking change for RN 0.47 at android (https://github.com/facebook/react-native/releases/tag/v0.47.0) ## Changes for v2.4 - Made new thread for other native processes [ANDROID] (https://github.com/itinance/react-native-fs/commit/ad36b078db9728489155a55c1b7daa42ed191945) thx to [codesinghanoop](https://github.com/codesinghanoop) - Upgrade gradle build tools to 25 (https://github.com/itinance/react-native-fs/commit/239bccb9d56fe9308daafb86920ed29eb9e5cfe4) thx to [markusguenther](https://github.com/markusguenther) - Fixed Podfile Path-Error (https://github.com/itinance/react-native-fs/commit/9fd51e7e977400f3194c100af88b4c25e7510530) thx to [colorfulberry](https://github.com/colorfulberry) - Add read-method with length and position params (https://github.com/itinance/react-native-fs/commit/a39c22be81f0c1f2263dbe60f3cd6cfcc902d2ac) thx to [simitti](https://github.com/simitii) ## Changes for v2.3 - React-Native 0.40 is minimum required for compiling on iOS (otherwise install an older release, see below) - Access to iOS-based "assets-library" is now supported with `copyAssetsFileIOS` - `readDir` will return now creation- and modification-time of files as with `stat()` (thanks @Ignigena) - optional connectionTimeout and readTimeout-Settings on `downloadFile` for Android (thanks @drunksaint) ## Breaking change in v2.0 - Removed attributes from `writeFile` and `appendFile` for iOS / Android consistency - `downloadFile` takes `options` object rather than parameters - `stopDownload` will cause the rejection of promise returned by `downloadFile` - `uploadFiles` promise result `response` property is now `body` - A boolean is no longer returned from any method except `exists` - `downloadFile` and `uploadFiles` return an object of the form `{ jobId: number, promise: Promise }` - `mkdir` takes optional 2nd parameter `options` for iOS users to set the `NSURLIsExcludedFromBackupKey` attribute ## Usage (iOS) First you need to install react-native-fs: ``` npm install react-native-fs --save ``` **Note:** If your react-native version is < 0.40 install with this tag instead: ``` npm install react-native-fs@2.0.1-rc.2 --save ``` As @a-koka pointed out, you should then update your package.json to `"react-native-fs": "2.0.1-rc.2"` (without the tilde) ### Adding automatically with react-native link At the command line, in your project folder, type: `react-native link react-native-fs` Done! No need to worry about manually adding the library to your project. ### Adding with CocoaPods Add the RNFS pod to your list of application pods in your Podfile, using the path from the Podfile to the installed module: ``` pod 'RNFS', :path => '../node_modules/react-native-fs' ``` Install pods as usual: ``` pod install ``` ### Adding Manually in XCode In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-fs and add the .xcodeproj file In XCode, in the project navigator, select your project. Add the `lib*.a` from the RNFS project to your project's Build Phases ➜ Link Binary With Libraries. Click the .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../React` - mark both as recursive. Run your project (Cmd+R) ## Usage (Android) Android support is currently limited to only the `DocumentDirectory`. This maps to the app's `files` directory. Make alterations to the following files: * `android/settings.gradle` ```gradle ... include ':react-native-fs' project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android') ``` * `android/app/build.gradle` ```gradle ... dependencies { ... compile project(':react-native-fs') } ``` * register module (in MainActivity.java) * For react-native below 0.19.0 (use `cat ./node_modules/react-native/package.json | grep version`) ```java import com.rnfs.RNFSPackage; // <--- import public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { ...... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new RNFSPackage()) // <------- add package .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); setContentView(mReactRootView); } ...... } ``` * For react-native 0.19.0 and higher ```java import com.rnfs.RNFSPackage; // <------- add package public class MainActivity extends ReactActivity { // ... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), // <---- add comma new RNFSPackage() // <---------- add package ); } ``` * For react-native 0.29.0 and higher ( in MainApplication.java ) ```java import com.rnfs.RNFSPackage; // <------- add package public class MainApplication extends Application implements ReactApplication { // ... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), // <---- add comma new RNFSPackage() // <---------- add package ); } ``` ## Examples ### Basic ```javascript // require the module var RNFS = require('react-native-fs'); // get a list of files and directories in the main bundle RNFS.readDir(RNFS.MainBundlePath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined) .then((result) => { console.log('GOT RESULT', result); // stat the first file return Promise.all([RNFS.stat(result[0].path), result[0].path]); }) .then((statResult) => { if (statResult[0].isFile()) { // if we have a file, read it return RNFS.readFile(statResult[1], 'utf8'); } return 'no file'; }) .then((contents) => { // log the file contents console.log(contents); }) .catch((err) => { console.log(err.message, err.code); }); ``` ### File creation ```javascript // require the module var RNFS = require('react-native-fs'); // create a path you want to write to var path = RNFS.DocumentDirectoryPath + '/test.txt'; // write the file RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8') .then((success) => { console.log('FILE WRITTEN!'); }) .catch((err) => { console.log(err.message); }); ``` ### File deletion ```javascript // create a path you want to delete var path = RNFS.DocumentDirectoryPath + '/test.txt'; return RNFS.unlink(path) .then(() => { console.log('FILE DELETED'); }) // `unlink` will throw an error, if the item to unlink does not exist .catch((err) => { console.log(err.message); }); ``` ### File upload (iOS only) ```javascript // require the module var RNFS = require('react-native-fs'); var uploadUrl = 'http://requestb.in/XXXXXXX'; // For testing purposes, go to http://requestb.in/ and create your own link // create an array of objects of the files you want to upload var files = [ { name: 'test1', filename: 'test1.w4a', filepath: RNFS.DocumentDirectoryPath + '/test1.w4a', filetype: 'audio/x-m4a' }, { name: 'test2', filename: 'test2.w4a', filepath: RNFS.DocumentDirectoryPath + '/test2.w4a', filetype: 'audio/x-m4a' } ]; var uploadBegin = (response) => { var jobId = response.jobId; console.log('UPLOAD HAS BEGUN! JobId: ' + jobId); }; var uploadProgress = (response) => { var percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100); console.log('UPLOAD IS ' + percentage + '% DONE!'); }; // upload files RNFS.uploadFiles({ toUrl: uploadUrl, files: files, method: 'POST', headers: { 'Accept': 'application/json', }, fields: { 'hello': 'world', }, begin: uploadBegin, progress: uploadProgress }).promise.then((response) => { if (response.statusCode == 200) { console.log('FILES UPLOADED!'); // response.statusCode, response.headers, response.body } else { console.log('SERVER ERROR'); } }) .catch((err) => { if(err.description === "cancelled") { // cancelled by user } console.log(err); }); ``` ## API ### Constants The following constants are available on the `RNFS` export: - `MainBundlePath` (`String`) The absolute path to the main bundle directory - `CachesDirectoryPath` (`String`) The absolute path to the caches directory - `DocumentDirectoryPath` (`String`) The absolute path to the document directory - `TemporaryDirectoryPath` (`String`) The absolute path to the temporary directory (iOS only) - `LibraryDirectoryPath` (`String`) The absolute path to the NSLibraryDirectory (iOS only) - `ExternalDirectoryPath` (`String`) The absolute path to the external files, shared directory (android only) - `ExternalStorageDirectoryPath` (`String`) The absolute path to the external storage, shared directory (android only) ### `readDir(dirpath: string): Promise` Reads the contents of `path`. This must be an absolute path. Use the above path constants to form a usable file path. The returned promise resolves with an array of objects with the following properties: ``` type ReadDirItem = { ctime: date; // The creation date of the file (iOS only) mtime: date; // The last modified date of the file name: string; // The name of the item path: string; // The absolute path to the item size: string; // Size in bytes isFile: () => boolean; // Is the file just a file? isDirectory: () => boolean; // Is the file a directory? }; ``` ### `readDirAssets(dirpath: string): Promise` Reads the contents of `dirpath ` in the Android app's assets folder. `dirpath ` is the relative path to the file from the root of the `assets` folder. The returned promise resolves with an array of objects with the following properties: ``` type ReadDirItem = { name: string; // The name of the item path: string; // The absolute path to the item size: string; // Size in bytes. // Note that the size of files compressed during the creation of the APK (such as JSON files) cannot be determined. // `size` will be set to -1 in this case. isFile: () => boolean; // Is the file just a file? isDirectory: () => boolean; // Is the file a directory? }; ``` Note: Android only. ### `readdir(dirpath: string): Promise` Node.js style version of `readDir` that returns only the names. Note the lowercase `d`. ### `stat(filepath: string): Promise` Stats an item at `path`. The promise resolves with an object with the following properties: ``` type StatResult = { ctime: date; // The creation date of the file mtime: date; // The last modified date of the file size: string; // Size in bytes mode: number; // UNIX file mode isFile: () => boolean; // Is the file just a file? isDirectory: () => boolean; // Is the file a directory? }; ``` ### `readFile(filepath: string, encoding?: string): Promise` Reads the file at `path` and return contents. `encoding` can be one of `utf8` (default), `ascii`, `base64`. Use `base64` for reading binary files. Note: you will take quite a performance hit if you are reading big files ### `read(filepath: string, length = 0, position = 0, encodingOrOptions?: any): Promise` Reads `length` bytes from the given `position` of the file at `path` and returns contents. `encoding` can be one of `utf8` (default), `ascii`, `base64`. Use `base64` for reading binary files. Note: reading big files piece by piece using this method may be useful in terms of performance. ### `readFileAssets(filepath:string, encoding?: string): Promise` Reads the file at `path` in the Android app's assets folder and return contents. `encoding` can be one of `utf8` (default), `ascii`, `base64`. Use `base64` for reading binary files. `filepath` is the relative path to the file from the root of the `assets` folder. Note: Android only. ### `writeFile(filepath: string, contents: string, encoding?: string): Promise` Write the `contents` to `filepath`. `encoding` can be one of `utf8` (default), `ascii`, `base64`. `options` optionally takes an object specifying the file's properties, like mode etc. ### `appendFile(filepath: string, contents: string, encoding?: string): Promise` Append the `contents` to `filepath`. `encoding` can be one of `utf8` (default), `ascii`, `base64`. ### `write(filepath: string, contents: string, position?: number, encoding?: string): Promise` Write the `contents` to `filepath` at the given random access position. When `position` is `undefined` or `-1` the contents is appended to the end of the file. `encoding` can be one of `utf8` (default), `ascii`, `base64`. ### `moveFile(filepath: string, destPath: string): Promise` Moves the file located at `filepath` to `destPath`. This is more performant than reading and then re-writing the file data because the move is done natively and the data doesn't have to be copied or cross the bridge. ### `copyFile(filepath: string, destPath: string): Promise` Copies the file located at `filepath` to `destPath`. Note: On Android copyFile will overwrite `destPath` if it already exists. On iOS an error will be thrown if the file already exists. ### `copyFileAssets(filepath: string, destPath: string): Promise` Copies the file at `filepath` in the Android app's assets folder and copies it to the given `destPath ` path. Note: Android only. Will overwrite destPath if it already exists ### `copyAssetsFileIOS(imageUri: string, destPath: string, width: number, height: number, scale : number = 1.0, compression : number = 1.0, resizeMode : string = 'contain' ): Promise` iOS-ony: copies a file from camera-roll, that is prefixed with "assets-library://asset/asset.JPG?..." to a specific destination. It will download the original from iCloud if necessary. If width and height is > 0, the image will be resized to a specific size and a specific compression rate. If scale is below 1, the image will be scaled according to the scale-factor (between 0.0 and 1.0) The resizeMode is also considered. Further information: https://developer.apple.com/reference/photos/phimagemanager/1616964-requestimageforasset The promise will on success return the final destination of the file, as it was defined in the destPath-parameter. ### `unlink(filepath: string): Promise` Unlinks the item at `filepath`. If the item does not exist, an error will be thrown. Also recursively deletes directories (works like Linux `rm -rf`). ### `exists(filepath: string): Promise` Check if the item exists at `filepath`. If the item does not exist, return false. ### `existsAssets(filepath: string): Promise` Check in the Android assets folder if the item exists. `filepath` is the relative path from the root of the assets folder. If the item does not exist, return false. ### `hash(filepath: string, algorithm: string): Promise` Reads the file at `path` and returns its checksum as determined by `algorithm`, which can be one of `md5`, `sha1`, `sha224`, `sha256`, `sha384`, `sha512`. ### `touch(filepath: string, mtime?: Date, ctime?: Date): Promise` Sets the modification timestamp `mtime` and creation timestamp `ctime` of the file at `filepath`. Setting `ctime` is only supported on iOS, android always sets both timestamps to `mtime`. ### `mkdir(filepath: string, options?: MkdirOptions): Promise` ``` type MkdirOptions = { NSURLIsExcludedFromBackupKey?: boolean; // iOS only }; ``` Create a directory at `filepath`. Automatically creates parents and does not throw if already exists (works like Linux `mkdir -p`). (IOS only): The `NSURLIsExcludedFromBackupKey` property can be provided to set this attribute on iOS platforms. Apple will *reject* apps for storing offline cache data that does not have this attribute. ### `downloadFile(options: DownloadFileOptions): { jobId: number, promise: Promise }` ``` type DownloadFileOptions = { fromUrl: string; // URL to download file from toFile: string; // Local filesystem path to save the file to headers?: Headers; // An object of headers to be passed to the server background?: boolean; progressDivider?: number; begin?: (res: DownloadBeginCallbackResult) => void; progress?: (res: DownloadProgressCallbackResult) => void; connectionTimeout?: number // only supported on Android yet readTimeout?: number // only supported on Android yet }; ``` ``` type DownloadResult = { jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`. statusCode: number; // The HTTP status code bytesWritten: number; // The number of bytes written to the file }; ``` Download file from `options.fromUrl` to `options.toFile`. Will overwrite any previously existing file. If `options.begin` is provided, it will be invoked once upon download starting when headers have been received and passed a single argument with the following properties: ``` type DownloadBeginCallbackResult = { jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`. statusCode: number; // The HTTP status code contentLength: number; // The total size in bytes of the download resource headers: Headers; // The HTTP response headers from the server }; ``` If `options.progress` is provided, it will be invoked continuously and passed a single argument with the following properties: ``` type DownloadProgressCallbackResult = { jobId: number; // The download job ID, required if one wishes to cancel the download. See `stopDownload`. contentLength: number; // The total size in bytes of the download resource bytesWritten: number; // The number of bytes written to the file so far }; ``` If `options.progressDivider` is provided, it will return progress events that divided by `progressDivider`. For example, if `progressDivider` = 10, you will receive only ten callbacks for this values of progress: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 Use it for performance issues. If `progressDivider` = 0, you will receive all `progressCallback` calls, default value is 0. (IOS only): `options.background` (`Boolean`) - Whether to continue downloads when the app is not focused (default: `false`) This option is currently only available for iOS, and you must [enable background fetch](https://www.objc.io/issues/5-ios7/multitasking/#background-fetch) for your project in XCode. You only need to enable background fetch in `Info.plist` and set the fetch interval in `didFinishLaunchingWithOptions`. The `performFetchWithCompletionHandler` callback is handled by RNFS. ### `stopDownload(jobId: number): void` Abort the current download job with this ID. The partial file will remain on the filesystem. ### (iOS only) `uploadFiles(options: UploadFileOptions): { jobId: number, promise: Promise }` `options` (`Object`) - An object containing named parameters ``` type UploadFileOptions = { toUrl: string; // URL to upload file to files: UploadFileItem[]; // An array of objects with the file information to be uploaded. headers?: Headers; // An object of headers to be passed to the server fields?: Fields; // An object of fields to be passed to the server method?: string; // Default is 'POST', supports 'POST' and 'PUT' begin?: (res: UploadBeginCallbackResult) => void; progress?: (res: UploadProgressCallbackResult) => void; }; ``` ``` type UploadResult = { jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`. statusCode: number; // The HTTP status code headers: Headers; // The HTTP response headers from the server body: string; // The HTTP response body }; ``` Each file should have the following structure: ``` type UploadFileItem = { name: string; // Name of the file, if not defined then filename is used filename: string; // Name of file filepath: string; // Path to file filetype: string; // The mimetype of the file to be uploaded, if not defined it will get mimetype from `filepath` extension }; ``` If `options.begin` is provided, it will be invoked once upon upload has begun: ``` type UploadBeginCallbackResult = { jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`. }; ``` If `options.progress` is provided, it will be invoked continuously and passed a single object with the following properties: ``` type UploadProgressCallbackResult = { jobId: number; // The upload job ID, required if one wishes to cancel the upload. See `stopUpload`. totalBytesExpectedToSend: number; // The total number of bytes that will be sent to the server totalBytesSent: number; // The number of bytes sent to the server }; ``` Percentage can be computed easily by dividing `totalBytesSent` by `totalBytesExpectedToSend`. ### (iOS only) `stopUpload(jobId: number): Promise` Abort the current upload job with this ID. ### `getFSInfo(): Promise` Returns an object with the following properties: ``` type FSInfoResult = { totalSpace: number; // The total amount of storage space on the device (in bytes). freeSpace: number; // The amount of available storage space on the device (in bytes). }; ``` ### (iOS only) `pathForGroup(groupIdentifier: string): Promise` `groupIdentifier` (`string`) Any value from the *com.apple.security.application-groups* entitlements list. Returns the absolute path to the directory shared for all applications with the same security group identifier. This directory can be used to to share files between application of the same developer. Invalid group identifier will cause a rejection. For more information read the [Adding an App to an App Group](https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html#//apple_ref/doc/uid/TP40011195-CH4-SW19) section. ## Test / Demo app Test app to demostrate the use of the module. Useful for testing and developing the module: https://github.com/cjdell/react-native-fs-test