|
|
|
|
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)
|
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
|
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).
|
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
|
|
10
|
|
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.
|
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
|
## Usage
|
22
|
## Usage
|
14
|
|
23
|
|
15
|
* [Installation](#user-content-installation)
|
24
|
* [Installation](#user-content-installation)
|
|
|
|
|
17
|
* [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
|
26
|
* [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
|
18
|
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
|
27
|
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
|
19
|
* [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
|
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
|
* [API](#user-content-api)
|
30
|
* [API](#user-content-api)
|
21
|
-* [Test and Development](#user-content-test-and-development)
|
|
|
22
|
-* [Milestones](#user-content-milestones)
|
|
|
23
|
|
31
|
|
24
|
## Installation
|
32
|
## Installation
|
25
|
|
33
|
|
|
|
|
|
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
|
## API
|
148
|
## API
|
120
|
|
149
|
|
121
|
-#### `fetch(method, url, headers, body):Promise<FetchBlobResponse> `
|
|
|
|
|
150
|
+#### `fetch(method, url, headers, body):Promise<FetchBlobResponse>`
|
122
|
|
151
|
|
123
|
Send a HTTP request uses given headers and body, and return a Promise.
|
152
|
Send a HTTP request uses given headers and body, and return a Promise.
|
124
|
|
153
|
|
|
|
|
|
130
|
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).
|
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
|
#### body:`string | Array<Object>` (Optional)
|
160
|
#### body:`string | Array<Object>` (Optional)
|
132
|
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.
|
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
|
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`.
|
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
|
#### `base64`
|
172
|
#### `base64`
|
137
|
|
173
|
|
138
|
A helper object simply uses [base-64](https://github.com/mathiasbynens/base64) for decode and encode BASE64 data.
|
174
|
A helper object simply uses [base-64](https://github.com/mathiasbynens/base64) for decode and encode BASE64 data.
|
|
|
|
|
154
|
returns decoded base64 string (done in js context)
|
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
|
* Save file to storage directly
|
195
|
* Save file to storage directly
|
|
|
196
|
+* Upload file from storage directly
|
166
|
* Custom MIME type in form data
|
197
|
* Custom MIME type in form data
|
167
|
-* Upload/Download progress report
|
|
|