react-native-blob-util

A project committed to making file access and data transfer easier and more efficient for React Native developers.

I forked this project to continue working on it.

This project is a fork of https://www.npmjs.com/package/rn-fetch-blob which on the other hand is a fork of https://github.com/wkh237/react-native-fetch-blob. Both the original repository and its first fork are not maintained anymore.

The project will be continued in this repository. React-Native-Blob-Util is fully compatible with RN-Fetch-Blob and React-Native-Fetch-Blob. If you want to support the project feel free to contact me or create a pull request with your feature.

Version Compatibility Warning

react-native-blob-util version 0.22.0 and up is only compatible with react native 0.76 and up. "0.22.0" -> 0.76 RN "0.22.1" -> 0.77 RN "0.22.2" -> 0.78 RN

react-native-blob-util version 0.17.0 and up is only compatible with react native 0.65 and up.

react-native-blob-util version 0.10.16 and up is only compatible with react native 0.60 and up.

Features

• Access and write data to Android Media Store (e.g. Downloads folder on devices > Android 9)
• Transfer data directly from/to storage without BASE64 bridging
• File API supports regular files, Asset files, and CameraRoll files
• Native-to-native file manipulation API, reduce JS bridging performance loss
• File stream support for dealing with large file
• Blob, File, XMLHttpRequest polyfills that make browser-based library available in RN (experimental)
• JSON stream supported base on Oboe.js @jimhigson

React Native New Architecture

With React Native 0.68.0 the switch to enable the new aritechture was introduced. Starting with version 0.17.0 this library introduces support for the new architecture as well. Of course the old architecture will still be supported. Further information about it and how to use it you can find here: https://reactnative.dev/docs/next/the-new-architecture/landing-page

Android 10 & 11

Android 10 introduced scoped storage for apps. Apps no longer can create own directories directly on the external storage or access files outside the apps own directories. With version 0.14.0 support for the media storage is implemented. For more information please see the chapter about the mediastore API. test For more information see: https://developer.android.com/training/data-storage

TOC (visit Wiki to get the complete documentation)

• About
• Installation
• HTTP Data Transfer
• Regular Request
• Download file
• Upload file
• Multipart/form upload
• Upload/Download progress
• Cancel HTTP request
• Android Media Scanner, and Download Manager Support
• Self-Signed SSL Server
• Transfer Encoding
• Drop-in Fetch Replacement
• File System
• File access
• File stream
• Manage cached files
• Web API Polyfills
• Performance Tips
• API References
• Caveats
• Development

About

This project was started in the cause of solving issue facebook/react-native#854, React Native's lacks of Blob implementation which results into problems when transferring binary data.

It is committed to making file access and transfer easier and more efficient for React Native developers. We've implemented highly customizable filesystem and network module which plays well together. For example, developers can upload and download data directly from/to storage, which is more efficient, especially for large files. The file system supports file stream, so you don't have to worry about OOM problem when accessing large files.

In 0.8.0 we introduced experimental Web API polyfills that make it possible to use browser-based libraries in React Native, such as, FireBase JS SDK

Installation

Install package from npm

1npm install --save react-native-blob-util

Or if using CocoaPods, add the pod to your Podfile

pod 'react-native-blob-util',
    :path => '../node_modules/react-native-blob-util'

After 0.10.3 you can install this package directly from Github

1# replace <branch_name> with any one of the branches
2npm install --save github:RonRadtke/react-native-blob-util#<branch_name>

iOS

When using the package from npm, run pod install from the ios directory:

1cd ios; pod install; cd ..

Okhttp

For using the library okhttp3 is required. It's in general included in react-native. The library uses the okhttp version shipped with react-native or used by your app. For very old devices android devices okhttp 3.12 can be used.

Manually Link Native Modules

If you're using RN 0.60 or higher, manual linking should not be required anymore.

If automatically linking doesn't work for you, see instructions on manually linking.

Automatically Link Native Modules

For 0.29.2+ projects, simply link native packages via the following command (note: rnpm has been merged into react-native)

react-native link react-native-blob-util

As for projects < 0.29 you need rnpm to link native packages

1rnpm link

Optionally, use the following command to add Android permissions to AndroidManifest.xml automatically

1RNFB_ANDROID_PERMISSIONS=true react-native react-native-blob-util

pre 0.29 projects

1RNFB_ANDROID_PERMISSIONS=true rnpm link

The link script might not take effect if you have non-default project structure, please visit the wiki to link the package manually.

Grant Permission to External storage for Android 5.0 or lower

The mechanism for granting Android permissions has slightly different since Android 6.0 released, please refer to Official Document.

If you're going to access external storage (say, SD card storage) for Android 5.0 (or lower) devices, you might have to add the following line to AndroidManifest.xml.

1<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2    package="com.ReactNativeBlobUtiltest"
3    android:versionCode="1"
4    android:versionName="1.0">
5
6    <uses-permission android:name="android.permission.INTERNET" />
7    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
8+   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
9+   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
10+   <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
11    ...
12

Also, if you're going to use Android Download Manager you have to add this to AndroidManifest.xml

1    <intent-filter>
2            <action android:name="android.intent.action.MAIN" />
3            <category android:name="android.intent.category.LAUNCHER" />
4+           <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
5    </intent-filter>

If you are going to use the wifiOnly flag, you need to add this to AndroidManifest.xml

1+   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
2    ...
3

Grant Access Permission for Android 6.0

Beginning in Android 6.0 (API level 23), users grant permissions to apps while the app is running, not when they install the app. So adding permissions in AndroidManifest.xml won't work for Android 6.0+ devices. To grant permissions in runtime, you might use PermissionAndroid API.

Usage

ES6

The module uses ES6 style export statement, simply use import to load the module.

1import ReactNativeBlobUtil from 'react-native-blob-util'

ES5

If you're using ES5 require statement to load the module, please add default. See here for more detail.

var ReactNativeBlobUtil = require('react-native-blob-util').default

HTTP Data Transfer

Regular Request

After 0.8.0 react-native-blob-util automatically decides how to send the body by checking its type and Content-Type in the header. The rule is described in the following diagram

To sum up:

• To send a form data, the Content-Type header does not matter. When the body is an Array we will set proper content type for you.
• To send binary data, you have two choices, use BASE64 encoded string or path points to a file contains the body.
• If the Content-Type containing substring;BASE64 or application/octet the given body will be considered as a BASE64 encoded data which will be decoded to binary data as the request body.
• Otherwise, if a string starts with ReactNativeBlobUtil-file:// (which can simply be done by ReactNativeBlobUtil.wrap(PATH_TO_THE_FILE)), it will try to find the data from the URI string after ReactNativeBlobUtil-file:// and use it as the request body.
• To send the body as-is, simply use a Content-Type header not containing ;BASE64 or application/octet.

It is Worth to mentioning that the HTTP request uses cache by default, if you're going to disable it simply add a Cache-Control header 'Cache-Control' : 'no-store'

After 0.9.4, we disabled Chunked transfer encoding by default, if you're going to use it, you should explicitly set header Transfer-Encoding to Chunked.

Download example: Fetch files that need authorization token

Most simple way is download to memory and stored as BASE64 encoded string, this is handy when the response data is small. Note that when it comes to authorization, not only can you use an authorization token, but this package will automatically pass the cookies created by normal js requests such as axios and fetch. Therefore, if you are using traditional cookie-based ways to authorize your user, you don't need to do anything before this package works.

1
2// send http request in a new thread (using native code)
3ReactNativeBlobUtil.fetch('GET', 'http://www.example.com/images/img1.png', {
4    Authorization: 'Bearer access-token...',
5    // more headers  ..
6})
7        .then((res) => {
8            let status = res.info().status;
9
10            if (status == 200) {
11                // the conversion is done in native code
12                let base64Str = res.base64()
13                // the following conversions are done in js, it's SYNC
14                let text = res.text()
15                let json = res.json()
16            }
17            else {
18                // handle other status codes
19            }
20        })
21        // Something went wrong:
22        .catch((errorMessage, statusCode) => {
23            // error handling
24        })

Download to storage directly

If the response data is large, that would be a bad idea to convert it into BASE64 string. A better solution is streaming the response directly into a file, simply add a fileCache option to config, and set it to true. This will make incoming response data stored in a temporary path without any file extension.

These files won't be removed automatically, please refer to Cache File Management

1ReactNativeBlobUtil
2        .config({
3            // add this option that makes response data to be stored as a file,
4            // this is much more performant.
5            fileCache: true,
6        })
7        .fetch('GET', 'http://www.example.com/file/example.zip', {
8            //some headers ..
9        })
10        .then((res) => {
11            // the temp file path
12            console.log('The file saved to ', res.path())
13        })

Set Temp File Extension

Sometimes you might need a file extension for some reason. For example, when using file path as the source of Image component, the path should end with something like .png or .jpg, you can do this by add appendExt option to config.

1ReactNativeBlobUtil
2        .config({
3            fileCache: true,
4            // by adding this option, the temp files will have a file extension
5            appendExt: 'png'
6        })
7        .fetch('GET', 'http://www.example.com/file/example.zip', {
8            //some headers ..
9        })
10        .then((res) => {
11            // the temp file path with file extension `png`
12            console.log('The file saved to ', res.path())
13            // Beware that when using a file path as Image source on Android,
14            // you must prepend "file://"" before the file path
15            imageView = <Image source={{uri: Platform.OS === 'android' ? 'file://' + res.path() : '' + res.path()}}/>
16        })

Use Specific File Path

If you prefer a particular file path rather than randomly generated one, you can use path option. We've added several constants in v0.5.0 which represents commonly used directories.

1let dirs = ReactNativeBlobUtil.fs.dirs
2ReactNativeBlobUtil
3        .config({
4            // response data will be saved to this path if it has access right.
5            path: dirs.DocumentDir + '/path-to-file.anything'
6        })
7        .fetch('GET', 'http://www.example.com/file/example.zip', {
8            //some headers ..
9        })
10        .then((res) => {
11            // the path should be dirs.DocumentDir + 'path-to-file.anything'
12            console.log('The file saved to ', res.path())
13        })

These files won't be removed automatically, please refer to Cache File Management

Use File Transformer

If you need to perform any processing on the bytes prior to it being written into storage (e.g. if you want it to be encrypted) then you can use transform option. NOTE: you will need to set a transformer on the libray (see Setting a File Transformer)

1ReactNativeBlobUtil
2        .config({
3            // response data will be saved to this path if it has access right.
4            path: dirs.DocumentDir + '/path-to-file.anything',
5            transform: true
6        })
7        .fetch('GET', 'http://www.example.com/file/example.zip', {
8            //some headers ..
9        })
10        .then((res) => {
11            // the path should be dirs.DocumentDir + 'path-to-file.anything'
12            console.log('The file saved to ', res.path())
13        })

Upload example : Dropbox files-upload API

react-native-blob-util will convert the base64 string in body to binary format using native API, this process is done in a separated thread so that it won't block your GUI.

1
2ReactNativeBlobUtil.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
3    Authorization: "Bearer access-token...",
4    'Dropbox-API-Arg': JSON.stringify({
5        path: '/img-from-react-native.png',
6        mode: 'add',
7        autorename: true,
8        mute: false
9    }),
10    'Content-Type': 'application/octet-stream',
11    // here's the body you're going to send, should be a BASE64 encoded string
12    // (you can use "base64"(refer to the library 'mathiasbynens/base64') APIs to make one).
13    // The data will be converted to "byte array"(say, blob) before request sent.
14}, base64ImageString)
15        .then((res) => {
16            console.log(res.text())
17        })
18        .catch((err) => {
19            // error handling ..
20        })

Upload a file from storage

If you're going to use a file as request body, just wrap the path with wrap API.

1ReactNativeBlobUtil.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
2    // dropbox upload headers
3    Authorization: "Bearer access-token...",
4    'Dropbox-API-Arg': JSON.stringify({
5        path: '/img-from-react-native.png',
6        mode: 'add',
7        autorename: true,
8        mute: false
9    }),
10    'Content-Type': 'application/octet-stream',
11    // Change BASE64 encoded data to a file path with prefix `ReactNativeBlobUtil-file://`.
12    // Or simply wrap the file path with ReactNativeBlobUtil.wrap().
13}, ReactNativeBlobUtil.wrap(PATH_TO_THE_FILE))
14        .then((res) => {
15            console.log(res.text())
16        })
17        .catch((err) => {
18            // error handling ..
19        })

Multipart/form-data example: Post form data with file and data

In version >= 0.3.0 you can also post files with form data, just put an array in body, with elements have property name, data, and filename(optional).

Elements have property filename will be transformed into binary format, otherwise, it turns into utf8 string.

1
2ReactNativeBlobUtil.fetch('POST', 'http://www.example.com/upload-form', {
3    Authorization: "Bearer access-token",
4    otherHeader: "foo",
5    'Content-Type': 'multipart/form-data',
6}, [
7    // element with property `filename` will be transformed into `file` in form data
8    {name: 'avatar', filename: 'avatar.png', data: binaryDataInBase64},
9    // custom content type
10    {name: 'avatar-png', filename: 'avatar-png.png', type: 'image/png', data: binaryDataInBase64},
11    // part file from storage
12    {name: 'avatar-foo', filename: 'avatar-foo.png', type: 'image/foo', data: ReactNativeBlobUtil.wrap(path_to_a_file)},
13    // elements without property `filename` will be sent as plain text
14    {name: 'name', data: 'user'},
15    {
16        name: 'info', data: JSON.stringify({
17            mail: 'example@example.com',
18            tel: '12345678'
19        })
20    },
21]).then((resp) => {
22    // ...
23}).catch((err) => {
24    // ...
25})

What if you want to append a file to form data? Just like upload a file from storage example, wrap data by wrap API (this feature is only available for version >= v0.5.0). On version >= 0.6.2, it is possible to set custom MIME type when appending a file to form data. But keep in mind when the file is large it's likely to crash your app. Please consider use other strategy (see #94).

1
2ReactNativeBlobUtil.fetch('POST', 'http://www.example.com/upload-form', {
3    Authorization: "Bearer access-token",
4    otherHeader: "foo",
5    // this is required, otherwise it won't be process as a multipart/form-data request
6    'Content-Type': 'multipart/form-data',
7}, [
8    // append field data from file path
9    {
10        name: 'avatar',
11        filename: 'avatar.png',
12        // Change BASE64 encoded data to a file path with prefix `ReactNativeBlobUtil-file://`.
13        // Or simply wrap the file path with ReactNativeBlobUtil.wrap().
14        data: ReactNativeBlobUtil.wrap(PATH_TO_THE_FILE)
15    },
16    {
17        name: 'ringtone',
18        filename: 'ring.mp3',
19        // use custom MIME type
20        type: 'application/mp3',
21        // upload a file from asset is also possible in version >= 0.6.2
22        data: ReactNativeBlobUtil.wrap(ReactNativeBlobUtil.fs.asset('default-ringtone.mp3'))
23    },
24    // elements without property `filename` will be sent as plain text
25    {name: 'name', data: 'user'},
26    {
27        name: 'info', data: JSON.stringify({
28            mail: 'example@example.com',
29            tel: '12345678'
30        })
31    },
32]).then((resp) => {
33    // ...
34}).catch((err) => {
35    // ...
36})

Upload/Download progress

In version >= 0.4.2 it is possible to know the upload/download progress. After 0.7.0 IOS and Android upload progress are also supported.

1  ReactNativeBlobUtil.fetch('POST', 'http://www.example.com/upload', {
2    //... some headers,
3    'Content-Type': 'octet-stream'
4}, base64DataString)
5        // listen to upload progress event
6        .uploadProgress((written, total) => {
7            console.log('uploaded', written / total)
8        })
9        // listen to download progress event
10        .progress((received, total) => {
11            console.log('progress', received / total)
12        })
13        .then((resp) => {
14            // ...
15        })
16        .catch((err) => {
17            // ...
18        })

In 0.9.6, you can specify an object as the first argument which contains count and interval, to the frequency of progress event (this will be done in the native context a reduce RCT bridge overhead). Notice that count argument will not work if the server does not provide response content length.

1  ReactNativeBlobUtil.fetch('POST', 'http://www.example.com/upload', {
2    //... some headers,
3    'Content-Type': 'octet-stream'
4}, base64DataString)
5        // listen to upload progress event, emit every 250ms
6        .uploadProgress({interval: 250}, (written, total) => {
7            console.log('uploaded', written / total)
8        })
9        // listen to download progress event, every 10%
10        .progress({count: 10}, (received, total) => {
11            console.log('progress', received / total)
12        })
13        .then((resp) => {
14            // ...
15        })
16        .catch((err) => {
17            // ...
18        })

Cancel Request

After 0.7.0 it is possible to cancel an HTTP request. Upon cancellation, it throws a promise rejection, be sure to catch it.

1let task = ReactNativeBlobUtil.fetch('GET', 'http://example.com/file/1')
2
3task.then(() => { ...
4})
5        // handle request cancelled rejection
6        .catch((err) => {
7            console.log(err)
8        })
9// cancel the request, the callback function is optional
10task.cancel((err) => { ...
11})
12

Drop-in Fetch Replacement

0.9.0

If you have existing code that uses whatwg-fetch(the official fetch), it's not necessary to replace them with ReactNativeBlobUtil.fetch, you can simply use our Fetch Replacement. The difference between Official them is official fetch uses whatwg-fetch which wraps XMLHttpRequest polyfill under the hood. It's a great library for web developers, but does not play very well with RN. Our implementation is simply a wrapper of our fetch and fs APIs, so you can access all the features we provided.

See document and examples

Android Media Scanner, and Download Manager Support

If you want to make a file in External Storage becomes visible in Picture, Downloads, or other built-in apps, you will have to use Media Scanner or Download Manager or the Media Storage.

Media Scanner

Media scanner scans the file and categorizes by given MIME type, if MIME type not specified, it will try to resolve the file using its file extension.

1
2ReactNativeBlobUtil
3        .config({
4            // DCIMDir is in external storage
5            path: dirs.DCIMDir + '/music.mp3'
6        })
7        .fetch('GET', 'http://example.com/music.mp3')
8        .then((res) => ReactNativeBlobUtil.fs.scanFile([{path: res.path(), mime: 'audio/mpeg'}]))
9        .then(() => {
10            // scan file success
11        })
12        .catch((err) => {
13            // scan file error
14        })

Download Manager

When downloading large files on Android it is recommended to use Download Manager, it supports a lot of native features like the progress bar, and notification, also the download task will be handled by OS, and more efficient.

When using DownloadManager, fileCache and path properties in config will not take effect, because Android DownloadManager can only store files to external storage, also notice that Download Manager can only support GET method, which means the request body will be ignored.

When download complete, DownloadManager will generate a file path so that you can deal with it.

1ReactNativeBlobUtil
2        .config({
3            addAndroidDownloads: {
4                useDownloadManager: true, // <-- this is the only thing required
5                // Optional, override notification setting (default to true)
6                notification: false,
7                // Optional, but recommended since android DownloadManager will fail when
8                // the url does not contains a file extension, by default the mime type will be text/plain
9                mime: 'text/plain',
10                description: 'File downloaded by download manager.'
11            }
12        })
13        .fetch('GET', 'http://example.com/file/somefile')
14        .then((resp) => {
15            // the path of downloaded file
16            resp.path()
17        })

Your app might not have right to remove/change the file created by Download Manager, therefore you might need to set custom location to the download task.

Download Notification and Visibility in Download App (Android Only)

If you need to display a notification upon the file is downloaded to storage (as the above) or make the downloaded file visible in "Downloads" app. You have to add some options to config.

1ReactNativeBlobUtil.config({
2    fileCache: true,
3    // android only options, these options be a no-op on IOS
4    addAndroidDownloads: {
5        // Show notification when response data transmitted
6        notification: true,
7        // Title of download notification
8        title: 'Great ! Download Success ! :O ',
9        // File description (not notification description)
10        description: 'An image file.',
11        mime: 'image/png',
12        // Make the file scannable  by media scanner
13        mediaScannable: true,
14    }
15})
16        .fetch('GET', 'http://example.com/image1.png')
17        .then(...)

Open Downloaded File with Intent

This is a new feature added in 0.9.0 if you're going to open a file path using official Linking API that might not work as expected, also, if you're going to install an APK in Downloads app, that will not function too. As an alternative, you can try actionViewIntent API, which will send an ACTION_VIEW intent for you which uses the given MIME type.

Download and install an APK programmatically

Note: be sure to specify the path, do not use the default path, because the permission problem causes the installation to fail, parsing the package fails

default path: /data/data/com.android.providers.downloads/cache/xxx.apk // Will cause parsing of the package to fail，Unable to install APK

1
2const android = ReactNativeBlobUtil.android
3const dirs = ReactNativeBlobUtil.fs.dirs;
4const apkUrl = "http://www.example.com/awesome.apk";    
5const fileName = url.substring(url.lastIndexOf('/') + 1);
6
7ReactNativeBlobUtil.config({
8    addAndroidDownloads: {
9        useDownloadManager: true,
10        path: `${dirs.DownloadDir}/${fileName}`,    // <-- Must specify
11        title: 'awesome.apk',
12        description: 'An APK that will be installed',
13        mime: 'application/vnd.android.package-archive',
14        mediaScannable: true,
15        notification: true,
16    }
17})
18        .fetch('GET', `http://www.example.com/awesome.apk`)
19        .then((res) => {
20            android.actionViewIntent(res.path(), 'application/vnd.android.package-archive')
21        })

Or show an image in image viewer

1      android.actionViewIntent(PATH_OF_IMG, 'image/png')

File System

Android Media Storage

Android 10 introduced scoped storage and thus new APIs to store files to Documents, Downloads, Music and other collections. Version 0.14.0 introduced an API to access files in the Media Store but also to create and write to new files in the Media Store. In general you only can access files in the Media Store created by your app, or selected by a picker.

CopyToMediaStore

Copies an existing file from the internal Storage to the Media Store.
An example for downloading a file and storing it to the downloads collection

1ReactNativeBlobUtil
2        .config({
3            fileCache: true
4        })
5        .fetch('GET', 'https://example.de/image.png')
6        .then(async (res) => {
7            let result = await ReactNativeBlobUtil.MediaCollection.copyToMediaStore({
8                        name: filename, // name of the file
9                        parentFolder: '', // subdirectory in the Media Store, e.g. HawkIntech/Files to create a folder HawkIntech with a subfolder Files and save the image within this folder
10                        mimeType: 'image/png' // MIME type of the file
11                    },
12                    'Download', // Media Collection to store the file in ("Audio" | "Image" | "Video" | "Download")
13                    res.path() // Path to the file being copied in the apps own storage
14            );
15        });

This example is taking advantage of the fileCache option to directly store the downloaded file and get a path for.
Currently it's not possible to write data directly from a string recevied by fetch, but only to copy it from a file.

createMediaFile

Creates a new file in the specified collection without writing any data

1let path = await ReactNativeBlobUtil.MediaCollection.createMediafile({
2            name: filename, // name of the file
3            parentFolder: '', // subdirectory in the Media Store, e.g. HawkIntech/Files to create a folder HawkIntech with a subfolder Files and save the image within this folder
4            mimeType: 'image/png' // MIME type of the file
5        }, 'Download'// Media Collection to store the file in ("Audio" | "Image" | "Video" | "Download")
6);

writeMediaFile

Writes data from a file in the apps storage to an existing entry of the Media Store

1await ReactNativeBlobUtil.MediaCollection.writeToMediafile('content://....', // content uri of the entry in the media storage
2        localpath // path to the file that should be copied
3);

Copies and tranforms data from a file in the apps storage to an existing entry of the Media Store. NOTE: you must set a transformer on the file in order for the transformation to happen (see Setting a File Transformer).

1await ReactNativeBlobUtil.MediaCollection.writeToMediafileWithTransform('content://....', // content uri of the entry in the media storage
2        localpath // path to the file that should be copied
3);

copyToInternal

Copies an entry form the media storage to the apps internal storage.

1let destpath = ReactNativeBlobUtil.dirs.CacheDir + '/image.png';
2await ReactNativeBlobUtil.MediaCollection.copyToInternal('content://....', // content uri of the entry in the media storage
3        destpath // path to destination the entry should be copied to
4);

File Access

File access APIs were made when developing v0.5.0, which helping us write tests, and was not planned to be a part of this module. However, we realized that it's hard to find a great solution to manage cached files, everyone who uses this module may need these APIs for their cases.

Before start using file APIs, we recommend read Differences between File Source first.

File Access APIs

• asset (0.6.2)
• dirs
• createFile
• writeFile (0.6.0)
• writeFileWithTransform
• appendFile (0.6.0)
• readFile (0.6.0)
• readFileWithTransform
• readStream
• hash (0.10.9)
• writeStream
• hash
• unlink
• mkdir
• ls
• mv
• cp
• exists
• isDir
• stat
• lstat
• scanFile (Android only)

See File API for more information

File Stream

In v0.5.0 we've added writeStream and readStream, which allows your app read/write data from the file path. This API creates a file stream, rather than convert entire data into BASE64 encoded string. It's handy when processing large files.

When calling readStream method, you have to open the stream, and start to read data. When the file is large, consider using an appropriate bufferSize and interval to reduce the native event dispatching overhead (see Performance Tips)

The file stream event has a default throttle(10ms) and buffer size which preventing it cause too much overhead to main thread, you can also tweak these values.

1let data = ''
2ReactNativeBlobUtil.fs.readStream(
3        // file path
4        PATH_TO_THE_FILE,
5        // encoding, should be one of `base64`, `utf8`, `ascii`
6        'base64',
7        // (optional) buffer size, default to 4096 (4095 for BASE64 encoded data)
8        // when reading file in BASE64 encoding, buffer size must be multiples of 3.
9        4095)
10        .then((ifstream) => {
11            ifstream.open()
12            ifstream.onData((chunk) => {
13                // when encoding is `ascii`, chunk will be an array contains numbers
14                // otherwise it will be a string
15                data += chunk
16            })
17            ifstream.onError((err) => {
18                console.log('oops', err)
19            })
20            ifstream.onEnd(() => {
21                <Image source={{uri: 'data:image/png,base64' + data}}
22    })
23            })

When using writeStream, the stream object becomes writable, and you can then perform operations like write and close.

Since version 0.10.9 write() resolves with the ReactNativeBlobUtil instance so you can promise-chain write calls:

1ReactNativeBlobUtil.fs.writeStream(
2        PATH_TO_FILE,
3        // encoding, should be one of `base64`, `utf8`, `ascii`
4        'utf8',
5        // should data append to existing content ?
6        true
7)
8        .then(ofstream => ofstream.write('foo'))
9        .then(ofstream => ofstream.write('bar'))
10        .then(ofstream => ofstream.write('foobar'))
11        .then(ofstream => ofstream.close())
12        .catch(console.error)

or

1ReactNativeBlobUtil.fs.writeStream(
2        PATH_TO_FILE,
3        // encoding, should be one of `base64`, `utf8`, `ascii`
4        'utf8',
5        // should data append to existing content ?
6        true
7)
8        .then(stream => Promise.all([
9            stream.write('foo'),
10            stream.write('bar'),
11            stream.write('foobar')
12        ]))
13        // Use array destructuring to get the stream object from the first item of the array we get from Promise.all()
14        .then(([stream]) => stream.close())
15        .catch(console.error)

You should NOT do something like this:

1ReactNativeBlobUtil.fs.writeStream(
2        PATH_TO_FILE,
3        // encoding, should be one of `base64`, `utf8`, `ascii`
4        'utf8',
5        // should data append to existing content ?
6        true)
7        .then((ofstream) => {
8            // BAD IDEA - Don't do this, those writes are unchecked:
9            ofstream.write('foo')
10            ofstream.write('bar')
11            ofstream.close()
12        })
13        .catch(console.error)  // Cannot catch any write() errors!

The problem with the above code is that the promises from the ofstream.write() calls are detached and "Lost". That means the entire promise chain A) resolves without waiting for the writes to finish and B) any errors caused by them are lost. That code may seem to work if there are no errors, but those writes are of the type "fire and forget": You start them and then turn away and never know if they really succeeded.

Cache File Management

When using fileCache or path options along with fetch API, response data will automatically store into the file system. The files will NOT removed unless you unlink it. There're several ways to remove the files

1
2// remove file using ReactNativeBlobUtilResponse.flush() object method
3ReactNativeBlobUtil.config({
4    fileCache: true
5})
6        .fetch('GET', 'http://example.com/download/file')
7        .then((res) => {
8            // remove cached file from storage
9            res.flush()
10        })
11
12// remove file by specifying a path
13ReactNativeBlobUtil.fs.unlink('some-file-path').then(() => {
14    // ...
15})
16

You can also group requests by using session API and use dispose to remove them all when needed.

1
2ReactNativeBlobUtil.config({
3    fileCache: true
4})
5        .fetch('GET', 'http://example.com/download/file')
6        .then((res) => {
7            // set session of a response
8            res.session('foo')
9        })
10
11ReactNativeBlobUtil.config({
12    // you can also set session beforehand
13    session: 'foo'
14    fileCache: true
15})
16        .fetch('GET', 'http://example.com/download/file')
17        .then((res) => {
18            // ...
19        })
20
21// or put an existing file path to the session
22ReactNativeBlobUtil.session('foo').add('some-file-path')
23// remove a file path from the session
24ReactNativeBlobUtil.session('foo').remove('some-file-path')
25// list paths of a session
26ReactNativeBlobUtil.session('foo').list()
27// remove all files in a session
28ReactNativeBlobUtil.session('foo').dispose().then(() => { ...
29})
30

Transfer Encoding

After 0.9.4, the Chunked transfer encoding is disabled by default due to some service provider may not support chunked transfer. To enable it, set Transfer-Encoding header to Chunked.

1ReactNativeBlobUtil.fetch('POST', 'http://example.com/upload', {'Transfer-Encoding': 'Chunked'}, bodyData)

Self-Signed SSL Server

By default, react-native-blob-util does NOT allow connection to unknown certification provider since it's dangerous. To connect a server with self-signed certification, you need to add trusty to config explicitly. This function is available for version >= 0.5.3 In addition since 0.16.0 you'll have to define your own trust manager for android.

1....
2import com.ReactNativeBlobUtil.ReactNativeBlobUtilUtils;
3...
4
5public class MainApplication extends Application implements ReactApplication {
6    ...
7    @Override
8    public void onCreate() {
9       ...
10        ReactNativeBlobUtilUtils.sharedTrustManager = x509TrustManager = new X509TrustManager() {
11                @Override
12                public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
13                }
14
15                @Override
16                public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
17                }
18
19                @Override
20                public java.security.cert.X509Certificate[] getAcceptedIssuers() {
21                    return new java.security.cert.X509Certificate[]{};
22                }
23        };
24        ...
25    }

Kotlin

1....
2import com.ReactNativeBlobUtil.ReactNativeBlobUtilUtils;
3import javax.net.ssl.X509TrustManager
4...
5
6public class MainApplication extends Application implements ReactApplication {
7    ...
8    public void onCreate() {
9       ...
10        ReactNativeBlobUtilUtils.sharedTrustManager = object : X509TrustManager {
11          override fun checkClientTrusted(chain: Array<java.security.cert.X509Certificate>, authType: String) {}
12
13          override fun checkServerTrusted(chain: Array<java.security.cert.X509Certificate>, authType: String) {}
14
15          override fun getAcceptedIssuers(): Array<java.security.cert.X509Certificate> {
16            return arrayOf()
17          }
18        };
19        ...
20    }

1ReactNativeBlobUtil.config({
2    trusty: true
3})
4        .fetch('GET', 'https://mysite.com')
5        .then((resp) => {
6            // ...
7        })

WiFi only requests

If you wish to only route requests through the Wifi interface, set the below configuration. Note: On Android, the ACCESS_NETWORK_STATE permission must be set, and this flag will only work on API version 21 (Lollipop, Android 5.0) or above. APIs below 21 will ignore this flag.

1ReactNativeBlobUtil.config({
2    wifiOnly: true
3})
4        .fetch('GET', 'https://mysite.com')
5        .then((resp) => {
6            // ...
7        })

Transform Files

Sometimes you may need the files to be transformed after reading from storage or before writing into storage (eg encryption/decyrption). In order to perform the transformations, use readFileWithTransform and writeFileWithTransform. NOTE: you must set a transformer on the file in order for the transformation to happen (see Setting a File Transformer).

Web API Polyfills

After 0.8.0 we've made some Web API polyfills that makes some browser-based library available in RN.

• Blob
• XMLHttpRequest (Use our implementation if you're going to use it with Blob)

Setting A File Transformer

Setting a file transformer will allow you to specify how data should be transformed whenever the library is writing into storage or reading from storage. A use case for this is if you want the files handled by this library to be encrypted.

If you want to use a file transformer, you must implement an interface defined in:

ReactNativeBlobUtilFileTransformer.h (iOS)

ReactNativeBlobUtilFileTransformer.java (Android)

Then you set the File Transformer during app startup

Android:

1public class MainApplication extends Application implements ReactApplication {
2    ...
3    @Override
4    public void onCreate() {
5       ...
6       ReactNativeBlobUtilFileTransformer.sharedFileTransformer = new MyCustomEncryptor();
7       ...
8    }

iOS:

1@implementation AppDelegate
2...
3- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
4{
5    ...
6    [ReactNativeBlobUtilFileTransformer setFileTransformer: MyCustomEncryptor.new];
7    ...
8}

Here are the places where the transformer would apply

• Reading a file from the file system
• Writing a file into the file system
• Http response is downloaded to storage directly

Performance Tips

Read Stream and Progress Event Overhead

If the process seems to block JS thread when file is large when reading data via fs.readStream. It might because the default buffer size is quite small (4kb) which result in a lot of events triggered from JS thread. Try to increase the buffer size (for example 100kb = 102400) and set a larger interval (available for 0.9.4+, the default value is 10ms) to limit the frequency.

Reduce RCT Bridge and BASE64 Overhead

React Native connects JS and Native context by passing JSON around React Native bridge, and there will be an overhead to convert data before they sent to each side. When data is large, this will be quite a performance impact to your app. It's recommended to use file storage instead of BASE64 if possible.The following chart shows how much faster when loading data from storage than BASE64 encoded string on iPhone 6.

ASCII Encoding has /terrible Performance

Due to the lack of typed array implementation in JavascriptCore, and limitation of React Native structure, to convert data to JS byte array spends lot of time. Use it only when needed, the following chart shows how much time it takes when reading a file with different encoding.

Concat and Replacing Files

If you're going to concatenate files, you don't have to read the data to JS context anymore! In 0.8.0 we introduced new encoding uri for writeFile and appendFile API, which make it possible to handle the whole process in native.

Caveats

• This library does not urlencode unicode characters in URL automatically, see #146.
• When you create a Blob , from an existing file, the file WILL BE REMOVED if you close the blob.
• If you replaced window.XMLHttpRequest for some reason (e.g. make Firebase SDK work), it will also affect how official fetch works (basically it should work just fine).
• When file stream and upload/download progress event slow down your app, consider an upgrade to 0.9.6+, use additional arguments to limit its frequency.
• When passing a file path to the library, remove file:// prefix.

when you got a problem, have a look at Trouble Shooting.

Changes

See release notes

Development

If you're interested in hacking this module, check our development guide, there might be some helpful information. Please feel free to make a PR or file an issue.