{"id":19273255,"url":"https://github.com/tranquangvu/react-native-uploader","last_synced_at":"2025-04-21T22:32:52.576Z","repository":{"id":52377863,"uuid":"66918830","full_name":"tranquangvu/react-native-uploader","owner":"tranquangvu","description":"React Native upload media for iOS and Android","archived":false,"fork":false,"pushed_at":"2021-04-30T08:23:12.000Z","size":11221,"stargazers_count":17,"open_issues_count":3,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-03-27T10:32:23.311Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tranquangvu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-30T07:48:57.000Z","updated_at":"2024-03-27T10:32:23.312Z","dependencies_parsed_at":"2022-08-21T21:50:36.704Z","dependency_job_id":null,"html_url":"https://github.com/tranquangvu/react-native-uploader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranquangvu%2Freact-native-uploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranquangvu%2Freact-native-uploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranquangvu%2Freact-native-uploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranquangvu%2Freact-native-uploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tranquangvu","download_url":"https://codeload.github.com/tranquangvu/react-native-uploader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223881800,"owners_count":17219268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T20:41:56.294Z","updated_at":"2024-11-09T20:41:56.880Z","avatar_url":"https://github.com/tranquangvu.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-uploader\nA React Native module for uploading files and camera roll assets in Android and iOS. Supports progress notification.\n\n## Note\nThis module is a cover of [https://github.com/g6ling/react-native-uploader](https://github.com/g6ling/react-native-uploader). I cover it to make it suitable for my project. And I see it useful and share it.\n\nThanks to [@g6ling](https://github.com/g6ling) for great module.\n\n## Install\n### Use rnpm\n1. `npm install https://github.com/tranquangvu/react-native-uploader.git --save`\n2. `rnpm link react-native-uploader`\n\n\nIf you don't want use rnpm, do this\n### iOS\n* `npm install https://github.com/tranquangvu/react-native-uploader.git --save`\n* In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n* Go to `node_modules` ➜ `react-native-uploader` ➜ `ios` and add `RNUploader.xcodeproj`\n* In XCode, in the project navigator, select your project. Add `libRNUploader.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n* Run your project (`Cmd+R`)\n\n### Android\n* Add to your android/settings.gradle:\n```\ninclude ':react-native-uploader'\nproject(':react-native-uploader').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-uploader/android')\n```\n\n* Add to your android/app/build.gradle:\n```\ndependencies {\n  ...\n  compile project(':react-native-uploader')\n}\n```\n\n* Add to MainApplication.java\n```\nimport com.burlap.filetransfer.FileTransferPackage;\n...\nprivate final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n  ....\n  @Override\n  protected List\u003cReactPackage\u003e getPackages() {\n    return Arrays.\u003cReactPackage\u003easList(\n      ...\n      new FileTransferPackage()\n    );\n  }\n}\n```\n\n## Example\nThis is a simple demo for upload image. It can be run both Android and iOs.\nSee it in [https://github.com/tranquangvu/react-native-uploader-demo](https://github.com/tranquangvu/react-native-uploader-demo)\n\n## Usage\n```javascript\nvar RNUploader = require('react-native-uploader');\n\nvar {\n\tStyleSheet, \n\tComponent,\n\tView,\n\tDeviceEventEmitter,\n} = React;\n```\n\n```javascript\ncomponentDidMount(){\n\t// upload progress\n\tDeviceEventEmitter.addListener('RNUploaderProgress', (data)=\u003e{\n\t  let bytesWritten = data.totalBytesWritten;\n\t  let bytesTotal   = data.totalBytesExpectedToWrite;\n\t  let progress     = data.progress;\n\t  \n\t  console.log( \"upload progress: \" + progress + \"%\");\n\t});\n}\n```\n\n```javascript\ndoUpload(){\n\tlet files = [\n\t\t{\n\t\t\tname: 'file[]',\n\t\t\tfilename: 'image1.png',\n\t\t\tfilepath: 'assets-library://....',  // image from camera roll/assets library\n\t\t\tfiletype: 'image/png',\n\t\t},\n\t\t{\n\t\t\tname: 'file[]',\n\t\t\tfilename: 'image2.gif',\n\t\t\tfilepath: \"data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7\", // base64 only support ios\n\t\t\tfiletype: 'image/gif',\n\t\t},\n\t];\n\n\tlet opts = {\n\t\turl: 'http://my.server/api/upload',\n\t\tfiles: files, \n\t\tmethod: 'POST',                             // optional: POST or PUT, only support ios, android always have POST\n\t\theaders: { 'Accept': 'application/json' },  // optional, only support ios, android always have  { 'Accept': 'application/json' }\n\t\tparams: { 'user_id': 1 },                   // optional, Android support this only string. If you want this in Android use params: { 'user_id': '1' }\n\t};\n\n\tRNUploader.upload( opts, (err, response) =\u003e {\n\t\tif( err ){\n\t\t\tconsole.log(err);\n\t\t\treturn;\n\t\t}\n  \n\t\tlet status = response.status;\n\t\tlet responseString = response.data;\n\t\tlet json = JSON.parse( responseString );\n\n\t\tconsole.log('upload complete with status ' + status);\n\n\t\t// android's response is response.body.string.\n\t});\n}\n\n```\n\n## API\n#### RNUploader.upload( options, callback )\n\n`options` is an object with values:\n\n||type|required|description|example|\n|---|---|---|---|---|\n|`url`|string|required|URL to upload to|`http://my.server/api/upload`|\n|`method`|string|optional|HTTP method, values: [PUT,POST], default: POST|`POST`|\n|`headers`|object|optional|HTTP headers|`{ 'Accept': 'application/json' }`|\n|`params(iOS)`|object|optional|Query parameters|`{ 'user_id': 1  }`|\n|`params(Android)`|object|optional|Query parameters|`{ 'user_id': '1'  }`\u003cbr\u003e only support string value. You can't use int, boolean, etc..|\n|`files`|array|required|Array of file objects to upload. See below.| `[{ name: 'file', filename: 'image1.png', filepath: 'assets-library://...', filetype: 'image/png' } ]` |\n\n`callback` is a method with two parameters:\n\n||type|description|example|\n|---|---|---|---|\n|error|string|String detailing the error|`A server with the specified hostname could not be found.`|\n|response(iOS)|object{status:Number, data:String}|Object returned with a status code and data.|`{ status: 200, data: '{ success: true }' }`|\n|response(Android)|String|String returned with responseBody.|`success: true`|\n\n\n#### `files`\n`files` is an array of objects with values:\n\n||type|required|description|example|\n|---|---|---|---|---|\n|name|string|optional|Form parameter key for the specified file. If missing, will use `filename`.|`file[]`|\n|filename|string|required|filename|`image1.png`|\n|filepath|string|required|File URI\u003cbr\u003eSupports `assets-library:`, `data:` and `file:` URIs and file paths.|`assets-library://...(iOS)`\u003cbr\u003e`content://...(Android)`\u003cbr\u003e`data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV...(only iOS)`\u003cbr\u003e`file:/tmp/image1.png`\u003cbr\u003e`/tmp/image1.png`|\n|filetype|string|optional|MIME type of file. If missing, will infer based on the extension in `filepath`.|`image/png`|\n\n### Progress (only support iOS)\nTo monitor upload progress simply subscribe to the `RNUploaderProgress` event using DeviceEventEmitter.\n\n```\nDeviceEventEmitter.addListener('RNUploaderProgress', (data)=\u003e{\n  let bytesWritten = data.totalBytesWritten;\n  let bytesTotal   = data.totalBytesExpectedToWrite;\n  let progress     = data.progress;\n  \n  console.log( \"upload progress: \" + progress + \"%\");\n});\n```\n\n### Cancel (only support iOS)\nTo cancel an upload in progress:\n```\nRNUploader.cancel()\n```\n\n### Notes\n\nInspired by similiar projects:\n* https://github.com/booxood/react-native-file-upload\n* https://github.com/kamilkp/react-native-file-transfer\n\n...with noteable enhancements:\n* uploads are performed asynchronously on the native side\n* progress reporting\n* packaged as a static library\n* support for multiple files at a time\n* support for files from the assets library, base64 `data:` or `file:` paths \n* no external dependencies (ie: AFNetworking)\n* support Android\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranquangvu%2Freact-native-uploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftranquangvu%2Freact-native-uploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranquangvu%2Freact-native-uploader/lists"}