README
react-native-document-picker
WARNING: Experimental branch of v3 /!\
A React Native wrapper for:
- Apple's
UIDocumentMenuViewController
- Android's
Intent.ACTION_OPEN_DOCUMENT
/Intent.ACTION_PICK
- Windows
Windows.Storage.Pickers
Installation
npm i --save react-native-document-picker
Automatically Link Native Modules
Link native packages via the following command:
react-native link
Manually Link Native Modules
- Run
npm install react-native-document-picker --save
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
(Screenshot) then (Screenshot). - Add
libRNDocumentPicker.a
toBuild Phases -> Link Binary With Libraries
(Screenshot).
CocoaPods
Add the following to your podfile:
pod 'react-native-document-picker', :path => '../node_modules/react-native-document-picker`
Android
// file: android/settings.gradle
...
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
// file: android/app/build.gradle
...
dependencies {
...
compile project(':react-native-document-picker')
}
// file: MainApplication.java
...
import io.github.elyx0.reactnativedocumentpicker.DocumentPickerPackage; // Import package
public class MainApplication extends Application implements ReactApplication {
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DocumentPickerPackage() // Add package
);
}
...
}
Windows
Follow the instructions in the 'Linking Libraries' documentation on the react-native-windows GitHub repo. For the first step of adding the project to the Visual Studio solution file, the path to the project should be ../node_modules/react-native-document-picker/windows/RNDocumentPicker/RNDocumentPicker.csproj
.
API
and DocumentPicker.pick(opts)DocumentPicker.pickMultiple(opts)
Use pick
or pickMultiple
to open a document picker for the user to select file(s). Both methods return a Promise. pick
will only allow a single selection and the Promise will resolve to that single result. pickMultiple
will allow multiple selection and the Promise returned will always resolve to an array of results.
Options:
type
:string|Array<string>
: The type or types of documents to allow selection of. May be an array of types as single type string.- On Android these are MIME types such as
text/plain
or partial MIME types such asimage/*
. - On iOS these must be Apple "Uniform Type Identifiers"
- If
type
is omitted it will be treated as*/*
orpublic.content
. - Multiple type strings are not supported on Android before KitKat (API level 19), Jellybean will fall back to
*/*
if you provide an array with more than one value.
- On Android these are MIME types such as
Result:
The object a pick
Promise resolves to or the objects in the array a pickMultiple
Promise resolves to will contain the following keys.
uri
: The URI representing the document picked by the user. On iOS this will be afile://
URI for a temporary file in your app's container. On Android this will be acontent://
URI for a document provided by a DocumentProvider that must be accessed with a ContentResolver.type
: The MIME type of the file. On Android some DocumentProviders may not provide MIME types for their documents. On iOS this MIME type is based on the best MIME type for the file extension according to Apple's internal "Uniform Type Identifiers" database.name
: The display name of the file. This is normally the filename of the file, but Android does not guarantee that this will be a filename from all DocumentProviders.size
: The file size of the document. On Android some DocumentProviders may not provide this information for a document.
DocumentPicker.types.*
DocumentPicker.types.*
provides a few common types for use as type
values, these types will use the correct format for each platform (MIME types on Android, UTIs on iOS).
DocumentPicker.types.allFiles
: All document types, on Android this is*/*
, on iOS is ispublic.content
(note that some binary and archive types do not inherit frompublic.content
)DocumentPicker.types.images
: All image types (image/*
orpublic.image
)DocumentPicker.types.plainText
: Plain text files ie:.txt
(text/plain
orpublic.plain-text
)DocumentPicker.types.audio
: All audio types (audio/*
orpublic.audio
)DocumentPicker.types.pdf
: PDF documents (application/pdf
orcom.adobe.pdf
)
DocumentPicker.isCancel(err)
If the user cancels the document picker without choosing a file (by pressing the system back button on Android or the Cancel button on iOS) the Promise will be rejected with a cancellation error. You can check for this error using DocumentPicker.isCancel(err)
allowing you to ignore it and cleanup any parts of your interface that may not be needed anymore.
Example
import DocumentPicker from 'react-native-document-picker';
// Pick a single file
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.images],
});
console.log(
res.uri,
res.type, // mime type
res.name,
res.size
);
} catch ( err ) {
if ( DocumentPicker.isCancel(err) ) {
// User cancelled the picker, exit any dialogs or menus and move on
} else {
throw err;
}
}
// Pick multiple files
try {
const results = await DocumentPicker.pickMultiple({
type: [DocumentPicker.types.images],
});
for ( const res of results ) {
console.log(
res.uri,
res.type, // mime type
res.name,
res.size
);
}
} catch ( err ) {
if ( DocumentPicker.isCancel(err) ) {
// User cancelled the picker, exit any dialogs or menus and move on
} else {
throw err;
}
}
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 = [NSError errorWithDomain:@"com.whatever.yourapp" code:77 userInfo:[NSDictionary dictionaryWithObject:@"empty" forKey:NSLocalizedDescriptionKey]];
_params.errorCallback(errorUp);
return;
}
let url = "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.
const split = url.split('/');
const name = split.pop();
const inbox = split.pop();
const realPath = `${RNFS.TemporaryDirectoryPath}${inbox}/${name}`;
const uploadBegin = (response) => {
const jobId = response.jobId;
console.log('UPLOAD HAS BEGUN! JobId: ' + jobId);
};
const uploadProgress = (response) => {
const percentage = 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.1
progressCallback: uploadProgress,
progress: uploadProgress
})
.then((response) => {
console.log(response,"<<< Response");
if (response.statusCode == 200) { //You might not be getting a statusCode at all. Check
console.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 UIDocumentPickerViewController
- Handle Upload by itself ?