0.0.10 • Published 9 years ago

react-native-uploader v0.0.10

Weekly downloads
89
License
-
Repository
github
Last release
9 years ago

react-native-uploader

A React Native module for uploading files and camera roll assets. Supports progress notification.

Install

iOS

  1. npm install react-native-uploader --save

  2. Link the native modules:

If you're using React-Native >= 0.29:

  • Link the library with the command react-native link

If you're using React-Native < 0.29:

  • Install rnpm using the command npm install -g rnpm
  • Link the library with the command rnpm link

If you have any issues, you can install the library manually:

  • In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  • Go to node_modulesreact-native-uploaderRNUploader and add RNUploader.xcodeproj
  • In XCode, in the project navigator, select your project. Add libRNUploader.a to your project's Build PhasesLink Binary With Libraries
  1. Run your project (Cmd+R)

Example

See ./examples/UploadFromCameraRoll

Example

Usage

var RNUploader = require('NativeModules').RNUploader;

var {
	StyleSheet, 
	Component,
	View,
	DeviceEventEmitter,
} = React;
componentDidMount(){
	// upload progress
	DeviceEventEmitter.addListener('RNUploaderProgress', (data)=>{
	  let bytesWritten = data.totalBytesWritten;
	  let bytesTotal   = data.totalBytesExpectedToWrite;
	  let progress     = data.progress;
	  
	  console.log( "upload progress: " + progress + "%");
	});
}
doUpload(){
	let files = [
		{
			name: 'file[]',
			filename: 'image1.png',
			filepath: 'assets-library://....',  // image from camera roll/assets library
			filetype: 'image/png',
		},
		{
			name: 'file[]',
			filename: 'image2.gif',
			filepath: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7",
			filetype: 'image/gif',
		},
	];

	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
	};

	RNUploader.upload( opts, (err, response) => {
		if( err ){
			console.log(err);
			return;
		}
  
		let status = response.status;
		let responseString = response.data;
		let json = JSON.parse( responseString );

		console.log('upload complete with status ' + status);
	});
}

API

RNUploader.upload( options, callback )

options is an object with values:

typerequireddescriptionexample
urlstringrequiredURL to upload tohttp://my.server/api/upload
methodstringoptionalHTTP method, values: PUT,POST, default: POSTPOST
headersobjectoptionalHTTP headers{ 'Accept': 'application/json' }
paramsobjectoptionalQuery parameters{ 'user_id': 1 }
filesarrayrequiredArray 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:

typedescriptionexample
errorstringString detailing the errorA server with the specified hostname could not be found.
responseobject{status:Number, data:String}Object returned with a status code and data.{ status: 200, data: '{ success: true }' }

files

files is an array of objects with values:

typerequireddescriptionexample
namestringoptionalForm parameter key for the specified file. If missing, will use filename.file[]
filenamestringrequiredfilenameimage1.png
filepathstringrequiredFile URISupports assets-library:, data: and file: URIs and file paths.assets-library://...data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV...file:/tmp/image1.png/tmp/image1.png
filetypestringoptionalMIME type of file. If missing, will infer based on the extension in filepath.image/png

Progress

To monitor upload progress simply subscribe to the RNUploaderProgress event using DeviceEventEmitter.

DeviceEventEmitter.addListener('RNUploaderProgress', (data)=>{
  let bytesWritten = data.totalBytesWritten;
  let bytesTotal   = data.totalBytesExpectedToWrite;
  let progress     = data.progress;
  
  console.log( "upload progress: " + progress + "%");
});

Cancel

To cancel an upload in progress:

RNUploader.cancel()

Notes

Inspired by similiar projects:

...with noteable enhancements:

  • uploads are performed asynchronously on the native side
  • 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
  • no external dependencies (ie: AFNetworking)

License

MIT

0.0.10

9 years ago

0.0.9

9 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago