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

Commit

Permalink
#44 wip commit
Browse files Browse the repository at this point in the history
  • Loading branch information
wkh237 committed Jul 19, 2016
2 parents f612f35 + 559bbd4 commit 0db806a
Show file tree
Hide file tree
Showing 16 changed files with 380 additions and 81 deletions.
4 changes: 3 additions & 1 deletion .github/ISSUE_TEMPLATE
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
Hi ! Thank you for reporting an issue, but we would like to remind you, we have a trouble shooting page in our wiki. You may need to take a look on that page, perhaps the answer is just right there :p
Hi ! Thank you for reporting an issue, but we would like to remind you, we have a trouble shooting page in our wiki. You may want to take a look on that page :p

* issues which have been tagged as 'needs feedback', will be closed after 2 weeks if receive no feedbacks.
72 changes: 54 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?maxAge=86400&style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000&style=flat-square)]() [![npm](https://img.shields.io/badge/inProgress-0.7.0-yellow.svg?style=flat-square)](https://github.com/wkh237/react-native-fetch-blob/milestones)
# react-native-fetch-blob [![release](https://img.shields.io/github/release/wkh237/react-native-fetch-blob.svg?maxAge=86400&style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) [![npm](https://img.shields.io/npm/v/react-native-fetch-blob.svg?style=flat-square)](https://www.npmjs.com/package/react-native-fetch-blob) ![](https://img.shields.io/badge/PR-Welcome-brightgreen.svg?style=flat-square) [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000&style=flat-square)]()

A module provides upload, download, and files access API. Supports file stream read/write for process large files.

**Rationale**

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).

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.

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.

**Backward Compatible**

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.
A project committed to make file acess and transfer easier and effiecient for React Native developers.

## TOC

* [About](#user-content-about)
* [Backward Compatible](#user-content-backward-compatible)
* [Installation](#user-content-installation)
* [Recipes](#user-content-recipes)
* [Download file](#user-content-download-example--fetch-files-that-needs-authorization-token)
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
* [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
* [Upload/Download progress](#user-content-uploaddownload-progress)
* [Cancel HTTP request](#user-content-cancel-request)
* [Android Media Scanner, and Download Manager Support](#user-content-android-media-scanner-and-download-manager-support)
* [File access](#user-content-file-access)
* [File stream](#user-content-file-stream)
* [Manage cached files](#user-content-cache-file-management)
* [Self-Signed SSL Server](#user-content-self-signed-ssl-server)
* [API References](https://github.com/wkh237/react-native-fetch-blob/wiki/Fetch-API)
* [Trouble Shooting](https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting)
* [Development](#user-content-development)

## About

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).

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.

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.

## Backward Compatible

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.

## Installation

Install package from npm
Expand All @@ -44,9 +47,17 @@ Link package using [rnpm](https://github.com/rnpm/rnpm)
rnpm link
```

### For React Native >= 0.29.0 (Android)
### Manually link package

If rnpm link command failed to link the package automatically, you might try manually link the package.

Edit add package to`android/settings.gradle`

> 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.
```diff
include ':app'
+ include ':react-native-fetch-blob'
+ project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir,' ../node_modules/react-native-fetch-blob/android')
```

Add this code to `MainApplication.java`

Expand All @@ -63,6 +74,7 @@ protected List<ReactPackage> getPackages() {
};
...
```
> 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)
**Grant Permission to External storage for Android 5.0 or lower**

Expand Down Expand Up @@ -317,13 +329,18 @@ What if you want to upload a file in some field ? Just like [upload a file from

#### Upload/Download progress

In `version >= 0.4.2` it is possible to know the upload/download progress. On Android, only download progress is supported. See [wiki](https://github.com/wkh237/react-native-fetch-blob/wiki/Fetch-API#fetchprogresseventlistenerpromisernfetchblobresponse) for more information.
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.

```js
RNFetchBlob.fetch('POST', 'http://www.example.com/upload', {
... some headers,
'Content-Type' : 'octet-stream'
}, base64DataString)
// listen to upload progress event
.uploadProgress((written, total) => {
console.log('uploaded', written / total)
})
// listen to download progress event
.progress((received, total) => {
console.log('progress', received / total)
})
Expand All @@ -335,6 +352,23 @@ In `version >= 0.4.2` it is possible to know the upload/download progress. On An
})
```

#### Cancel Request

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.

```js
let task = RNFetchBlob.fetch('GET', 'http://example.com/file/1')

task.then(() => { ... })
// handle request cancelled rejection
.catch((err) => {
console.log(err)
})
// cancel the request, the callback function is optional
task.cancel((err) => { ... })

```

#### Android Media Scanner, and Download Manager Support

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`.
Expand Down Expand Up @@ -569,6 +603,8 @@ RNFetchBlob.config({

| Version | |
|---|---|
| 0.7.1 | Fix #57 ios module could not compile on ios version <= 9.3 |
| 0.7.0 | Add support of Android upload progress, and remove AsyncHttpClient dependency from Android native implementation. |
| 0.6.4 | Fix rnpm link script. |
| 0.6.3 | Fix performance issue on IOS, increase max concurrent request limitation from 1. |
| 0.6.2 | Add support of asset file and camera roll files, Support custom MIME type when sending multipart request, thanks @smartt |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "fetchblob",
"version": "0.6.4",
"version": "0.7.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
Expand Down
Loading

0 comments on commit 0db806a

Please sign in to comment.