|
@@ -41,7 +41,7 @@ rn-fetch-blob version 0.10.16 is only compatible with react native 0.60 and up.
|
41
|
41
|
|
42
|
42
|
## About
|
43
|
43
|
|
44
|
|
-This project was started in the cause of solving issue [facebook/react-native#854](https://github.com/facebook/react-native/issues/854), React Native's lacks of `Blob` implementation which results into problems when transferring binary data.
|
|
44
|
+This project was started in the cause of solving issue [facebook/react-native#854](https://github.com/facebook/react-native/issues/854), React Native's lacks of `Blob` implementation which results into problems when transferring binary data.
|
45
|
45
|
|
46
|
46
|
It is committed to making file access and transfer easier and more efficient for React Native developers. We've implemented highly customizable filesystem and network module which plays well together. For example, developers can upload and download data directly from/to storage, which is more efficient, especially for large files. The file system supports file stream, so you don't have to worry about OOM problem when accessing large files.
|
47
|
47
|
|
|
@@ -116,8 +116,8 @@ If you're going to access external storage (say, SD card storage) for `Android 5
|
116
|
116
|
|
117
|
117
|
<uses-permission android:name="android.permission.INTERNET" />
|
118
|
118
|
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
119
|
|
-+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
|
120
|
|
-+ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
|
119
|
++ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
|
|
120
|
++ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
121
|
121
|
+ <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
|
122
|
122
|
...
|
123
|
123
|
|
|
@@ -129,10 +129,18 @@ Also, if you're going to use `Android Download Manager` you have to add this to
|
129
|
129
|
<intent-filter>
|
130
|
130
|
<action android:name="android.intent.action.MAIN" />
|
131
|
131
|
<category android:name="android.intent.category.LAUNCHER" />
|
132
|
|
-+ <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
|
|
132
|
++ <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
|
133
|
133
|
</intent-filter>
|
134
|
134
|
```
|
135
|
135
|
|
|
136
|
+If you are going to use the `wifiOnly` flag, you need to add this to `AndroidManifest.xml`
|
|
137
|
+
|
|
138
|
+```diff
|
|
139
|
++ <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
|
|
140
|
+ ...
|
|
141
|
+
|
|
142
|
+```
|
|
143
|
+
|
136
|
144
|
**Grant Access Permission for Android 6.0**
|
137
|
145
|
|
138
|
146
|
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 for Android 6.0+ devices. To grant permissions in runtime, you might use [PermissionAndroid API](https://facebook.github.io/react-native/docs/permissionsandroid.html).
|
|
@@ -168,7 +176,7 @@ To sum up:
|
168
|
176
|
|
169
|
177
|
- To send a form data, the `Content-Type` header does not matter. When the body is an `Array` we will set proper content type for you.
|
170
|
178
|
- To send binary data, you have two choices, use BASE64 encoded string or path points to a file contains the body.
|
171
|
|
- - 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.
|
|
179
|
+ - 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.
|
172
|
180
|
- Otherwise, if a string starts with `RNFetchBlob-file://` (which can simply be 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 the request body.
|
173
|
181
|
- To send the body as-is, simply use a `Content-Type` header not containing `;BASE64` or `application/octet`.
|
174
|
182
|
|
|
@@ -189,7 +197,7 @@ RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', {
|
189
|
197
|
})
|
190
|
198
|
.then((res) => {
|
191
|
199
|
let status = res.info().status;
|
192
|
|
-
|
|
200
|
+
|
193
|
201
|
if(status == 200) {
|
194
|
202
|
// the conversion is done in native code
|
195
|
203
|
let base64Str = res.base64()
|
|
@@ -290,7 +298,7 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
290
|
298
|
'Content-Type' : 'application/octet-stream',
|
291
|
299
|
// here's the body you're going to send, should be a BASE64 encoded string
|
292
|
300
|
// (you can use "base64"(refer to the library 'mathiasbynens/base64') APIs to make one).
|
293
|
|
- // The data will be converted to "byte array"(say, blob) before request sent.
|
|
301
|
+ // The data will be converted to "byte array"(say, blob) before request sent.
|
294
|
302
|
}, base64ImageString)
|
295
|
303
|
.then((res) => {
|
296
|
304
|
console.log(res.text())
|
|
@@ -648,7 +656,7 @@ RNFetchBlob.fs.readStream(
|
648
|
656
|
ifstream.onError((err) => {
|
649
|
657
|
console.log('oops', err)
|
650
|
658
|
})
|
651
|
|
- ifstream.onEnd(() => {
|
|
659
|
+ ifstream.onEnd(() => {
|
652
|
660
|
<Image source={{ uri : 'data:image/png,base64' + data }}
|
653
|
661
|
})
|
654
|
662
|
})
|
|
@@ -673,7 +681,7 @@ RNFetchBlob.fs.writeStream(
|
673
|
681
|
.catch(console.error)
|
674
|
682
|
```
|
675
|
683
|
|
676
|
|
-or
|
|
684
|
+or
|
677
|
685
|
|
678
|
686
|
```js
|
679
|
687
|
RNFetchBlob.fs.writeStream(
|
|
@@ -749,7 +757,7 @@ You can also group requests by using `session` API and use `dispose` to remove t
|
749
|
757
|
.then((res) => {
|
750
|
758
|
// set session of a response
|
751
|
759
|
res.session('foo')
|
752
|
|
- })
|
|
760
|
+ })
|
753
|
761
|
|
754
|
762
|
RNFetchblob.config({
|
755
|
763
|
// you can also set session beforehand
|
|
@@ -759,7 +767,7 @@ You can also group requests by using `session` API and use `dispose` to remove t
|
759
|
767
|
.fetch('GET', 'http://example.com/download/file')
|
760
|
768
|
.then((res) => {
|
761
|
769
|
// ...
|
762
|
|
- })
|
|
770
|
+ })
|
763
|
771
|
|
764
|
772
|
// or put an existing file path to the session
|
765
|
773
|
RNFetchBlob.session('foo').add('some-file-path')
|
|
@@ -794,6 +802,22 @@ RNFetchBlob.config({
|
794
|
802
|
})
|
795
|
803
|
```
|
796
|
804
|
|
|
805
|
+### WiFi only requests
|
|
806
|
+
|
|
807
|
+If you wish to only route requests through the Wifi interface, set the below configuration.
|
|
808
|
+Note: On Android, the `ACCESS_NETWORK_STATE` permission must be set, and this flag will only work
|
|
809
|
+on API version 21 (Lollipop, Android 5.0) or above. APIs below 21 will ignore this flag.
|
|
810
|
+
|
|
811
|
+```js
|
|
812
|
+RNFetchBlob.config({
|
|
813
|
+ wifiOnly : true
|
|
814
|
+})
|
|
815
|
+.fetch('GET', 'https://mysite.com')
|
|
816
|
+.then((resp) => {
|
|
817
|
+ // ...
|
|
818
|
+})
|
|
819
|
+```
|
|
820
|
+
|
797
|
821
|
## Web API Polyfills
|
798
|
822
|
|
799
|
823
|
After `0.8.0` we've made some [Web API polyfills](https://github.com/joltup/rn-fetch-blob/wiki/Web-API-Polyfills-(experimental)) that makes some browser-based library available in RN.
|