|
@@ -1,4 +1,4 @@
|
1
|
|
-# react-native-fetch-blob [](https://www.npmjs.com/package/react-native-fetch-blob) [](https://www.npmjs.com/package/react-native-fetch-blob)  []() 
|
|
1
|
+# react-native-fetch-blob [](https://www.npmjs.com/package/react-native-fetch-blob) [](https://www.npmjs.com/package/react-native-fetch-blob)  []()
|
2
|
2
|
|
3
|
3
|
A project committed to make file acess and transfer easier and effiecient for React Native developers.
|
4
|
4
|
|
|
@@ -137,10 +137,37 @@ var RNFetchBlob = require('react-native-fetch-blob').default
|
137
|
137
|
|
138
|
138
|
#### Regular Request
|
139
|
139
|
|
140
|
|
-TODO
|
|
140
|
+After `0.8.0` react-native-fetch-blob automatically decide how to send the body by checking `Content-Type` in header.
|
|
141
|
+
|
|
142
|
+The rules are shown in the following sample
|
|
143
|
+
|
|
144
|
+```js
|
|
145
|
+import RNFetchblob from 'react-native-fetch-blob'
|
|
146
|
+
|
|
147
|
+// If body is an Array send as multipart form data
|
|
148
|
+RNFetchBlob.fetch('POST'),'http://upload.server.my' { /* whatever it is */ }, [{ name : 'field1', data : 'test' }])
|
|
149
|
+
|
|
150
|
+// If body is a string starts with prefix 'RNFetchBlob-file://' send request with input stream from the patg
|
|
151
|
+RNFetchBlob.fetch('POST'),'http://upload.server.my' { /* whatever it is */ }, 'RNFetchBlob-file://' + path)
|
|
152
|
+RNFetchBlob.fetch('POST'),'http://upload.server.my' { /* whatever it is */ }, RNFetchBlob.wrap(path))
|
|
153
|
+
|
|
154
|
+// If content-type contains `base64;` or `application/octet` the body will be decoded using BASE64 decoder
|
|
155
|
+RNFetchBlob.fetch('POST','http://upload.server.my', { 'Content-Type' : 'anything;base64' }, BASE64_BODY)
|
|
156
|
+RNFetchBlob.fetch('POST','http://upload.server.my', { 'Content-Type' : 'application/octet-binary' }, BASE64_BODY)
|
|
157
|
+
|
|
158
|
+// Send the data as the string you given
|
|
159
|
+RNFetchBlob.fetch('POST', 'http://upload.server.my', { /*any content-type not matching above rules*/ 'Content-Type' : 'text/foo' }, data)
|
|
160
|
+RNFetchBlob.fetch('POST', 'http://upload.server.my', { 'text/plain' }, 'text in the body')
|
|
161
|
+RNFetchBlob.fetch('POST', 'http://upload.server.my', { 'application/json' }, JSON.stringify(some_data))
|
|
162
|
+
|
|
163
|
+```
|
|
164
|
+
|
|
165
|
+If no 'Content-Type' field in headers, it will use default content type `application/octet-stream` and convert given `body` to binary data using BASE64 decoder.
|
141
|
166
|
|
142
|
167
|
#### Download example : Fetch files that needs authorization token
|
143
|
168
|
|
|
169
|
+Most simple way is download to memory and stored as BASE64 encoded string, this is handy when the response data is small.
|
|
170
|
+
|
144
|
171
|
```js
|
145
|
172
|
|
146
|
173
|
// send http request in a new thread (using native code)
|
|
@@ -165,7 +192,7 @@ RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', {
|
165
|
192
|
|
166
|
193
|
#### Download to storage directly
|
167
|
194
|
|
168
|
|
-The simplest way is give a `fileCache` option to config, and set it to `true`. This will let the incoming response data stored in a temporary path **without** any file extension.
|
|
195
|
+If the response data is large, that would be a bad idea to convert it into BASE64 string. The better solution is store the response data directly into file system. The simplest way is give 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.
|
169
|
196
|
|
170
|
197
|
**These files won't be removed automatically, please refer to [Cache File Management](#user-content-cache-file-management)**
|
171
|
198
|
|
|
@@ -210,7 +237,7 @@ RNFetchBlob
|
210
|
237
|
|
211
|
238
|
**Use Specific File Path**
|
212
|
239
|
|
213
|
|
-If you prefer a specific path rather than random generated one, you can use `path` option. We've added a constant [dirs](#user-content-dirs) in v0.5.0 that contains several common used directories.
|
|
240
|
+If you prefer a specific path rather than randomly generated one, you can use `path` option. We've added a constant [dirs](#user-content-dirs) in v0.5.0 that contains several common used directories.
|
214
|
241
|
|
215
|
242
|
```js
|
216
|
243
|
let dirs = RNFetchBlob.fs.dirs
|
|
@@ -298,6 +325,10 @@ Elements have property `filename` will be transformed into binary format, otherw
|
298
|
325
|
}, [
|
299
|
326
|
// element with property `filename` will be transformed into `file` in form data
|
300
|
327
|
{ name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
|
|
328
|
+ // custom content type
|
|
329
|
+ { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
|
|
330
|
+ // part file from storage
|
|
331
|
+ { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
|
301
|
332
|
// elements without property `filename` will be sent as plain text
|
302
|
333
|
{ name : 'name', data : 'user'},
|
303
|
334
|
{ name : 'info', data : JSON.stringify({
|
|
@@ -624,13 +655,17 @@ RNFetchBlob.config({
|
624
|
655
|
|
625
|
656
|
#### Web API Polyfills
|
626
|
657
|
|
627
|
|
-TODO
|
|
658
|
+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.
|
|
659
|
+
|
|
660
|
+- Blob
|
|
661
|
+- XMLHttpRequest (Use our implementation if you're going to use it with Blob)
|
|
662
|
+
|
628
|
663
|
|
629
|
664
|
## Changes
|
630
|
665
|
|
631
|
666
|
| Version | |
|
632
|
667
|
|---|---|
|
633
|
|
-| 0.8.0 | Added Web API polyfills, support regular request, add buffer API |
|
|
668
|
+| 0.8.0 | Added Web API polyfills, support regular request, added timeout option. |
|
634
|
669
|
| 0.7.5 | Fix installation script that make it compatible to react-native < 0.28 |
|
635
|
670
|
| 0.7.4 | Fix app crash problem in version > 0.27 |
|
636
|
671
|
| 0.7.3 | Fix OkHttp dependency issue in version < 0.29 |
|