From 36a8b526ba8301b4e4c9b9619e025a1d3018b130 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 21:43:34 +0900 Subject: [PATCH 01/11] add android --- .gitignore | 1 + README.md | 11 +- RNUploader/RNUploader.ios.js | 19 --- android/build.gradle | 35 +++++ android/src/main/AndroidManifest.xml | 5 + .../filetransfer/FileTransferModule.java | 143 ++++++++++++++++++ .../filetransfer/FileTransferPackage.java | 34 +++++ index.android.js | 15 ++ index.ios.js | 28 ++++ {RNUploader => ios}/RNUploader.m | 0 .../RNUploader.xcodeproj/project.pbxproj | 0 .../contents.xcworkspacedata | 0 package.json | 3 +- 13 files changed, 270 insertions(+), 24 deletions(-) delete mode 100644 RNUploader/RNUploader.ios.js create mode 100644 android/build.gradle create mode 100644 android/src/main/AndroidManifest.xml create mode 100644 android/src/main/java/com/burlap/filetransfer/FileTransferModule.java create mode 100644 android/src/main/java/com/burlap/filetransfer/FileTransferPackage.java create mode 100644 index.android.js create mode 100644 index.ios.js rename {RNUploader => ios}/RNUploader.m (100%) rename {RNUploader => ios}/RNUploader.xcodeproj/project.pbxproj (100%) rename {RNUploader => ios}/RNUploader.xcodeproj/project.xcworkspace/contents.xcworkspacedata (100%) diff --git a/.gitignore b/.gitignore index d07b789..48bf865 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,4 @@ xcuserdata *.xccheckout *.moved-aside *.xcuserstate +*.vscode \ No newline at end of file diff --git a/README.md b/README.md index 15b1653..9d6edbb 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ doUpload(){ { name: 'file[]', filename: 'image2.gif', - filepath: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7", + filepath: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7", // base64 only support ios filetype: 'image/gif', }, ]; @@ -61,9 +61,10 @@ doUpload(){ let opts = { url: 'http://my.server/api/upload', files: files, - method: 'POST', // optional: POST or PUT - headers: { 'Accept': 'application/json' }, // optional - params: { 'user_id': 1 }, // optional + method: 'POST', // optional: POST or PUT, only support ios + headers: { 'Accept': 'application/json' }, // optional, only support ios + params: { 'user_id': 1 }, // optional, only support ios + data: {title: 'awesome', created: '2016-06-07'} //opional, only support android }; RNUploader.upload( opts, (err, response) => { @@ -77,6 +78,8 @@ doUpload(){ let json = JSON.parse( responseString ); console.log('upload complete with status ' + status); + + // android's response is response.body.string. }); } diff --git a/RNUploader/RNUploader.ios.js b/RNUploader/RNUploader.ios.js deleted file mode 100644 index 50c8be0..0000000 --- a/RNUploader/RNUploader.ios.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @providesModule RNUploader - * @flow - */ -'use strict'; - -var NativeRNUploader = require('NativeModules').RNUploader; - -/** - * High-level docs for the RNUploader iOS API can be written here. - */ - -var RNUploader = { - test: function() { - NativeRNUploader.test(); - } -}; - -module.exports = RNUploader; \ No newline at end of file diff --git a/android/build.gradle b/android/build.gradle new file mode 100644 index 0000000..02300b9 --- /dev/null +++ b/android/build.gradle @@ -0,0 +1,35 @@ +buildscript { + repositories { + jcenter() + maven { url "https://jitpack.io" } + } + + dependencies { + classpath 'com.android.tools.build:gradle:1.1.3' + } +} + +apply plugin: 'com.android.library' + +android { + compileSdkVersion 23 + buildToolsVersion "23.0.1" + + defaultConfig { + minSdkVersion 16 + targetSdkVersion 23 + versionCode 1 + versionName "1.0" + } +} + +repositories { + maven { url "https://jitpack.io" } +} + +dependencies { + compile 'com.android.support:appcompat-v7:23.+' + compile 'com.facebook.react:react-native:0.16.+' + compile 'com.squareup.okhttp3:okhttp:3.3.1' + compile fileTree(dir: 'libs', include: ['*.jar']) +} diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml new file mode 100644 index 0000000..4add1ea --- /dev/null +++ b/android/src/main/AndroidManifest.xml @@ -0,0 +1,5 @@ + + + diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java new file mode 100644 index 0000000..06ca828 --- /dev/null +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -0,0 +1,143 @@ +package com.burlap.filetransfer; + +import android.app.DownloadManager; +import android.content.Context; +import android.util.Log; +import android.net.Uri; + +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.ReactContext; +import com.facebook.react.bridge.ReactContextBaseJavaModule; +import com.facebook.react.bridge.ReactMethod; +import com.facebook.react.bridge.Callback; +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.bridge.ReadableMapKeySetIterator; +import com.facebook.react.bridge.ReadableType; + +import org.json.*; + +import java.util.Map; +import java.io.File; +import java.io.FileInputStream; +import java.io.FileOutputStream; +import java.io.IOException; +import java.io.FileNotFoundException; +import java.util.HashMap; + +import okhttp3.MediaType; +import okhttp3.MultipartBody; +import okhttp3.OkHttpClient; +import okhttp3.Request; +import okhttp3.RequestBody; +import okhttp3.Response; + + +public class FileTransferModule extends ReactContextBaseJavaModule { + + private final OkHttpClient client = new OkHttpClient(); + + private static String siteUrl = "http://joinbevy.com"; + private static String apiUrl = "http://api.joinbevy.com"; + private static Integer port = 80; + + private String TAG = "ImageUploadAndroid"; + + public FileTransferModule(ReactApplicationContext reactContext) { + super(reactContext); + } + + @Override + public String getName() { + // match up with the IOS name + return "FileTransfer"; + } + + @ReactMethod + public void upload(ReadableMap options, Callback complete) { + + final Callback completeCallback = complete; + + try { + MultipartBody.Builder mRequestBody = new MultipartBody.Builder() + .setType(MultipartBody.FORM); + + ReadableArray files = options.getArray("files"); + String url = options.getString("url"); + + ReadableMap data = options.getMap("data"); + ReadableMapKeySetIterator iterator = data.keySetIterator(); + + while(iterator.hasNextKey()){ + String key = iterator.nextKey(); + if(ReadableType.String.equals(data.getType(key))) { + mRequestBody.addFormDataPart(key, data.getString(key)); + } + } + + + + if(files.size() != 0){ + for(int fileIndex=0 ; fileIndex createNativeModules(ReactApplicationContext reactContext) { + return Arrays.asList( + new FileTransferModule(reactContext) + ); + } + + + @Override + public List> createJSModules() { + return Collections.emptyList(); + } + + @Override + public List createViewManagers(ReactApplicationContext reactContext) { + return Arrays.asList(); + } +} diff --git a/index.android.js b/index.android.js new file mode 100644 index 0000000..a279f82 --- /dev/null +++ b/index.android.js @@ -0,0 +1,15 @@ +'use strict'; + +var { NativeModules } = require('react-native'); +var FileTransfer = NativeModules.FileTransfer + +class RNUploader { + constructor() { + } + + static upload(opts, callback) { + FileTransfer.upload(opts, callback); + } +} + +module.exports = RNUploader; \ No newline at end of file diff --git a/index.ios.js b/index.ios.js new file mode 100644 index 0000000..1a33044 --- /dev/null +++ b/index.ios.js @@ -0,0 +1,28 @@ +/** + * @providesModule RNUploader + * @flow + */ +'use strict'; +var { NativeModules } = require('react-native'); +var NativeRNUploader = NativeModules.RNUploader; + +/** + * High-level docs for the RNUploader iOS API can be written here. + */ + +class RNUploader { + constructor() { + } + + static upload(opts, callback) { + NativeRNUploader.upload(opts, callback); + } + static cancel(){ + NativeRNUploader.cancel() + } + static test() { + NativeRNUploader.test() + } +} + +module.exports = RNUploader; \ No newline at end of file diff --git a/RNUploader/RNUploader.m b/ios/RNUploader.m similarity index 100% rename from RNUploader/RNUploader.m rename to ios/RNUploader.m diff --git a/RNUploader/RNUploader.xcodeproj/project.pbxproj b/ios/RNUploader.xcodeproj/project.pbxproj similarity index 100% rename from RNUploader/RNUploader.xcodeproj/project.pbxproj rename to ios/RNUploader.xcodeproj/project.pbxproj diff --git a/RNUploader/RNUploader.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/ios/RNUploader.xcodeproj/project.xcworkspace/contents.xcworkspacedata similarity index 100% rename from RNUploader/RNUploader.xcodeproj/project.xcworkspace/contents.xcworkspacedata rename to ios/RNUploader.xcodeproj/project.xcworkspace/contents.xcworkspacedata diff --git a/package.json b/package.json index 7bf5627..e323e73 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,6 @@ "name": "aroth", "email": "adamjroth@gmail.com" } - ] + ], + "main": "index" } From ff15039d46b08eacaf43f3aaeff2d8ca0a5097b7 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 21:50:34 +0900 Subject: [PATCH 02/11] edit android filetype --- .../main/java/com/burlap/filetransfer/FileTransferModule.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index 06ca828..6c683e8 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -99,10 +99,10 @@ public void upload(ReadableMap options, Callback complete) { return; } - String mimeType = file.getString("mimeType"); + String mimeType = file.getString("filetype"); MediaType mediaType = MediaType.parse(mimeType); String name = file.getString("name"); - String fileName = file.getString("fileName"); + String fileName = file.getString("filename"); mRequestBody.addFormDataPart(name, fileName, RequestBody.create(mediaType, imageFile)); } From 6349c2fc52ec099263d7eea9f68478802c7abc41 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 22:34:20 +0900 Subject: [PATCH 03/11] edit README.md & version change --- README.md | 53 +++++++++++++++---- .../filetransfer/FileTransferModule.java | 22 +++++--- package.json | 2 +- 3 files changed, 59 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 9d6edbb..f19af89 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,12 @@ A React Native module for uploading files and camera roll assets. Supports progress notification. ## Install +### Use rnpm +1. `npm install react-native-uploader --save` +2. `rnpm link react-native-uploader` + +If you don't want use rnpm, do this ### iOS 1. `npm install react-native-uploader --save` 2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` @@ -10,6 +15,33 @@ A React Native module for uploading files and camera roll assets. Supports progr 4. In XCode, in the project navigator, select your project. Add `libRNUploader.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` 5. Run your project (`Cmd+R`) +### Android +1. Add to your settings.gradle: +``` +include ':RNFileTransfer', ':app' +project(':RNFileTransfer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-file-transfer-android/android') +``` + +2. Add to your android/build.gradle: +``` +dependencies { + ... + compile project(':RNFileTransfer') +} +``` + +3. Add to MainActivity.java +``` +import com.burlap.filetransfer.FileTransferPackage; +... +mReactInstanceManager = ReactInstanceManager.builder() + .setApplication(getApplication()) + .setBundleAssetName("index.android.bundle") + .setJSMainModuleName("index.android") + .addPackage(new MainReactPackage()) + .addPackage(new FileTransferPackage()) +``` + ## Example See ./examples/UploadFromCameraRoll @@ -61,10 +93,9 @@ doUpload(){ let opts = { url: 'http://my.server/api/upload', files: files, - method: 'POST', // optional: POST or PUT, only support ios - headers: { 'Accept': 'application/json' }, // optional, only support ios - params: { 'user_id': 1 }, // optional, only support ios - data: {title: 'awesome', created: '2016-06-07'} //opional, only support android + method: 'POST', // optional: POST or PUT, only support ios, android always have POST + headers: { 'Accept': 'application/json' }, // optional, only support ios, android always have { 'Accept': 'application/json' } + params: { 'user_id': 1 }, // optional, }; RNUploader.upload( opts, (err, response) => { @@ -93,8 +124,8 @@ doUpload(){ ||type|required|description|example| |---|---|---|---|---| |`url`|string|required|URL to upload to|`http://my.server/api/upload`| -|`method`|string|optional|HTTP method, values: [PUT,POST], default: POST|`POST`| -|`headers`|object|optional|HTTP headers|`{ 'Accept': 'application/json' }`| +|`method(only iOS)`|string|optional|HTTP method, values: [PUT,POST], default: POST|`POST`| +|`headers(only iOS)`|object|optional|HTTP headers|`{ 'Accept': 'application/json' }`| |`params`|object|optional|Query parameters|`{ 'user_id': 1 }`| |`files`|array|required|Array of file objects to upload. See below.| `[{ name: 'file', filename: 'image1.png', filepath: 'assets-library://...', filetype: 'image/png' } ]` | @@ -103,7 +134,8 @@ doUpload(){ ||type|description|example| |---|---|---|---| |error|string|String detailing the error|`A server with the specified hostname could not be found.`| -|response|object{status:Number, data:String}|Object returned with a status code and data.|`{ status: 200, data: '{ success: true }' }`| +|response(iOS)|object{status:Number, data:String}|Object returned with a status code and data.|`{ status: 200, data: '{ success: true }' }`| +|response(Android)|String|String returned with responseBody.|`success: true`| #### `files` @@ -113,10 +145,10 @@ doUpload(){ |---|---|---|---|---| |name|string|optional|Form parameter key for the specified file. If missing, will use `filename`.|`file[]`| |filename|string|required|filename|`image1.png`| -|filepath|string|required|File URI
Supports `assets-library:`, `data:` and `file:` URIs and file paths.|`assets-library://...`
`data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV...`
`file:/tmp/image1.png`
`/tmp/image1.png`| +|filepath|string|required|File URI
Supports `assets-library:`, `data:` and `file:` URIs and file paths.|`assets-library://...(iOS)`
`content://...(Android)`
`data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV...(only iOS)`
`file:/tmp/image1.png`
`/tmp/image1.png`| |filetype|string|optional|MIME type of file. If missing, will infer based on the extension in `filepath`.|`image/png`| -### Progress +### Progress (only support iOS) To monitor upload progress simply subscribe to the `RNUploaderProgress` event using DeviceEventEmitter. ``` @@ -129,7 +161,7 @@ DeviceEventEmitter.addListener('RNUploaderProgress', (data)=>{ }); ``` -### Cancel +### Cancel (only support iOS) To cancel an upload in progress: ``` RNUploader.cancel() @@ -148,6 +180,7 @@ Inspired by similiar projects: * support for multiple files at a time * support for files from the assets library, base64 `data:` or `file:` paths * no external dependencies (ie: AFNetworking) +* support Android ## License diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index 6c683e8..d42bf59 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -2,6 +2,8 @@ import android.app.DownloadManager; import android.content.Context; +import android.database.Cursor; +import android.provider.MediaStore; import android.util.Log; import android.net.Uri; @@ -66,18 +68,21 @@ public void upload(ReadableMap options, Callback complete) { ReadableArray files = options.getArray("files"); String url = options.getString("url"); - ReadableMap data = options.getMap("data"); - ReadableMapKeySetIterator iterator = data.keySetIterator(); + if(options.hasKey("params")){ + ReadableMap data = options.getMap("params"); + ReadableMapKeySetIterator iterator = data.keySetIterator(); - while(iterator.hasNextKey()){ - String key = iterator.nextKey(); - if(ReadableType.String.equals(data.getType(key))) { - mRequestBody.addFormDataPart(key, data.getString(key)); + while(iterator.hasNextKey()){ + String key = iterator.nextKey(); + if(ReadableType.String.equals(data.getType(key))) { + mRequestBody.addFormDataPart(key, data.getString(key)); + } } } + if(files.size() != 0){ for(int fileIndex=0 ; fileIndex Date: Sat, 2 Jul 2016 22:37:07 +0900 Subject: [PATCH 04/11] edit --- .../main/java/com/burlap/filetransfer/FileTransferModule.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index d42bf59..a18879b 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -104,7 +104,7 @@ public void upload(ReadableMap options, Callback complete) { return; } - String mimeType = "image/png" + String mimeType = "image/png"; if(file.hasKey("filetype")){ mimeType = file.getString("filetype"); } From cda998fb2efeb036627d3d7cae1c719297cfbffd Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 22:40:54 +0900 Subject: [PATCH 05/11] edit import method --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f19af89..9b85d91 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ See ./examples/UploadFromCameraRoll ## Usage ```javascript -var RNUploader = require('NativeModules').RNUploader; +var RNUploader = require('react-native-uploader'); var { StyleSheet, From a06cce74211015d642f173745935fd761fca0df3 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 22:44:20 +0900 Subject: [PATCH 06/11] add defulat name --- .../java/com/burlap/filetransfer/FileTransferModule.java | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index a18879b..132cfd7 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -109,8 +109,12 @@ public void upload(ReadableMap options, Callback complete) { mimeType = file.getString("filetype"); } MediaType mediaType = MediaType.parse(mimeType); - String name = file.getString("name"); String fileName = file.getString("filename"); + Stirng name = fileName; + if(file.hasKey("name")){ + name = file.getString("name"); + } + mRequestBody.addFormDataPart(name, fileName, RequestBody.create(mediaType, imageFile)); } From f20bb353e7c003c07950e26ed35c23bfa1ff44f8 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 22:45:46 +0900 Subject: [PATCH 07/11] add defulat name --- .../main/java/com/burlap/filetransfer/FileTransferModule.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index 132cfd7..ebeb0ec 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -110,7 +110,7 @@ public void upload(ReadableMap options, Callback complete) { } MediaType mediaType = MediaType.parse(mimeType); String fileName = file.getString("filename"); - Stirng name = fileName; + String name = fileName; if(file.hasKey("name")){ name = file.getString("name"); } From 2839bf6f271fa3e3f98a21b5292e6e78fa819669 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 2 Jul 2016 23:08:29 +0900 Subject: [PATCH 08/11] edit READMD.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9b85d91..f004be3 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ doUpload(){ files: files, method: 'POST', // optional: POST or PUT, only support ios, android always have POST headers: { 'Accept': 'application/json' }, // optional, only support ios, android always have { 'Accept': 'application/json' } - params: { 'user_id': 1 }, // optional, + params: { 'user_id': 1 }, // optional, Android support this only string. If you want this in Android use params: { 'user_id': '1' } }; RNUploader.upload( opts, (err, response) => { @@ -126,7 +126,8 @@ doUpload(){ |`url`|string|required|URL to upload to|`http://my.server/api/upload`| |`method(only iOS)`|string|optional|HTTP method, values: [PUT,POST], default: POST|`POST`| |`headers(only iOS)`|object|optional|HTTP headers|`{ 'Accept': 'application/json' }`| -|`params`|object|optional|Query parameters|`{ 'user_id': 1 }`| +|`params(iOS)`|object|optional|Query parameters|`{ 'user_id': 1 }`| +|`params(Android)`|object|optional|Query parameters|`{ 'user_id': '1' }`
only support string value. You can't use int, boolean, etc..| |`files`|array|required|Array of file objects to upload. See below.| `[{ name: 'file', filename: 'image1.png', filepath: 'assets-library://...', filetype: 'image/png' } ]` | `callback` is a method with two parameters: From eaeff9e66e54696798ac540698ef9da0e669b2a4 Mon Sep 17 00:00:00 2001 From: Baptiste JAMIN Date: Tue, 11 Oct 2016 14:04:01 +0200 Subject: [PATCH 09/11] Add dependency for okhttputils --- android/build.gradle | 1 + 1 file changed, 1 insertion(+) diff --git a/android/build.gradle b/android/build.gradle index 02300b9..76f22b0 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -31,5 +31,6 @@ dependencies { compile 'com.android.support:appcompat-v7:23.+' compile 'com.facebook.react:react-native:0.16.+' compile 'com.squareup.okhttp3:okhttp:3.3.1' + compile 'com.zhy:okhttputils:2.6.2' compile fileTree(dir: 'libs', include: ['*.jar']) } From 34736f3d4c03509d0848453b12789cf589e414d3 Mon Sep 17 00:00:00 2001 From: Baptiste JAMIN Date: Tue, 11 Oct 2016 14:06:47 +0200 Subject: [PATCH 10/11] Add support for RNUploaderProgress --- .../filetransfer/FileTransferModule.java | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java index ebeb0ec..e0eb5d4 100644 --- a/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java +++ b/android/src/main/java/com/burlap/filetransfer/FileTransferModule.java @@ -17,6 +17,9 @@ import com.facebook.react.bridge.ReadableMap; import com.facebook.react.bridge.ReadableMapKeySetIterator; import com.facebook.react.bridge.ReadableType; +import com.facebook.react.bridge.WritableMap; +import com.facebook.react.bridge.Arguments; +import com.facebook.react.modules.core.DeviceEventManagerModule; import org.json.*; @@ -35,19 +38,17 @@ import okhttp3.RequestBody; import okhttp3.Response; +import com.zhy.http.okhttp.request.CountingRequestBody; public class FileTransferModule extends ReactContextBaseJavaModule { private final OkHttpClient client = new OkHttpClient(); - - private static String siteUrl = "http://joinbevy.com"; - private static String apiUrl = "http://api.joinbevy.com"; - private static Integer port = 80; - private String TAG = "ImageUploadAndroid"; + ReactApplicationContext reactContext = null; public FileTransferModule(ReactApplicationContext reactContext) { super(reactContext); + this.reactContext = reactContext; } @Override @@ -123,10 +124,25 @@ public void upload(ReadableMap options, Callback complete) { MultipartBody requestBody = mRequestBody.build(); + + CountingRequestBody monitoredRequest = new CountingRequestBody(requestBody, new CountingRequestBody.Listener() { + @Override + public void onRequestProgress(long bytesWritten, long contentLength) { + WritableMap params = Arguments.createMap(); + params.putDouble("progress",100f * bytesWritten / contentLength); + params.putDouble("totalBytesWritten", bytesWritten); + params.putDouble("totalBytesExpectedToWrite", contentLength); + + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit("RNUploaderProgress", params); + } + }); + Request request = new Request.Builder() .header("Accept", "application/json") .url(url) - .post(requestBody) + .post(monitoredRequest) .build(); Response response = client.newCall(request).execute(); From 3253ea32127d53bd39294946103ae7405bc8f6d2 Mon Sep 17 00:00:00 2001 From: Cheol Date: Sat, 19 Nov 2016 23:56:21 +0900 Subject: [PATCH 11/11] edit README --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f004be3..6824cb4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # react-native-uploader A React Native module for uploading files and camera roll assets. Supports progress notification. +# Do you absolutely need this? +You can use file upload with `fetch` and if you want progress bar, you can use xhr. Read my post [How to upload photo/file in react-native](https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native). Even after read my post, but you are not enough, read the following. + ## Install ### Use rnpm 1. `npm install react-native-uploader --save` @@ -53,7 +56,7 @@ See ./examples/UploadFromCameraRoll var RNUploader = require('react-native-uploader'); var { - StyleSheet, + StyleSheet, Component, View, DeviceEventEmitter, @@ -67,7 +70,7 @@ componentDidMount(){ let bytesWritten = data.totalBytesWritten; let bytesTotal = data.totalBytesExpectedToWrite; let progress = data.progress; - + console.log( "upload progress: " + progress + "%"); }); } @@ -92,7 +95,7 @@ doUpload(){ let opts = { url: 'http://my.server/api/upload', - files: files, + files: files, method: 'POST', // optional: POST or PUT, only support ios, android always have POST headers: { 'Accept': 'application/json' }, // optional, only support ios, android always have { 'Accept': 'application/json' } params: { 'user_id': 1 }, // optional, Android support this only string. If you want this in Android use params: { 'user_id': '1' } @@ -103,7 +106,7 @@ doUpload(){ console.log(err); return; } - + let status = response.status; let responseString = response.data; let json = JSON.parse( responseString ); @@ -157,7 +160,7 @@ DeviceEventEmitter.addListener('RNUploaderProgress', (data)=>{ let bytesWritten = data.totalBytesWritten; let bytesTotal = data.totalBytesExpectedToWrite; let progress = data.progress; - + console.log( "upload progress: " + progress + "%"); }); ``` @@ -179,7 +182,7 @@ Inspired by similiar projects: * progress reporting * packaged as a static library * support for multiple files at a time -* support for files from the assets library, base64 `data:` or `file:` paths +* support for files from the assets library, base64 `data:` or `file:` paths * no external dependencies (ie: AFNetworking) * support Android