You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 16, 2019. It is now read-only.
A module provides upload, download, and files access API. Supports file stream read/write for process large files.
4
4
5
5
## [Please check our github for updated document](https://github.com/wkh237/react-native-fetch-blob)
6
6
7
-
**Why do we need this**
8
-
9
-
React Native does not support `Blob` object at this moment, which means if you're going to send/receive binary data via `fetch` API, that might not work as you expect. See [facebook/react-native#854](https://github.com/facebook/react-native/issues/854).
10
-
11
-
For some use cases, you might get into trouble. For example, displaying an image that requires a specific field in headers (ex. "Authorization : Bearer ...") or body, so you can't just pass the image uri to `Image` component because that will probably returns a 401 response. Or you're going to upload binary data which generated from JS, the server will get an empry body due to [this issue](https://github.com/facebook/react-native/issues/854). With help of APIs provided by this module, you can send HTTP request with any headers, and decide how to handle the response/reqeust data without worry about if it is not supported by `fetch` API. The response data can be just simply converted into BASE64 string, or stored to a file directly so that you can read it by using file access APIs such as readFile, readStream.
12
-
13
-
This module was designed to be a substitution of `Blob`, there's a set of APIs including basic file system CRUD method, and file stream reader/writer. Also it has a special `fetch` implementation that supports binary request/response body.
14
-
15
-
**Backward Compatible**
16
-
17
-
All updates are `backward-compatible` generally you don't have to change existing code unless you're going to use new APIs. But we recommend pre `0.5.0` users consider upgrade the package to latest version, since we have introduced new APIs can either `upload` or `download` files simply using a file path. It's much more memory efficent in some use case. We've also introduced `fs` APIs for access files, and `file stream` API that helps you read/write files (especially for **large ones**), see [Examples](#user-content-recipes) bellow. This module implements native methods, supports both Android (uses awesome native library [AsyncHttpClient](https://github.com/AsyncHttpClient/async-http-client])) and IOS.
React Native does not support `Blob` object at this moment, which means if you're going to send/receive binary data via `fetch` API, that might not work as you expect. See [facebook/react-native#854](https://github.com/facebook/react-native/issues/854).
29
+
30
+
For some use cases, you might get into trouble. For example, displaying an image that requires a specific field in headers (ex. "Authorization : Bearer ...") or body, so you can't just pass the image uri to `Image` component because that will probably returns a 401 response. Or you're going to upload binary data which generated from JS, the server will get an empry body due to [this issue](https://github.com/facebook/react-native/issues/854). With help of APIs provided by this module, you can send HTTP request with any headers, and decide how to handle the response/reqeust data without worry about if it is not supported by `fetch` API. The response data can be just simply converted into BASE64 string, or stored to a file directly so that you can read it by using file access APIs such as readFile, readStream.
31
+
32
+
This module was designed to be a substitution of `Blob`, there's a set of APIs including basic file system CRUD method, and file stream reader/writer. Also it has a special `fetch` implementation that supports binary request/response body.
33
+
34
+
## Backward Compatible
35
+
36
+
All updates are `backward-compatible` generally you don't have to change existing code unless you're going to use new APIs. But we recommend pre `0.5.0` users consider upgrade the package to latest version, since we have introduced new APIs can either `upload` or `download` files simply using a file path. It's much more memory efficent in some use case. We've also introduced `fs` APIs for access files, and `file stream` API that helps you read/write files (especially for **large ones**), see [Examples](#user-content-recipes) bellow. This module implements native methods, supports both Android (uses same native library as offical RN fetch API [OkHttp](https://github.com/square/okhttp)) and IOS.
37
+
35
38
## Installation
36
39
37
40
Install package from npm
@@ -46,11 +49,32 @@ Link package using [rnpm](https://github.com/rnpm/rnpm)
46
49
rnpm link
47
50
```
48
51
52
+
### For React Native >= 0.29.0 (Android)
53
+
54
+
> If you're using react-native >= `0.29.0`, the package might not be able to link through `rnpm link`, and you might see an error screen similar to [#51](https://github.com/wkh237/react-native-fetch-blob/issues/51), this is because a [a bug in 0.29.0](https://github.com/facebook/react-native/commit/4dabb575b1b311ba541fae7eabbd49f08b5391b3), someone has already fixed it, but the solution does not work on our project, you may have to manually add the package yourself.
55
+
56
+
Add this code to `MainApplication.java`
57
+
58
+
```diff
59
+
...
60
+
+ import com.RNFetchBlob.RNFetchBlobPackage;
61
+
...
62
+
protected List<ReactPackage> getPackages() {
63
+
return Arrays.<ReactPackage>asList(
64
+
new MainReactPackage(),
65
+
+ new RNFetchBlobPackage()
66
+
);
67
+
}
68
+
};
69
+
...
70
+
```
71
+
> If you still having problem on installing this package, please check the [trouble shooting page](https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting) or [file an issue](https://github.com/wkh237/react-native-fetch-blob/issues/new)
72
+
49
73
**Grant Permission to External storage for Android 5.0 or lower**
50
74
51
-
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).
75
+
Mechanism about granting Android permissions has slightly different since Android 6.0 released, please refer to [Official Document](https://developer.android.com/training/permissions/requesting.html).
52
76
53
-
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`.
77
+
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 `AndroidManifest.xml`.
The simplest way is give a `fileCach` option to config, and set it to `true`. This will let the incoming response data stored in a temporary path **wihout** any file extension.
139
+
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.
116
140
117
141
**These files won't be removed automatically, please refer to [Cache File Management](#user-content-cache-file-management)**
118
142
@@ -151,7 +175,7 @@ RNFetchBlob
151
175
console.log('The file saved to ', res.path())
152
176
// Beware that when using a file path as Image source on Android,
153
177
// you must prepend "file://"" before the file path
154
-
imageView =<Image source={{ uri :Platform.OS==='android'?'file://':''+res.path() }}/>
178
+
imageView =<Image source={{ uri :Platform.OS==='android'?'file://'+res.path() :''+res.path() }}/>
155
179
})
156
180
```
157
181
@@ -299,13 +323,18 @@ What if you want to upload a file in some field ? Just like [upload a file from
299
323
300
324
#### Upload/Download progress
301
325
302
-
In `version >= 0.4.2` it is possible to know the upload/download progress. On Anroid, only download progress is supported. See [wiki](https://github.com/wkh237/react-native-fetch-blob/wiki/Fetch-API#fetchprogresseventlistenerpromisernfetchblobresponse) for more information.
326
+
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.
@@ -317,6 +346,23 @@ In `version >= 0.4.2` it is possible to know the upload/download progress. On An
317
346
})
318
347
```
319
348
349
+
#### Cancel Request
350
+
351
+
After `0.7.0` it is possible to cancel a HTTP request. When the request cancel, it will definately throws an promise rejection, be sure to catch it.
352
+
353
+
```js
354
+
let task =RNFetchBlob.fetch('GET', 'http://example.com/file/1')
355
+
356
+
task.then(() => { ... })
357
+
// handle request cancelled rejection
358
+
.catch((err) => {
359
+
console.log(err)
360
+
})
361
+
// cancel the request, the callback function is optional
362
+
task.cancel((err) => { ... })
363
+
364
+
```
365
+
320
366
#### Android Media Scanner, and Download Manager Support
321
367
322
368
If you want to make a file in `External Storage` becomes visible in Picture, Downloads, or other built-in apps, you will have to use `Media Scanner` or `Download Manager`.
@@ -403,7 +449,7 @@ RNFetchBlob.config({
403
449
404
450
File access APIs were made when developing `v0.5.0`, which helping us write tests, and was not planned to be a part of this module. However we realized that, it's hard to find a great solution to manage cached files, every one who use this moudle may need these APIs for there cases.
405
451
406
-
Before get started using file APIs we recommend read [Differences between File Source](https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#differences-between-file-source) first.
452
+
Before start using file APIs, we recommend read [Differences between File Source](https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API#differences-between-file-source) first.
0 commit comments