Skip to content
This repository was archived by the owner on Mar 16, 2019. It is now read-only.

Commit 63f0b41

Browse files
committed
Initial commit
0 parents  commit 63f0b41

File tree

21 files changed

+1070
-0
lines changed

21 files changed

+1070
-0
lines changed

README.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# react-native-fetch-blob
2+
3+
Since react-native `fetch` API [does not marshals `Blob` data in request/response
4+
body](https://github.com/facebook/react-native/issues/854), I made this plugin which send/receive HTTP request/response that have `Blob` body content.
5+
6+
This plugin simply convert given base64 string into blob format and send the request in a new thread. The process is done in native code, it supports both Android (uses awesome library [AsyncHttpClient](https://github.com/AsyncHttpClient/async-http-client])) and IOS.
7+
8+
If you're dealing with image or file server that requires an `Authorization` token in the header, you might try this plugin (this is also the reason why I made this plugin), the source code is very simple, just an implementation of native HTTP request.
9+
10+
## Installation
11+
12+
Install package from npm
13+
14+
```sh
15+
npm install --save react-native-fetch-blob
16+
```
17+
18+
Link package using [rnpm](https://github.com/rnpm/rnpm)
19+
20+
```sh
21+
rnpm link
22+
```
23+
24+
## API
25+
26+
#### `Promise<FetchBlobResponse> fetch(url, headers, body)`
27+
28+
Send a HTTP request uses given headers and body, and return a Promise.
29+
30+
#### url:`string` Required
31+
HTTP request destination url.
32+
#### headers:`object` (Optional)
33+
Headers of HTTP request, value of #### headers should be `stringified`.
34+
#### body:`string` (Optional)
35+
Body of the HTTP request, body MUST be a BASE64 string, this string will be converted into byte array in native code.
36+
37+
### FetchBlobResponse
38+
39+
When `fetch` success, it resolve a `FetchBlobResponse` object as first argument. `FetchBlobResponse` object has the following methods (these method are synchronous, so you might take quite a performance impact if the file is big):
40+
41+
#### base64():string
42+
returns base64 string of response data (done in native context)
43+
#### json():object
44+
returns json parsed object (done in js context)
45+
#### text():string
46+
returns decoded base64 string (done in js context)
47+
#### blob():Blob
48+
returns Blob object (one in js context)
49+
50+
## Usage
51+
52+
```js
53+
import RNFetchBlob from 'react-native-fetch-blob'
54+
```
55+
#### Download : Fetch files that needs authorization token
56+
57+
```js
58+
59+
// send http request in a new thread (using native code)
60+
RNFetchBlob.fetch('GET', 'http://www.example.com/images/img1.png', {
61+
Authorization : 'Bearer access-token...',
62+
// more headers ..
63+
})
64+
// when response status code is 200
65+
.then((res) => {
66+
// the conversion is done in native code
67+
let base64Str = res.base64()
68+
// the following conversions are done in js, it's SYNC
69+
let blob = res.blob()
70+
let text = res.text()
71+
let json = res.json()
72+
73+
})
74+
// Status code is not 200
75+
.catch((errorMessage, statusCode) => {
76+
// error handling
77+
})
78+
```
79+
80+
#### Upload : Dropbox [files-upload](https://www.dropbox.com/developers/documentation/http/documentation#files-upload) API
81+
82+
`react-native-fetch-blob` will convert the base64 string in `body` to binary format in native code.
83+
84+
```js
85+
86+
RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
87+
Authorization : "Bearer access-token...",
88+
'Dropbox-API-Arg': JSON.stringify({
89+
path : '/img-from-react-native.png',
90+
mode : 'add',
91+
autorename : true,
92+
mute : false
93+
}),
94+
'Content-Type' : 'application/octet-stream',
95+
}, base64ImageString)
96+
.then((res) => {
97+
console.log(res.text())
98+
})
99+
.catch((err) => {
100+
// error handling ..
101+
})
102+
```
103+
104+
### TODO
105+
106+
* Save file to storage
107+
* Native async format converion

android/.DS_Store

6 KB
Binary file not shown.

android/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/build

android/build.gradle

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
apply plugin: 'com.android.library'
2+
3+
android {
4+
compileSdkVersion 23
5+
buildToolsVersion "23.0.3"
6+
defaultConfig {
7+
minSdkVersion 16
8+
targetSdkVersion 23
9+
versionCode 1
10+
versionName "1.0"
11+
}
12+
buildTypes {
13+
release {
14+
minifyEnabled false
15+
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
16+
}
17+
}
18+
productFlavors {
19+
}
20+
}
21+
22+
dependencies {
23+
compile 'com.facebook.react:react-native:+'
24+
compile 'com.loopj.android:android-async-http:1.4.9'
25+
}

android/proguard-rules.pro

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Add project specific ProGuard rules here.
2+
# By default, the flags in this file are appended to flags specified
3+
# in /Users/xeiyan/Library/Android/sdk/tools/proguard/proguard-android.txt
4+
# You can edit the include path and order by changing the proguardFiles
5+
# directive in build.gradle.
6+
#
7+
# For more details, see
8+
# http://developer.android.com/guide/developing/tools/proguard.html
9+
10+
# Add any project specific keep options here:
11+
12+
# If your project uses WebView with JS, uncomment the following
13+
# and specify the fully qualified class name to the JavaScript interface
14+
# class:
15+
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
16+
# public *;
17+
#}

0 commit comments

Comments
 (0)