Ben Hsieh 8 лет назад
Родитель
Сommit
d36b915b18
1 измененных файлов: 43 добавлений и 13 удалений
  1. 43
    13
      README.md

+ 43
- 13
README.md Просмотреть файл

@@ -1,6 +1,6 @@
1 1
 # 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)
2 2
 
3
-A react-native module for fetch file/image with custom headers, supports blob response data.
3
+A react-native module for fetch file/image with custom headers, supports blob response data, and upload/download progress.
4 4
 
5 5
 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).
6 6
 
@@ -10,6 +10,15 @@ This module enables you upload/download binary data in js, see [Examples](#user-
10 10
 
11 11
 The source code is very simple, just an implementation of native HTTP request, supports both Android (uses awesome native library  [AsyncHttpClient](https://github.com/AsyncHttpClient/async-http-client])) and IOS.
12 12
 
13
+## Major Changes
14
+
15
+| Version | |
16
+|---|---|
17
+| 0.3 | Upload/Download octet-stream and form-data |
18
+| 0.4 | Add base-64 encode/decode library and API |
19
+| 0.4.1 | Fixe upload form-data missing file extension problem on Android |
20
+| 0.4.2 | Supports upload/download progress |
21
+
13 22
 ## Usage
14 23
 
15 24
 * [Installation](#user-content-installation)
@@ -17,9 +26,8 @@ The source code is very simple, just an implementation of native HTTP request, s
17 26
  * [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
18 27
  * [Upload file](#user-content-upload-example--dropbox-files-upload-api)
19 28
  * [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
29
+ * [Upload/Download progress](#user-content-uploaaddownload-progress)
20 30
 * [API](#user-content-api)
21
-* [Test and Development](#user-content-test-and-development)
22
-* [Milestones](#user-content-milestones)
23 31
 
24 32
 ## Installation
25 33
 
@@ -116,9 +124,30 @@ Elements have property `filename` will be transformed into binary format, otherw
116 124
   })
117 125
 ```
118 126
 
127
+#### Upload/Download progress
128
+
129
+In `version >= 0.4.2` it is possible to know the upload/download progress.
130
+
131
+```js
132
+  RNFetchBlob.fetch('POST', 'http://www.example.com/upload', {
133
+      ... some headers,
134
+      'Content-Type' : 'octet-stream'
135
+    }, base64DataString)
136
+    .progress((received, total) => {
137
+        console.log('progress', received / total)
138
+    })
139
+    .then((resp) => {
140
+      // ...
141
+    })
142
+    .catch((err) => {
143
+      // ...
144
+    })
145
+```
146
+
147
+
119 148
 ## API
120 149
 
121
-#### `fetch(method, url, headers, body):Promise<FetchBlobResponse> `
150
+#### `fetch(method, url, headers, body):Promise<FetchBlobResponse>`
122 151
 
123 152
 Send a HTTP request uses given headers and body, and return a Promise.
124 153
 
@@ -130,9 +159,16 @@ HTTP request destination url.
130 159
 Headers of HTTP request, value of headers should be `stringified`, if you're uploading binary files, content-type should be `application/octet-stream` or `multipart/form-data`(see examples above).
131 160
 #### body:`string | Array<Object>` (Optional)
132 161
 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.
133
-
134 162
 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`.
135 163
 
164
+### `fetch(...).progress(eventListener):Promise<FetchBlobResponse>` added in `0.4.2`
165
+
166
+Register on progress event handler for a fetch request.
167
+
168
+#### eventListener:`(sendOrReceivedBytes:number, totalBytes:number)`
169
+
170
+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.
171
+
136 172
 #### `base64`
137 173
 
138 174
 A helper object simply uses [base-64](https://github.com/mathiasbynens/base64) for decode and encode BASE64 data.
@@ -154,14 +190,8 @@ When `fetch` success, it resolve a `FetchBlobResponse` object as first argument.
154 190
   returns decoded base64 string (done in js context)
155 191
 
156 192
 
157
-### Test and Development
158
-
159
-Check our [development guide](https://github.com/wkh237/react-native-fetch-blob/wiki/Development-Guide)
160
-
161
-### Milestones
162
-
163
-[V0.5 milestone](https://github.com/wkh237/react-native-fetch-blob/milestones/v0.5)
193
+### Upcoming Features
164 194
 
165 195
 * Save file to storage directly
196
+* Upload file from storage directly
166 197
 * Custom MIME type in form data
167
-* Upload/Download progress report