react-native-fetch-blob - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

index.js

 /**
  * @author wkh237
- * @version 0.3.3
+ * @version 0.4.2
  */
 
-import { NativeModules } from 'react-native'
+import {
+  NativeModules,
+  DeviceEventEmitter,
+  NativeAppEventEmitter,
+  Platform,
+} from 'react-native'
+
 import base64 from 'base-64'
-
+const emitter = (Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter)
 const RNFetchBlob = NativeModules.RNFetchBlob
 
 // Show warning if native module not detected
-if(RNFetchBlob === void 0) {
+if(!RNFetchBlob || !RNFetchBlob.fetchBlobForm || !RNFetchBlob.fetchBlob) {
   console.warn(
-    'react-native-fetch-blob could not find native module.',
+    'react-native-fetch-blob could not find valid native module.',
     'please make sure you have linked native modules using `rnpm link`,',
@@ -20,5 +26,14 @@ 'and restart RN packager or manually compile IOS/Android project.'
 
+const config = function(options) {
+  return { fetch : fetch.bind(options) }
+}
+
 // Promise wrapper function
-const fetch = (...args) => {
+const fetch = function(...args) {
 
+  let options = this || {}
+
+  // create task ID for receiving progress event
+  let taskId = getUUID()
+
   let promise = new Promise((resolve, reject) => {
@@ -29,3 +44,14 @@
 
-    RNFetchBlob[nativeMethodName](method, url, headers || {}, body, (err, ...data) => {
+    // on progress event listener
+    let subscription = emitter.addListener('RNFetchBlobProgress', (e) => {
+      if(e.taskId === taskId && promise.onProgress) {
+        promise.onProgress(e.written, e.total)
+      }
+    })
+
+    let req = RNFetchBlob[nativeMethodName]
+    req(taskId, method, url, headers || {}, body, (err, ...data) => {
+
+      // task done, remove event listener
+      subscription.remove()
       if(err)
@@ -35,2 +61,3 @@ reject(new Error(err, ...data))
         resolve(new FetchBlobResponse(...data))
+
     })
@@ -40,2 +67,7 @@
 
+  promise.progress = (fn) => {
+    promise.onProgress = fn
+    return promise
+  }
+
   return promise
@@ -88,4 +120,11 @@
 
+function getUUID(){
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+    return v.toString(16);
+  });
+}
+
 export default {
   fetch, FetchBlobResponse, base64
 }

package.json

 {
   "name": "react-native-fetch-blob",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "A react-native plugin for fetch blob data via HTTP.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-fetch-blob [![npm version](https://badge.fury.io/js/react-native-fetch-blob.svg)](https://badge.fury.io/js/react-native-fetch-blob)
 
-A react-native module for fetch file/image with custom headers, supports blob response data.
+A react-native module for fetch file/image with custom headers, supports blob response data, and upload/download progress.
 
@@ -13,2 +13,11 @@ If you're dealing with image or file server that requires an `Authorization` token in the header, or you're having problem with `fetch` API when receiving blob data, you might try this module (this is also the reason why I made this).
 
+## Major Changes
+
+| Version | |
+|---|---|
+| 0.3 | Upload/Download octet-stream and form-data |
+| 0.4 | Add base-64 encode/decode library and API |
+| 0.4.1 | Fixe upload form-data missing file extension problem on Android |
+| 0.4.2 | Supports upload/download progress |
+
 ## Usage
@@ -21,2 +30,3 @@
  * [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
+ * [Upload/Download progress](#user-content-uploaaddownload-progress)
 * [API](#user-content-api)
@@ -119,5 +129,26 @@
 
+#### Upload/Download progress
+
+In `version >= 0.4.2` it is possible to know the upload/download progress.
+
+```js
+  RNFetchBlob.fetch('POST', 'http://www.example.com/upload', {
+      ... some headers,
+      'Content-Type' : 'octet-stream'
+    }, base64DataString)
+    .progress((received, total) => {
+        console.log('progress', received / total)
+    })
+    .then((resp) => {
+      // ...
+    })
+    .catch((err) => {
+      // ...
+    })
+```
+
+
 ## API
 
-#### `fetch(method, url, headers, body):Promise<FetchBlobResponse> `
+#### `fetch(method, url, headers, body):Promise<FetchBlobResponse>`
 
@@ -134,5 +165,12 @@ Send a HTTP request uses given headers and body, and return a Promise.
 Body of the HTTP request, body can either be a BASE64 string, or an array contains object elements, each element have 2  required property `name`, and `data`, and 1 optional property `filename`, once `filename` is set, content in `data` property will be consider as BASE64 string that will be converted into byte array later.
-
 When body is a base64 string , this string will be converted into byte array in native code, and the request body will be sent as `application/octet-stream`.
 
+### `fetch(...).progress(eventListener):Promise<FetchBlobResponse>` added in `0.4.2`
+
+Register on progress event handler for a fetch request.
+
+#### eventListener:`(sendOrReceivedBytes:number, totalBytes:number)`
+
+A function that triggers when there's data received/sent, first argument is the number of sent/received bytes, and second argument is expected total bytes number.
+
 #### `base64`
@@ -159,5 +197,6 @@
 
-### TODO
+### Upcoming Features
 
-* Save file to storage
+* Save file to storage directly
+* Upload file from storage directly
 * Custom MIME type in form data

No alert changes

Improved metrics

Total package byte prevSize

121751

increased by10.58%

Number of package files

33

increased by6.45%

Lines of code

332

increased by16.49%

Number of lines in readme file

198

increased by24.53%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes