|
@@ -52,23 +52,37 @@ Install package from npm
|
52
|
52
|
npm install --save react-native-fetch-blob
|
53
|
53
|
```
|
54
|
54
|
|
55
|
|
-Link package using [rnpm](https://github.com/rnpm/rnpm)
|
|
55
|
+Or if using CocoaPods, add the pod to your `Podfile`, for example:
|
|
56
|
+
|
|
57
|
+```
|
|
58
|
+pod 'react-native-fetch-blob,
|
|
59
|
+ :path => '../node_modules/react-native-fetch-blob
|
|
60
|
+```
|
|
61
|
+
|
|
62
|
+**Automatically Link Native Modules**
|
|
63
|
+
|
|
64
|
+For 0.29.2+ projects, simply link native packages via following command because rnpm has been merged into react-native, you no longer need it.
|
|
65
|
+
|
|
66
|
+```
|
|
67
|
+react-native link
|
|
68
|
+```
|
|
69
|
+
|
|
70
|
+As for projects < 0.29 you need `rnpm` to link native packages
|
56
|
71
|
|
57
|
72
|
```sh
|
58
|
73
|
rnpm link
|
59
|
74
|
```
|
60
|
75
|
|
61
|
|
-optional, use the following command to add Android permissions to `AndroidManifest.xml` automatically
|
|
76
|
+Optionally, use the following command to add Android permissions to `AndroidManifest.xml` automatically
|
62
|
77
|
|
63
|
78
|
```sh
|
64
|
|
-RNFB_ANDROID_PERMISSIONS=true rnpm link
|
|
79
|
+RNFB_ANDROID_PERMISSIONS=true react-native link
|
65
|
80
|
```
|
66
|
81
|
|
67
|
|
-Or if using CocoaPods, add the pod to your `Podfile`, for example:
|
|
82
|
+pre 0.29 projects
|
68
|
83
|
|
69
|
|
-```
|
70
|
|
-pod 'react-native-fetch-blob,
|
71
|
|
- :path => '../node_modules/react-native-fetch-blob
|
|
84
|
+```sh
|
|
85
|
+RNFB_ANDROID_PERMISSIONS=true rnpm link
|
72
|
86
|
```
|
73
|
87
|
|
74
|
88
|
The link script might not take effect if you have non-default project structure, please visit [the wiki](https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package/_edit) to manually link the pacakge.
|
|
@@ -138,11 +152,13 @@ After `0.8.0` react-native-fetch-blob automatically decide how to send the body
|
138
|
152
|
|
139
|
153
|
To sum up :
|
140
|
154
|
|
141
|
|
-- To send a form data, the `Content-Type` header won't take effect if the body is an `Array` because we will set proper content type for you.
|
142
|
|
-- To send binary data, you have two choices, use BASE64 encoded string or a file path which points to a file contains the body. The `Content-Type` header does not matters.
|
143
|
|
- - The body is a BASE64 encoded string, the `Content-Type` header filed must containing substring`;BASE64` or `application/octet`
|
144
|
|
- - The body is a path point to a file, it must be a string starts with `RNFetchBlob-file://`, which can simply done by `RNFetchBlob.wrap(PATH_TO_THE_FILE)`
|
145
|
|
-- To send the body as-is, set a `Content-Type` header not containing `;BASE64` or `application/octet`.
|
|
155
|
+- To send a form data, the `Content-Type` header does not matters. When the body is an `Array` we will set proper content type for you.
|
|
156
|
+- To send binary data, you have two choices, use BASE64 encoded string or path points to a file contains the body.
|
|
157
|
+ - If the `Content-Type` containing substring`;BASE64` or `application/octet` the given body will be considered as a BASE64 encoded data which will be decoded to binary data as the request body.
|
|
158
|
+ - Otherwise, if a string starts with `RNFetchBlob-file://` (which can simply done by `RNFetchBlob.wrap(PATH_TO_THE_FILE)`), it will try to find the data from the URI string after `RNFetchBlob-file://` and use it as request body.
|
|
159
|
+- To send the body as-is, simply use a `Content-Type` header not containing `;BASE64` or `application/octet`.
|
|
160
|
+
|
|
161
|
+> After 0.9.4, we disabled `Chunked` transfer encoding by default, if you're going to use it, you should explicitly set header `Transfer-Encoding` to `Chunked`.
|
146
|
162
|
|
147
|
163
|
#### Download example : Fetch files that needs authorization token
|
148
|
164
|
|
|
@@ -172,7 +188,7 @@ RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', {
|
172
|
188
|
|
173
|
189
|
#### Download to storage directly
|
174
|
190
|
|
175
|
|
-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.
|
|
191
|
+If the response data is large, that would be a bad idea to convert it into BASE64 string. A better solution is streaming the response directly into a file, simply add 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.
|
176
|
192
|
|
177
|
193
|
**These files won't be removed automatically, please refer to [Cache File Management](#user-content-cache-file-management)**
|
178
|
194
|
|
|
@@ -194,7 +210,7 @@ RNFetchBlob
|
194
|
210
|
|
195
|
211
|
**Set Temp File Extension**
|
196
|
212
|
|
197
|
|
-Sometimes you might need a file extension for some reason. For instance, when using file path as source of `Image` component, the path should end with something like .png or .jpg, you can do this by add `appendExt` option to `config`.
|
|
213
|
+Sometimes you might need a file extension for some reason. For example, when using file path as source of `Image` component, the path should end with something like .png or .jpg, you can do this by add `appendExt` option to `config`.
|
198
|
214
|
|
199
|
215
|
```js
|
200
|
216
|
RNFetchBlob
|
|
@@ -217,7 +233,7 @@ RNFetchBlob
|
217
|
233
|
|
218
|
234
|
**Use Specific File Path**
|
219
|
235
|
|
220
|
|
-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.
|
|
236
|
+If you prefer a specific path rather than randomly generated one, you can use `path` option. We've added [several constants](#user-content-dirs) in v0.5.0 which represents commonly used directories.
|
221
|
237
|
|
222
|
238
|
```js
|
223
|
239
|
let dirs = RNFetchBlob.fs.dirs
|
|
@@ -239,7 +255,7 @@ RNFetchBlob
|
239
|
255
|
|
240
|
256
|
#### Upload example : Dropbox [files-upload](https://www.dropbox.com/developers/documentation/http/documentation#files-upload) API
|
241
|
257
|
|
242
|
|
-`react-native-fetch-blob` will convert the base64 string in `body` to binary format using native API, this process will be done in a new thread, so it's async.
|
|
258
|
+`react-native-fetch-blob` will convert the base64 string in `body` to binary format using native API, this process will be done in a separated thread, so it won't block your GUI.
|
243
|
259
|
|
244
|
260
|
```js
|
245
|
261
|
|
|
@@ -266,7 +282,7 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
266
|
282
|
|
267
|
283
|
#### Upload a file from storage
|
268
|
284
|
|
269
|
|
-If you're going to use a `file` request body, just wrap the path with `wrap` API.
|
|
285
|
+If you're going to use a `file` as request body, just wrap the path with `wrap` API.
|
270
|
286
|
|
271
|
287
|
```js
|
272
|
288
|
RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
|
@@ -322,7 +338,7 @@ Elements have property `filename` will be transformed into binary format, otherw
|
322
|
338
|
})
|
323
|
339
|
```
|
324
|
340
|
|
325
|
|
-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.
|
|
341
|
+What if you want to append a file to 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. But keep in mind when the file is large it's likely crash your app. Please consider use other strategy (see [#94](https://github.com/wkh237/react-native-fetch-blob/issues/94)).
|
326
|
342
|
|
327
|
343
|
```js
|
328
|
344
|
|
|
@@ -363,7 +379,7 @@ What if you want to upload a file using form data ? Just like [upload a file fro
|
363
|
379
|
|
364
|
380
|
#### Upload/Download progress
|
365
|
381
|
|
366
|
|
-In `version >= 0.4.2` it is possible to know the upload/download progress. After `0.7.0` IOS and Android upload progress are supported.
|
|
382
|
+In `version >= 0.4.2` it is possible to know the upload/download progress. After `0.7.0` IOS and Android upload progress are also supported.
|
367
|
383
|
|
368
|
384
|
```js
|
369
|
385
|
RNFetchBlob.fetch('POST', 'http://www.example.com/upload', {
|
|
@@ -559,7 +575,7 @@ See [File API](https://github.com/wkh237/react-native-fetch-blob/wiki/File-Syste
|
559
|
575
|
|
560
|
576
|
In `v0.5.0` we've added `writeStream` and `readStream`, which allows your app read/write data from file path. This API creates a file stream, rather than convert whole data into BASE64 encoded string, it's handy when processing **large files**.
|
561
|
577
|
|
562
|
|
-When calling `readStream` method, you have to `open` the stream, and start to read data.
|
|
578
|
+When calling `readStream` method, you have to `open` the stream, and start to read data. When the file is large consider use an appropriate buffer size to reduce the native event dispatching overhead (see [Performance Tips](#user-content-performance-tips))
|
563
|
579
|
|
564
|
580
|
```js
|
565
|
581
|
let data = ''
|