|
| 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 |
0 commit comments