Merge branch 'master' into 0.10.0

README.md

-# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/react-native-fetch-blob.svg?maxAge=2592000&style=flat-square)]()
+# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?style=flat-square)](https://github.com/wkh237/react-native-fetch-blob/releases) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/react-native-fetch-blob.svg?maxAge=2592000&style=flat-square)]()
+
 
 A project committed to make file acess and data transfer easier, effiecient for React Native developers.
 
 - File stream support for dealing with large file
 - Blob, File, XMLHttpRequest polyfills that make browser-based library available in RN (experimental)
 
+> The npm package is inside `src` folder, this is development folder
 
 ## TOC
 * [About](#user-content-about)
 * [Installation](#user-content-installation)
-* [Recipes](#user-content-recipes)
 * [HTTP Data Transfer](#user-content-http-data-transfer)
  * [Regular Request](#user-content-regular-request)
  * [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
 
 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 in Android 6.0 devices. To grant permissions in runtime, you might use modules like [react-native-android-permissions](https://github.com/lucasferreira/react-native-android-permissions).
 
-## Recipes
+## Usage
 
 ES6
 
 - Blob
 - XMLHttpRequest (Use our implementation if you're going to use it with Blob)
 
+Here's a [sample app](https://github.com/wkh237/rn-firebase-storage-upload-sample) that uses polyfills to upload files to FireBase.
+
 ### Performance Tips
 
 ---
 
 | Version | |
 |---|---|
+| 0.9.1 | Fix Android Blob constructor asynchronous issue caused by 0.9.0 fs change |
 | 0.9.0 | Fix unicode response data format issue #73. Improve Android performance by using thread pool instead of async task. Add Fetch replacement #70. Add Android only API `actionViewIntent` to open file or install APK in app |
 | 0.8.1 | Remove Web API log and fix ios progress report function. |
 | 0.8.0 | Added Web API polyfills, support regular request, added timeout option. |

src/README.md

-# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?maxAge=86400&style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/react-native-fetch-blob.svg?maxAge=2592000&style=flat-square)]()
-
-A project committed to make file acess and data transfer easier, effiecient for React Native developers.
+# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?style=flat-square)](https://github.com/wkh237/react-native-fetch-blob/releases) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/react-native-fetch-blob.svg?maxAge=2592000&style=flat-square)]()
 
 # [Visit our Github for latest document](https://github.com/wkh237/react-native-fetch-blob)
 
+A project committed to make file acess and data transfer easier, effiecient for React Native developers.
+
 ## Features
 - Transfer data directly from/to storage without BASE64 bridging
 - File API supports normal 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
+- Blob, File, XMLHttpRequest polyfills that make browser-based library available in RN (experimental)
+
 
 ## TOC
 * [About](#user-content-about)
 * [Installation](#user-content-installation)
-* [Recipes](#user-content-recipes)
 * [HTTP Data Transfer](#user-content-http-data-transfer)
  * [Regular Request](#user-content-regular-request)
  * [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
  * [Cancel HTTP request](#user-content-cancel-request)
  * [Android Media Scanner, and Download Manager Support](#user-content-android-media-scanner-and-download-manager-support)
  * [Self-Signed SSL Server](#user-content-self-signed-ssl-server)
+ * [RNFetchBlob as Fetch](#user-content-rnfetchblob-as-fetch)
 * [File System](#user-content-file-system)
  * [File access](#user-content-file-access)
  * [File stream](#user-content-file-stream)
 
 In `0.8.0` we introduced experimential Web API polyfills that make it possible to use browser-based libraries in React Native, for example, [FireBase JS SDK](https://github.com/wkh237/rn-firebase-storage-upload-sample)
 
+
 ## Installation
 
 Install package from npm
 ```diff
 include ':app'      
 + include ':react-native-fetch-blob'                                                                                                  
-+ project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir,' ../node_modules/react-native-fetch-blob/android')                        
++ project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')                        
 ```
 
 Add this line to `MainApplication.java`, so that RNFetchBlob package becomes part of react native package.
 
 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 in Android 6.0 devices. To grant permissions in runtime, you might use modules like [react-native-android-permissions](https://github.com/lucasferreira/react-native-android-permissions).
 
-## Recipes
+## Usage
 
 ES6
 
   })
 ```
 
-What if you want to upload a file in some field ? Just like [upload a file from storage](#user-content-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 file to form data.
+What if you want to upload a file using form data ? Just like [upload a file from storage](#user-content-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 file to form data.
 
 ```js
 
 
 ```
 
-#### Android Media Scanner, and Download Manager Support
+### RNFetchBlob as Fetch
+
+0.9.0
+
+If you have existing code that uses `whatwg-fetch`(the official **fetch**), you don't have to change them after 0.9.0, just use fetch replacement. The difference between Official fetch and fetch replacement is, official fetch uses [whatwg-fetch](https://github.com/github/fetch) js library which wraps XMLHttpRequest polyfill under the hood it's a great library for web developers, however that does not play very well with RN. Our implementation is simply a wrapper of  RNFetchBlob.fetch and fs APIs, so you can access all the features we provide.
+
+[See document and examples](https://github.com/wkh237/react-native-fetch-blob/wiki/Fetch-API#fetch-replacement)
+
+### 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`.
 
 .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](https://facebook.github.io/react-native/docs/linking.html) API that might not work as expected, also, if you're going to install an APK in `Downloads` app, that will not work 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 programatically
+
+```js
+
+const android = RNFetchBlob.android
+
+RNFetchBlob.config({
+    addAndroidDownloads : {
+      useDownloadManager : true,
+      title : 'awesome.apk',
+      description : 'An APK that will be installed',
+      mime : 'application/vnd.android.package-archive',
+      mediaScannable : true,
+      notification : true,
+    }
+  })
+  .fetch('GET', `http://www.example.com/awesome.apk`)
+  .then((res) => {
+      android.actionViewIntent(res.path(), 'application/vnd.android.package-archive')
+  })
+```
+
+Or show an image in image viewer
+
+```js
+      android.actionViewIntent(PATH_OF_IMG, 'image/png')
+```
+
 ### File System
 
 #### File Access
 
 ### Web API Polyfills
 
-After `0.8.0` we've made some [Web API polyfills](https://github.com/wkh237/react-native-fetch-blob/wiki/Web-API-Polyfills-(work-in-progress)) that makes some browser-based library available in RN.
+After `0.8.0` we've made some [Web API polyfills](https://github.com/wkh237/react-native-fetch-blob/wiki/Web-API-Polyfills-(experimental)) that makes some browser-based library available in RN.
 
 - Blob
 - XMLHttpRequest (Use our implementation if you're going to use it with Blob)
 
+Here's a [sample app](https://github.com/wkh237/rn-firebase-storage-upload-sample) that uses polyfills to upload files to FireBase.
+
 ### Performance Tips
 
 ---
 
-**Reduce RCT Bridge Overhead and BASE64 Time**
+**Reduce RCT Bridge and BASE64 Overheard**
 
 React Native connects JS and Native context by passing JSON through React bridge, therefore there will be an overhead to convert data before they sent. 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.
 
 
 | Version | |
 |---|---|
-| 0.8.2 | Fix Android RN 0.31 installation issue #78 |
+| 0.9.1 | Fix Android Blob constructor asynchronous issue caused by 0.9.0 fs change |
+| 0.9.0 | Fix unicode response data format issue #73. Improve Android performance by using thread pool instead of async task. Add Fetch replacement #70. Add Android only API `actionViewIntent` to open file or install APK in app |
 | 0.8.1 | Remove Web API log and fix ios progress report function. |
 | 0.8.0 | Added Web API polyfills, support regular request, added timeout option. |
 | 0.7.5 | Fix installation script that make it compatible to react-native < 0.28 |

src/index.js

             Blob.build(this.data, { type : cType + ';BASE64' }).then(resolve)
           break
           case 'path':
-            console.log('##', 'reading path')
             polyfill.Blob.build(wrap(this.data), { type : cType }).then(resolve)
           break
           default:

src/package.json

 {
   "name": "react-native-fetch-blob",
-  "version": "0.9.0-beta.5",
+  "version": "0.9.1",
   "description": "A module provides upload, download, and files access API. Supports file stream read/write for process large files.",
   "main": "index.js",
   "scripts": {

src/polyfill/Blob.js

    * @return {Blob} The Blob object instance itself
    */
   onCreated(fn:() => void):Blob {
-    log.verbose('register blob onCreated', this._onCreated.length)
+    log.verbose('#register blob onCreated', this._blobCreated)
     if(!this._blobCreated)
       this._onCreated.push(fn)
-    else
+    else {
       fn(this)
+    }
     return this
   }
 
   }
 
   _invokeOnCreateEvent() {
-    log.verbose('invoke create event')
+    log.verbose('invoke create event', this._onCreated)
     this._blobCreated = true
     let fns = this._onCreated
     for(let i in fns) {
-      if(typeof fns[i] === 'function')
+      if(typeof fns[i] === 'function') {
         fns[i](this)
+      }
     }
     delete this._onCreated
   }
   // start write blob data
   // return p.then(() => {
     for(let i in args) {
-      p = p.then((written) => {
+      p = p.then(function(written){
+        let arg = this
         if(written)
           size += written
-        log.verbose('mixed blob write', ...args[i], written)
-        return fs.appendFile.call(this, ...args[i])
-      })
+        log.verbose('mixed blob write', args[i], written)
+        return fs.appendFile(...arg)
+      }.bind(args[i]))
     }
     return p.then(() => Promise.resolve(size))
     // let promises = args.map((p) => {

src/polyfill/XMLHttpRequest.js

 
     if(this._readyState !== XMLHttpRequest.OPENED)
       throw 'InvalidStateError : XMLHttpRequest is not opened yet.'
-
+    let promise = Promise.resolve()
     this._sendFlag = true
     log.verbose('XMLHttpRequest send ', body)
     let {_method, _url, _headers } = this
     log.verbose(typeof body, body instanceof FormData)
 
     if(body instanceof Blob) {
-      body = RNFetchBlob.wrap(body.getRNFetchBlobRef())
+      promise = new Promise((resolve, reject) => {
+          body.onCreated((blob) => {
+            body = RNFetchBlob.wrap(body.getRNFetchBlobRef())
+            resolve()
+          })
+        })
     }
     else if(typeof body === 'object') {
       body = JSON.stringify(body)
+      promise = Promise.resolve()
     }
-    else
+    else {
       body = body ? body.toString() : body
-    this._task = RNFetchBlob
-                  .config({
-                    auto: true,
-                    timeout : this._timeout,
-                    binaryContentTypes : XMLHttpRequest.binaryContentTypes
-                  })
-                  .fetch(_method, _url, _headers, body)
-    this._task
-        .stateChange(this._headerReceived.bind(this))
-        .uploadProgress(this._uploadProgressEvent.bind(this))
-        .progress(this._progressEvent.bind(this))
-        .catch(this._onError.bind(this))
-        .then(this._onDone.bind(this))
+      promise = Promise.resolve()
+    }
+
+    promise.then(() => {
+      this._task = RNFetchBlob
+                    .config({
+                      auto: true,
+                      timeout : this._timeout,
+                      binaryContentTypes : XMLHttpRequest.binaryContentTypes
+                    })
+                    .fetch(_method, _url, _headers, body)
+      this._task
+          .stateChange(this._headerReceived.bind(this))
+          .uploadProgress(this._uploadProgressEvent.bind(this))
+          .progress(this._progressEvent.bind(this))
+          .catch(this._onError.bind(this))
+          .then(this._onDone.bind(this))
+    })
   }
 
   overrideMimeType(mime:string) {
         case 'blob' :
           resp.blob().then((b) => {
             this._responseText = resp.text()
-            this.response = b
+            this._response = b
             responseDataReady()
           })
         break;
         default :
+        console.log(resp, resp.text())
           this._responseText = resp.text()
           this._response = this.responseText
           responseDataReady()

test-server/server.js

 
 app.all('/xhr-header', (req, res) => {
   console.log(req.headers)
-  res.header('Content-Type', 'application/json')
+  // res.header('Content-Type', 'application/json')
   res.send(req.headers)
 })
 

test/test-0.9.0.js

 
 let prefix = ((Platform.OS === 'android') ? 'file://' : '')
 
+describe('cache control header and range request test', (report, done) => {
+
+  let image = RNTest.prop('image')
+  let part = [
+    `${fs.dirs.DocumentDir}/cache-control-test-part1.png`,
+    `${fs.dirs.DocumentDir}/cache-control-test-part2.png`,
+    `${fs.dirs.DocumentDir}/cache-control-test-part3.png`
+  ]
+  let tmp = null
+
+  RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
+    Authorization : `Bearer ${DROPBOX_TOKEN}`,
+    'Dropbox-API-Arg': '{\"path\": \"/rn-upload/'+FILENAME+'\",\"mode\": \"add\",\"autorename\": true,\"mute\": false}',
+    'Content-Type' : 'application/octet-stream',
+  }, image)
+  .then((resp) => {
+    resp = resp.json()
+    report(
+      <Assert key="confirm the file has been uploaded" expect={FILENAME} actual={resp.name}/>
+    )
+    return RNFetchBlob.config({
+      path : part[0],
+    })
+    .fetch('GET', 'https://content.dropboxapi.com/1/files/auto/rn-upload/' + FILENAME, {
+      Authorization : `Bearer ${DROPBOX_TOKEN}`,
+      'Cache-Control' : 'no-store',
+      'Range' : 'bytes=0-23000'
+    })
+  })
+  .then((res) => {
+    let size = Math.floor(res.info().headers['Content-Length'])
+    report(<Assert key="part2 content length = 23001" expect={23001} actual={size}/>)
+    return RNFetchBlob.config({
+      path : part[2]
+    })
+    .fetch('GET', 'https://content.dropboxapi.com/1/files/auto/rn-upload/' + FILENAME, {
+      Authorization : `Bearer ${DROPBOX_TOKEN}`,
+      'Range' : 'bytes=23001-23975',
+      'Cache-Control' : 'no-store'
+    })
+  })
+  .then((res) => {
+    let size = Math.floor(res.info().headers['Content-Length'])
+    report(<Assert key="part3 content length = 975" expect={974} actual={size}/>)
+    return fs.appendFile(part[0], part[2], 'uri')
+  })
+  .then((written) => {
+    return fs.stat(part[0])
+  })
+  .then((stat) => {
+    report(<Assert key="combined file size check" expect="23975" actual={stat.size}/>)
+    done()
+  })
+})
+
 describe('#73 unicode response BASE64 content test', (report, done) => {
 
   fetch(`${TEST_SERVER_URL}/unicode`, {

test/test-firebase.js

 
 describe('upload file to firebase', (report, done) => {
 
-  // create Blob from BASE64 data
-  let blob = new Blob(RNTest.prop('image'), { type : 'image/png;BASE64'})
   let testImage = `firebase-test-${Platform.OS}-${Date.now()}.png`
   RNTest.prop('firebase-image', testImage)
-  // start test after Blob created
-  blob.onCreated(() => {
+
+  // create Blob from BASE64 data
+  Blob.build(RNTest.prop('image'), { type : 'image/png;BASE64'})
+  .then((blob) => {
     let storage = firebase.storage().ref('rnfbtest')
     let task = storage
       .child(RNTest.prop('firebase-image'))
     done()
   })
 })
+
+describe('upload from storage', (report, done) => {
+  try {
+  let file = fs.dirs.DocumentDir + '/tempimg.png'
+  fs.writeFile(file, RNTest.prop('image'), 'base64')
+    .then(() => Blob.build(RNFetchBlob.wrap(file), {type : 'image/png'}))
+    .then((blob) => {
+      let storage = firebase.storage().ref('rnfbtest')
+      let task = storage
+        .child(`image-from-storage-${Platform.OS}-${Date.now()}.png`)
+        .put(blob, { contentType : 'image/png' })
+        .then((snapshot) => {
+          console.log(snapshot.metadata)
+          report(<Assert key="upload success"
+            expect={true}
+            actual={true}/>,
+          <Info key="uploaded file stat" >
+            <Text>{snapshot.totalBytes}</Text>
+            <Text>{JSON.stringify(snapshot.metadata)}</Text>
+          </Info>)
+          done()
+        })
+    })
+  }
+  catch(err) {
+    console.log(err)
+  }
+})

test/test-init.js

 })
 
 
-describe('Upload octet-stream image to Dropbox', (report, done) => {
-  let image = prop('image')
-  let tmp = null
-  let etag = ''
-  // upload a file to dropbox
-  RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
-    Authorization : `Bearer ${DROPBOX_TOKEN}`,
-    'Dropbox-API-Arg': '{\"path\": \"/rn-upload/'+FILENAME+'\",\"mode\": \"add\",\"autorename\": true,\"mute\": false}',
-    'Content-Type' : 'application/octet-stream',
-  }, image)
-  .then((resp) => {
-    resp = resp.json()
-    report(
-      <Assert key="confirm the file has been uploaded" expect={FILENAME} actual={resp.name}/>
-    )
-    // detect range request support
-    return RNFetchBlob
-    .config({
-      path : RNFetchBlob.fs.dirs.DocumentDir + '/part1.png'
-    })
-    .fetch('GET', 'https://content.dropboxapi.com/1/files/auto'+'/rn-upload/'+FILENAME, {
-      Authorization : `Bearer ${DROPBOX_TOKEN}`,
-      'Cache-Control' : 'no-store',
-      'Range' : 'bytes=0-22975'
-    })
-  })
-  .then((res) => {
-
-    console.log('first chunk', res.info().headers,res.info().headers['Content-Length'])
-    // get first range
-    return RNFetchBlob
-    .config({
-      path : RNFetchBlob.fs.dirs.DocumentDir + '/part2.png'
-    })
-    .fetch('GET', 'https://content.dropboxapi.com/1/files/auto/rn-upload/'+FILENAME, {
-      Authorization : `Bearer ${DROPBOX_TOKEN}`,
-      'Cache-Control' : 'no-store',
-      'Range' : 'bytes=22976-'
-    })
-  })
-  .then((res) => {
-    tmp = res
-    console.log('second chunk', res.info().headers, res.info().headers['Content-Length'])
-    // get second range
-    return RNFetchBlob.fs.appendFile(RNFetchBlob.fs.dirs.DocumentDir + '/part1.png', RNFetchBlob.fs.dirs.DocumentDir + '/part2.png', 'uri')
-  })
-  .then(() => {
-    return RNFetchBlob.fs.stat(RNFetchBlob.fs.dirs.DocumentDir + '/part1.png')
-  })
-  .then((stat) => {
-    tmp.flush()
-    console.log('combined', stat)
-    report(<Info key="combined image">
-      <Text>{stat.size}</Text>
-      <Image key="combined image" style={styles.image} source={{uri :RNFetchBlob.fs.dirs.DocumentDir + '/part1.png' }}/>
-    </Info>)
-    done()
-  })
-
-})
-
-// require('./test-0.1.x-0.4.x')
-// require('./test-0.5.1')
-// require('./test-0.5.2')
-// require('./test-0.6.0')
-// require('./test-0.6.2')
-// require('./test-0.6.3')
-// require('./test-0.7.0')
-// require('./test-0.8.0')
-// require('./test-0.9.0')
-// require('./test-fetch')
-// require('./test-fs')
-// require('./test-xmlhttp')
-// require('./test-blob')
-// require('./test-firebase')
-// require('./test-android')
-// require('./test-readable')
+require('./test-0.1.x-0.4.x')
+require('./test-0.5.1')
+require('./test-0.5.2')
+require('./test-0.6.0')
+require('./test-0.6.2')
+require('./test-0.6.3')
+require('./test-0.7.0')
+require('./test-0.8.0')
+require('./test-0.9.0')
+require('./test-fetch')
+require('./test-fs')
+require('./test-xmlhttp')
+require('./test-blob')
+require('./test-firebase')
+require('./test-android')
 // require('./benchmark')