|
@@ -1,14 +1,14 @@
|
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) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg)
|
2
|
|
-
|
3
|
|
-For latest document please visit our [github](https://github.com/wkh237/react-native-fetch-blob/)
|
|
1
|
+# react-native-fetch-blob [![npm version](https://img.shields.io/badge/npm package-0.5.2-brightgreen.svg)](https://badge.fury.io/js/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg) ![](https://img.shields.io/badge/in progress-0.6.0-yellow.svg)
|
4
|
2
|
|
5
|
3
|
A module provides upload, download, and files access API. Supports file stream read/write for process large files.
|
6
|
4
|
|
|
5
|
+**[Please visit our Github for updated document](https://github.com/wkh237/react-native-fetch-blob)**
|
|
6
|
+
|
7
|
7
|
**Why do we need this**
|
8
|
8
|
|
9
|
9
|
At this moment, React Native does not support `Blob` object yet, so if you're going to send/receive binary data via `fetch` API, that might not work as you expect. See [[fetch] Does fetch with blob() marshal data across the bridge?](https://github.com/facebook/react-native/issues/854).
|
10
|
10
|
|
11
|
|
-Hence you may getting into trouble in some use cases. For example, displaying an image on image server but the server requires a specific field(such as "Authorization") in headers or body, so you can't just pass the image uri to `Image` component because that will probably returns a 401 response. With help of this module, you can send a HTTP request with any headers, and decide how to handle the response/reqeust data. It can be just simply converted into BASE64 string, or store to a file directly so that you can read it by file stream or use it's path.
|
|
11
|
+Hence you may getting into trouble in some use cases. For example, displaying an image on image server but the server requires a specific field(such as "Authorization") in headers or body, so you can't just pass the image uri to `Image` component because that will probably returns a 401 response. With help of this module, you can send a HTTP request with any headers, and decide how to handle the response/reqeust data. The response data can be just simply converted into BASE64 string, or store to a file directly so that you can read it by file stream or use it's path.
|
12
|
12
|
|
13
|
13
|
This module is designed to be a substitution of `blob`, there's a set of file access API including basic CRUD method, and file stream reader/writer. Also it has a special `fetch` implementation that supports binary request/response body.
|
14
|
14
|
|
|
@@ -29,7 +29,7 @@ This update is `backward-compatible` generally you don't have to change existing
|
29
|
29
|
* [File stream](#user-content-file-stream)
|
30
|
30
|
* [Manage cached files](#user-content-manage-cached-files)
|
31
|
31
|
* [API](#user-content-api)
|
32
|
|
- * [config](#user-content-config)
|
|
32
|
+ * [config](#user-content-configoptionsrnfetchblobconfigfetch)
|
33
|
33
|
* [fetch](#user-content-fetchmethod-url-headers-bodypromisefetchblobresponse)
|
34
|
34
|
* [session](#user-content-sessionnamestringrnfetchblobsession)
|
35
|
35
|
* [base64](#user-content-base64)
|
|
@@ -50,9 +50,11 @@ Link package using [rnpm](https://github.com/rnpm/rnpm)
|
50
|
50
|
rnpm link
|
51
|
51
|
```
|
52
|
52
|
|
53
|
|
-**Android Access Permission to External storage (Optional)**
|
|
53
|
+**Grant Permission to External storage for Android 5.0 or lower**
|
|
54
|
+
|
|
55
|
+Mechanism about granting Android permissions has slightly different since Android 6.0 released, please refer to [Officail Document](https://developer.android.com/training/permissions/requesting.html).
|
54
|
56
|
|
55
|
|
-If you're going to access external storage (say, SD card storage), you might have to add the following line to `AndroidManifetst.xml`.
|
|
57
|
+If you're going to access external storage (say, SD card storage) for `Android 5.0` (or lower) devices, you might have to add the following line to `AndroidManifetst.xml`.
|
56
|
58
|
|
57
|
59
|
```diff
|
58
|
60
|
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
|
@@ -69,6 +71,10 @@ If you're going to access external storage (say, SD card storage), you might hav
|
69
|
71
|
|
70
|
72
|
```
|
71
|
73
|
|
|
74
|
+**Grant Access Permission for Android 6.0**
|
|
75
|
+
|
|
76
|
+Beginning in Android 6.0 (API level 23), users grant permissions to apps while the app is running, not when they install the app. So adding permissions in `AndroidManifest.xml` won't work in Android 6.0 devices. To grant permissions in runtime, you might use modules like [react-native-android-permissions](https://github.com/lucasferreira/react-native-android-permissions).
|
|
77
|
+
|
72
|
78
|
## Guide
|
73
|
79
|
|
74
|
80
|
```js
|
|
@@ -207,7 +213,8 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
207
|
213
|
mute : false
|
208
|
214
|
}),
|
209
|
215
|
'Content-Type' : 'application/octet-stream',
|
210
|
|
- // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file.
|
|
216
|
+ // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
|
|
217
|
+ // Or simply wrap the file path with RNFetchBlob.wrap().
|
211
|
218
|
}, RNFetchBlob.wrap(PATH_TO_THE_FILE))
|
212
|
219
|
.then((res) => {
|
213
|
220
|
console.log(res.text())
|
|
@@ -259,7 +266,8 @@ What if you want to upload a file in some field ? Just like [upload a file from
|
259
|
266
|
{
|
260
|
267
|
name : 'avatar',
|
261
|
268
|
filename : 'avatar.png',
|
262
|
|
- // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file path
|
|
269
|
+ // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
|
|
270
|
+ // Or simply wrap the file path with RNFetchBlob.wrap().
|
263
|
271
|
data: RNFetchBlob.wrap(PATH_TO_THE_FILE)
|
264
|
272
|
},
|
265
|
273
|
// elements without property `filename` will be sent as plain text
|
|
@@ -325,7 +333,7 @@ If mime is null or undefined, then the mime type will be inferred from the file
|
325
|
333
|
<img src="img/android-notification2.png" width="256">
|
326
|
334
|
|
327
|
335
|
|
328
|
|
-If you want to download notification or make the stored file visible like the above. You have to add some options to `config`.
|
|
336
|
+If you want to display a notification when file's completely download to storage (as the above), or make the downloaded file visible in "Downloads" app. You have to add some options to `config`.
|
329
|
337
|
|
330
|
338
|
```js
|
331
|
339
|
RNFetchBlob.config({
|
|
@@ -486,7 +494,7 @@ You can also grouping requests by using `session` API, and use `dispose` to remo
|
486
|
494
|
|
487
|
495
|
Config API was introduced in `v0.5.0` which provides some options for the `fetch` task.
|
488
|
496
|
|
489
|
|
-see [RNFetchBlobConfig](#user-content-rnfetchblobconfig)
|
|
497
|
+see [RNFetchBlobConfig](#user-content-configoptionsrnfetchblobconfigfetch)
|
490
|
498
|
|
491
|
499
|
### `fetch(method, url, headers, body):Promise<FetchBlobResponse>`
|
492
|
500
|
|
|
@@ -514,9 +522,18 @@ Register on progress event handler for a fetch request.
|
514
|
522
|
|
515
|
523
|
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.
|
516
|
524
|
|
517
|
|
-#### `session(name:string):RNFetchBlobSession`
|
|
525
|
+### `wrap(path:string):string`
|
|
526
|
+
|
|
527
|
+Simply prepend `RNFetchBlob-file://` to a path, this make the file path becomes recognizable to native `fetch` method.
|
518
|
528
|
|
519
|
|
-TODO
|
|
529
|
+### `session(name:string):RNFetchBlobSession`
|
|
530
|
+
|
|
531
|
+Session API helps managing cached files, the following code, will try to return an existing session object with the given `name`, if it does not exist, create one.
|
|
532
|
+
|
|
533
|
+```js
|
|
534
|
+RNFetchBlob.session('mysession')
|
|
535
|
+```
|
|
536
|
+see [Class RNFetchBlobSession](#user-content-rnfetchblobsession) for usage.
|
520
|
537
|
|
521
|
538
|
### `base64`
|
522
|
539
|
|
|
@@ -813,16 +830,22 @@ A `session` is an object that helps you manage files. It simply main a list of f
|
813
|
830
|
|
814
|
831
|
| Version | |
|
815
|
832
|
|---|---|
|
|
833
|
+| 0.5.2 | Fix improper url params bug [#26](https://github.com/wkh237/react-native-fetch-blob/issues/26) and change IOS HTTP implementation from NSURLConnection to NSURLSession |
|
816
|
834
|
| 0.5.0 | Upload/download with direct access to file storage, and also added file access APIs |
|
817
|
835
|
| 0.4.2 | Supports upload/download progress |
|
818
|
836
|
| 0.4.1 | Fixe upload form-data missing file extension problem on Android |
|
819
|
837
|
| 0.4.0 | Add base-64 encode/decode library and API |
|
820
|
838
|
| ~0.3.0 | Upload/Download octet-stream and form-data |
|
821
|
839
|
|
822
|
|
-### TODOs
|
|
840
|
+### TODO
|
823
|
841
|
|
824
|
842
|
* Customizable Multipart MIME type
|
825
|
|
-* Improvement of file cache management API
|
|
843
|
+
|
|
844
|
+### In Progress (v0.6.0)
|
|
845
|
+
|
|
846
|
+* Add `readFile` and `WriteFile` API to `fs`
|
|
847
|
+* Add file access API for direct access RNFetchBlobResponse when the response is a file path
|
|
848
|
+* Android Download Manager file download API
|
826
|
849
|
|
827
|
850
|
### Development
|
828
|
851
|
|