react-native-document-picker

A React Native wrapper for Apple's UIDocumentMenuViewController and for Android's Intent.ACTION_OPEN_DOCUMENT / Intent.ACTION_PICK.

Installation

npm i --save react-native-document-picker

Automatically Link Native Modules

For 0.29.2+ projects, simply link native packages via the following command (note: rnpm has been merged into react-native)

react-native link

As for projects < 0.29 you need rnpm to link native packages

rnpm link

Manually Link Native Modules

1. Run npm install react-native-document-picker --save
2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name"(Screenshot) then (Screenshot).
3. Add libRNDocumentPicker.a to Build Phases -> Link Binary With Libraries(Screenshot).

Android

// file: android/settings.gradle...
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-document-picker/android')

// file: android/app/build.gradle...
dependencies {
...
compile project(':react-native-document-picker')
}

// file: MainApplication.java
...
importcom.reactnativedocumentpicker.ReactNativeDocumentPicker;; // Import packagepublicclassMainApplicationextendsApplicationimplementsReactApplication {
/** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newMainReactPackage(),
newReactNativeDocumentPicker() // Add package
);
}
...
}

Example

constDocumentPicker=require('react-native').NativeModules.RNDocumentPicker;// iPhone/AndroidDocumentPicker.show({filetype: ['public.image'],},(error,url)=>{alert(url);});// iPadconst{pageX, pageY}=event.nativeEvent;DocumentPicker.show({top: pageY,left: pageX,filetype: ['public.image'],},(error,url)=>{alert(url);});

Note

The full list of UTI is available here: (https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html)]

Here is how it looks:

How to send it back ?

I recommend using https://github.com/johanneslumpe/react-native-fs I had to modify Uploader.m so it would use NSFileCoordinator with NSFileCoordinatorReadingForUploading option.

I added a check for file length that would be thrown into RNFS catch block.

if ([fileData length] == 0) {
NSError *errorUp = [NSErrorerrorWithDomain:@"com.whatever.yourapp"code:77userInfo:[NSDictionarydictionaryWithObject:@"empty"forKey:NSLocalizedDescriptionKey]];
_params.errorCallback(errorUp);
return;
}

leturl="file://whatever/com.bla.bla/file.ext";//The url you received from the DocumentPicker// I STRONGLY RECOMMEND ADDING A SMALL SETTIMEOUT before uploading the url you just got.constsplit=url.split('/');constname=split.pop();constinbox=split.pop();constrealPath=`${RNFS.TemporaryDirectoryPath}${inbox}/${name}`;constuploadBegin=(response)=>{constjobId=response.jobId;console.log('UPLOAD HAS BEGUN! JobId: '+jobId);};constuploadProgress=(response)=>{constpercentage=Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend)*100);console.log('UPLOAD IS '+percentage+'% DONE!');};RNFS.uploadFiles({toUrl: uploadUrl,files: [{
name,filename:name,filepath: realPath,}],method: 'POST',headers: {'Accept': 'application/json',},begin: uploadBegin,beginCallback: uploadBegin,// Don't ask me, only way I made it work as of 1.5.1progressCallback: uploadProgress,progress: uploadProgress}).then((response)=>{console.log(response,"<<< Response");if(response.statusCode==200){//You might not be getting a statusCode at all. Checkconsole.log('FILES UPLOADED!');}else{console.log('SERVER ERROR');}}).catch((err)=>{if(err.description){switch(err.description){case"cancelled":
console.log("Upload cancelled");break;case"empty"console.log("Empty file");default:
//Unknown}}else{//Weird}console.log(err);});

Reminder

You need to enable iCloud Documents to access iCloud

Halp wanted: Improvements

• Fix Xcode warning about constraints
• support options for the UIDocumentMenuViewController
• Handle Upload by itself ?