Kaynağa Gözat

Change README.md

Ben Hsieh 8 yıl önce
ebeveyn
işleme
e1d013f6d3
1 değiştirilmiş dosya ile 44 ekleme ve 11 silme
  1. 44
    11
      README.md

+ 44
- 11
README.md Dosyayı Görüntüle

@@ -2,7 +2,7 @@
2 2
 
3 3
 ## v0.5.0 Work In Progress README.md
4 4
 
5
-A react-native module for upload, and download file with custom headers. Supports blob response data, upload/download progress, and file reader API that enables you process file content in js context (such as display image data, string or image process).
5
+A react-native module for upload, and download files with custom headers. Supports blob response data, upload/download progress, and file reader API that enables you process file content in js context (such as display image data, string or image process).
6 6
 
7 7
 If you're dealing with image or file server that requires special field in the header, or you're having problem with `fetch` API when receiving blob data, you might try this module.
8 8
 
@@ -20,7 +20,7 @@ This module implements native HTTP request, supports both Android (uses awesome
20 20
  * [Upload file](#user-content-upload-example--dropbox-files-upload-api)
21 21
  * [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
22 22
  * [Upload/Download progress](#user-content-uploaaddownload-progress)
23
- * [Deal with files in storage](#user-content-deal-with-files-in-storage)
23
+ * [File stream reader](#user-content-file-stream-reader)
24 24
  * [Release cache files](#user-content-release-cache-files)
25 25
 * [API](#user-content-api)
26 26
 
@@ -78,6 +78,8 @@ The simplest way is give a `fileCach` option to config, and set it to `true`. Th
78 78
 ```js
79 79
 RNFetchBlob
80 80
   .config({
81
+    // add this option that makes response data to be stored as a file,
82
+    // this is much more performant.
81 83
     fileCache : true,
82 84
   })
83 85
   .fetch('GET', 'http://www.example.com/file/example.zip', {
@@ -95,6 +97,7 @@ But in some cases, you might need a file extension even the file is temporary ca
95 97
 RNFetchBlob
96 98
   .config({
97 99
     fileCache : true,
100
+    // by adding this option, the temp files will have a file extension
98 101
     appendExt : 'png'
99 102
   })
100 103
   .fetch('GET', 'http://www.example.com/file/example.zip', {
@@ -115,10 +118,11 @@ What's more, if you prefer a specific path, rather a random generated path, you
115 118
 RNFetchBlob.getSystemDirs().then((dirs) => {
116 119
   RNFetchBlob
117 120
     .config({
121
+      // response data will be saved to this path if it has access right.
118 122
       path : dirs.DocumentDir + 'path-to-file.anything'
119 123
     })
120 124
     .fetch('GET', 'http://www.example.com/file/example.zip', {
121
-      some headers ..
125
+      //some headers ..
122 126
     })
123 127
     .then((res) => {
124 128
       // the path should be dirs.DocumentDir + 'path-to-file.anything'
@@ -165,6 +169,7 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
165 169
       mute : false
166 170
     }),
167 171
     'Content-Type' : 'application/octet-stream',
172
+    // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file
168 173
   }, 'RNFetchBlob-file://' + PATH_TO_THE_FILE)
169 174
   .then((res) => {
170 175
     console.log(res.text())
@@ -212,7 +217,11 @@ What if some fields contains a file in file storage ? Just like [upload a file f
212 217
     'Content-Type' : 'multipart/form-data',
213 218
   }, [
214 219
     // append field data from file path
215
-    { name : 'avatar', filename : 'avatar.png', data: 'RNFetchBlob-file://' + PATH_TO_THE_FILE},
220
+    { name : 'avatar',
221
+      filename : 'avatar.png',
222
+      // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file
223
+      data: 'RNFetchBlob-file://' + PATH_TO_THE_FILE
224
+    },
216 225
     // elements without property `filename` will be sent as plain text
217 226
     { name : 'name', data : 'user'},
218 227
     { name : 'info', data : JSON.stringify({
@@ -246,6 +255,33 @@ In `version >= 0.4.2` it is possible to know the upload/download progress.
246 255
     })
247 256
 ```
248 257
 
258
+#### Handle files in storage
259
+
260
+In v0.5.0 we've added a `readStream` API, which allows you read data from file directly. This API creates a file stream, rather than a BASE64 encoded data of the file, so that you won't have to worry if large files explodes the memory.
261
+
262
+```js
263
+let data = ''
264
+let stream = RNFetchBlob.readStream(
265
+    // encoding, should be one of `base64`, `utf8`, `ascii`
266
+    'base64',
267
+    // file path
268
+    PATH_TO_THE_FILE,
269
+    // (optional) buffer size, default to 1024 (1026 for BASE64 encoded data)
270
+    // when reading file in BASE64 encoding, buffer size must be multiples of 3.
271
+    1026)
272
+stream.onData((chunk) => {
273
+  data += chunk
274
+})
275
+stream.onError((err) => {
276
+  console.log('oops', err)
277
+})
278
+stream.onEnd(() => {  
279
+  <Image source={{ uri : 'data:image/png,base64' + data }}
280
+})
281
+```
282
+
283
+#### Release cache files
284
+
249 285
 
250 286
 ## API
251 287
 
@@ -301,15 +337,12 @@ When `fetch` success, it resolve a `FetchBlobResponse` object as first argument.
301 337
 | 0.4.2 | Supports upload/download progress |
302 338
 | 0.5.0 | Upload/download with direct access to file storage, and also supports read file with file stream |
303 339
 
304
-### Upcoming Features
305
-
306
-We are now working on v0.5.0, there will be some new features.
340
+### TODOs
307 341
 
308
-* Save file to storage directly
309
-* Upload file from storage directly
310
-* Custom MIME type in form data
342
+* Customizable Multipart MIME type
343
+* Improvement of file cache management API
311 344
 
312 345
 ### Development
313 346
 
314
-If you're insterested in hacking this module, check our [development guide](https://github.com/wkh237/react-native-fetch-blob/wiki/Development-Guide), there might be something helpful.
347
+If you're interested in hacking this module, check our [development guide](https://github.com/wkh237/react-native-fetch-blob/wiki/Development-Guide), there might be some helpful information.
315 348
 Please feel free to make a PR or file an issue.