Document Picker for React Native
Home Page: https://react-native-documents.github.io/
License: MIT License
📣📣 A full rewrite of the library is AVAILABLE. 📣📣
See the new docs here.
🚧🚧 GH discussions available 🚧🚧
If you want to ask questions, we opened GH discussions for that purpose! 🤗 Issue tracker is reserved for bugs and feature requests only and issues not following the issue template can be closed. Thank you!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
I'm getting a content uri in android:
'content://com.android.providers.media.documents/document/image%3A99'
Decoding it does not work, and it seems that it's impossible to access the file.
Does anyone has an idea how to access the file?
10x
I've tried to download PDF file from ICloud and got
DocumentPicker.show({
filetype: ['com.adobe.pdf'],
}, (error, res) => {
const allowedType = ["image/jpeg", "image/png", "pdf"];
if (allowedType.includes(res.type) && res.fileSize < 2000000) {
const Name = "Document " + res.fileName.split(".")[0];
// todo GuidKey should gets from uploadFile endpoint response
const file = { Name, GuidKey: "" };
this.props.uploadDocument(res.uri, res.type, res.fileName, { Code: this.props.onBoardingCode});
// this.props.addFileToCurrentDocument(file);
} else if (!allowedType.includes(res.type)) {
Alert.alert("You can upload only jpeg, png or pdf");
} else {
Alert.alert("You can not upload a file larger than two megabytes");
}
});
If print res I've got fileName, fileSize and uri, but not "type" is there a bug?
React-native :0.43
Platform : IOS
Trying to compile with react-natie 0.48.3 I received the following error
DocumentPicker.java:16: error: method does not override or implement a method from a supertype
After I open the project in android studio I see the react-native dependency locked to version 0.20.1, then I investigated about maven dependecies seeing that the repo http://files.couchbase.com/maven2/ have no com/facebook/react folder.
Now I am trying to include react native from node_modules ...
Have you any idea if its possible to pick a folder to save to?
Can it work without iCloud? I have not access to adding iCloud support in apple dev, can i use the module without it? Why iCloud required?
have the error: http://prntscr.com/fwp2h4
can't enable iCloud: http://prntscr.com/fwp36y
Hi! I'm using the ios part of the module, and have my own file picker on android. i'm thinking of throwing away my android implementation in favor of this one. If I promisify the module methods and add some more options on android, would you be ok with merging that? Thanks
Thanks for this component. Looks great. Are there any plans to do something similar for android? Or do you know if a suitable Android alternative? I'd be happy to help integrate it into your project.
Also, is it necessary to supply a filetype filter, or is that optional?
Currently ACTION_OPEN_DOCUMENT is used for opening the dialog here.
Unfortunately this intent not supported by all popular file services (specifically Dropbox), for example I have only local directories and Google Drive as available file sources.
There's another Intent ACTION_GET_CONTENT which opens a very similar Android dialog and supports more file providers, Dropbox included. As far as I understand it returns similar result after picking a file (though dropbox doesn't return MIME type and filename, URI is present, and picking GD and local files seem to return the same results as for original Intent).
I don't have experience in pure-Java Android development, so I'm not sure if there are other differences that make it not suitable for this package. Is it possible to change the intent to support more providers?
There's a request for Dropbox team to implement handling of ACTION_OPEN_DOCUMENT but no ETA for this.
Hi,
When I call the DocumentPicker.show method, I see a list of sources with only one option, "iCloud Drive". I need the user to be able to upload a file from his phone's storage.
Please help,
Ashish
为什么我显示的选择文件后，返回的参数里面的uri是这样的
uri:"content://com.android.providers.media.documents/document/image%3A31760"
而不是"file:///image/image-ed114c33-22ee-43ad-bfda-538a050fa7d9.jp"呢？
"
*** Terminating app due to uncaught exception 'NSGenericException', reason: 'Your application has presented a UIDocumentMenuViewController (<UIDocumentMenuViewController: 0x7fbc15e75600>). In its current trait environment, the modalPresentationStyle of a UIDocumentMenuViewController with this style is UIModalPresentationPopover. You must provide location information for this popover through the view controller's popoverPresentationController. You must provide either a sourceView and sourceRect or a barButtonItem. If this information is not known when you present the view controller, you may provide it in the UIPopoverPresentationControllerDelegate method -prepareForPopoverPresentation.'
"
pretty please :)
DocumentPicker is only giving option of ICloud for all UTI types.
check this out: microsoft/react-native-code-push#678
I'm using react-native-fs as recommended in the readme, and I'm trying to move the file selected from the document picker to the Document Directory.
However, I get the error below:
Error: “filename.mp3” couldn’t be moved to “Documents” because either the former doesn't exist, or the folder containing the latter doesn't exist.
What am I doing wrong?
FYI, I'm using iOS.
openDocumentPicker() {
DocumentPicker.show({
filetype: ['public.audio'],
},(error,url) => {
console.log(url);
this.saveAudio(url);
});
}
saveAudio(url) {
const split = url.split('/');
const name = split.pop();
const inbox = split.pop();
const realPath = `${RNFS.TemporaryDirectoryPath}${inbox}/${name}`;
var destPath = RNFS.DocumentDirectoryPath + '/' + 'name';
RNFS.moveFile(realPath, destPath)
.then((success) => {
console.log('file moved!');
})
.catch((err) => {
console.log("Error: " + err.message);
});
}
How can one access device local folders apart from cloud options?
Thanks for great work.
I would like to know if it is possible to select multiple files.
All I want is - select multiple files and get array of URIs from it's callback.
Is it possible?
I am using react-native-firebase , I do not need to use any react-native-fetch-blob etc to upload file on storage, its working perfectly with ios but as I see react-native-document-picker returns odd looking uri something like "content://com.android.providers.media.documents/document/image%3A2444" , it does not work , how can I use uri ? ealier I used react-native-file-picker for android but as I see react-native-document-picker works for both, I want use only one library to perform on both type of devices.
It it crashing because of this override in ReactNativeDocumentPicker.java
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
Other projects removed it like here evollu/react-native-fcm#470
soon I used it , it went crashed . testing on xcode
componentDidMount(){
const DocumentPicker = NativeModules.RNDocumentPicker;
DocumentPicker.show({
filetype: ['public.image'],
},(error,url) => {
alert(url);
});
}
There is no instruction for file type like pdf , images, allFiles. Had to read your source code then I found your method. It should be include into readme.
When i choose pdf file from file manager type is null
devices tested: http://prntscr.com/ggxj1m, http://prntscr.com/ggxp89 and other devices the same issue
body of res: http://prntscr.com/ggxjar
maybe the same issue like here: #56
I had a number of issues with the implementation of this library, enough that I ditched it and started working on my own document picker implementation internally to fit my needs.
I'd be willing to instead help overhaul this library if the community and package owner are willing to accept the changes I want to make.
hfsTypeCode should be used to attempt to return a mime type. (hfsTypeCode doesn't seem to return anything)UIDocumentMenuViewController to UIDocumentPickerViewController.ACTION_PICK should never be used, it is intended for choosing data from a media provider, not choosing any document of a mime type.ACTION_GET_CONTENT should be used by default instead of ACTION_OPEN_DOCUMENT to match the intent of the iOS behavior: iOS declares the mode as import rather than open, which matches the semantics of ACTION_GET_CONTENT (just reading/importing data) rather than ACTION_OPEN_DOCUMENT (long term persistent access to a document/editing of it).
mode, forOpen: true, or persistent option.show -> pick and add pickMultiple). I already have code for this on Android. On iOS support for this is coming in iOS 11..isCancel(err) method to check if an error is due to the user canceling the document picking and actually bother to check for Activity.RESULT_CANCELED.filetype is poorly named, refactor this to just type.getInt(sizeIndex) to get the file size, it should not be converted to a string and than parsed back into an int.ACTION_GET_CONTENT and ACTION_OPEN_DOCUMENT explicitly state that the URI returned by the intent must be a content: URI that can be used with a content provider.DocumentsContract.Document.COLUMN_MIME_TYPE on KitKat+ instead of just getType to get the mime type.fileName to name: The DISPLAY_NAME on Android is not guaranteed to be a file name.DocumentPickerUtil should use Platform.OS === 'ios' instead of Platform.OS === 'android'.*/*/allFiles when type is not defined.DocumentPicker should be the default export. And types selection should not be named "*Util" or require a verbose extra import. I recommend DocumentPicker.types.images. The function invocation can safely be dropped while still avoiding {type: DocumentPicker.types.somethingThatDoesNotExist} bugs and supporting "allFiles by default" by checking for types that are undefined but are present (ie: 'type' in opts is true but opts.type === undefined) and a similar test for arrays.DocumentPicker.java to DocumentPickerModule.java and ReactNativeDocumentPicker.java to DocumentPickerPackage.java.com.reactnativedocumentpicker is a poor namespace name that's a reverse domain that this project does not own, refactor the library to use a github repo based namespace.type option with more than 1 types work on AndroidIn iOS 11 the native behaviour is different. Now there is a new option menu:
If click on "Browse":
"Browse" tab:
If click on "Locations":
There are all storage apps, if you pick a document from iCloud Drive or Drive, the component works all right but if you pick one from Dropbox there is no response, the callback is not called.
Does anyone know why?
After selecting the file from iCloud using Iphone Device or Simulator, when i am try to upload this file getting file not exist error.
Any help please ?
Hi,
I'm trying to use this package with zip files, mainly to read a zip file from dropbox/icloud.
Unfortunately, I'm unable to do so in iOS and Android.
On Android: Setting the filetype to DocumentPickerUtil.allFiles as in the example, shows the zip file and enable selection, but I'm getting a name which cannot be accessed using react-native-fs
the name includes %3A (which is decoded to':'). even when decoding the file url, I'm still unable to acces it. The full name is: "content://com.android.externalstorage.documents/document/primary:Anashim.zip"
I'm also "getting: content://com.google.android.apps.docs.storage/document/acc=1;doc=2149"
are those paths correct?
on iOS: setting the filetype to "public.archive" doesn't show any repository. setting to allFiles, shows the repositories, but on dropbox, the zip is disabled for selection :(
Anyone has success using the package for zip files?
Thanks!!
Samsung Galaxy S5 Android 6.0.1
Huaway Y6 Pro 5.1
When I open file manager with DocumentPicker.show(), then go into some folder and then click system back button, system show me alert: Bad result code: 0. I cannot fix it(((
platform: iOS (iphone 5s simulator)
RN: 0.34.0
react-native-document-picker: 2.0.0
the simulator crashes when i click the attach button. below is my code:
also tried const DocumentPicker = require('react-native').NativeModules.RNDocumentPicker
XCode error:
@Elyx0 , thanks man for your effort. This works really smooth.
But when I choose 'Documents' app it lets me choose any filetype and returns it with its extension.
However that is not supposed to be the case as in both iCloud and GoogleDrive the user can pick file with type specified in 'filetype' prop only and the url doesn't have an extension.
Do you have some ideas to handle such situations?
Thanks.
when running from iPhone:
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIPopoverController initWithContentViewController:] called when not running under UIUserInterfaceIdiomPad.'
Hi, @Elyx0 , first at all, great module for RN, your work is amazing.
I've been using your module, quite good, but I face an issue with it.
when trying load files from iCloud or Dropbox, the module it can't able to find it, also I've tried with
but not luck, it throw theses errors.
I've been trying all these codes
loadFile(url) {
console.log("START LOADING FILES");
setTimeout(() => {
console.log("LOADING FILES");
const parts = url.split("/");
const _parts = url.split("/");
const name = parts.pop();
const inbox = parts.pop();
const mainPath = `${RNFS.MainBundlePath}/${inbox}/${name}`;
const cachaPath = `${RNFS.CachesDirectoryPath}/${inbox}/${name}`;
const documentPath = `${RNFS.DocumentDirectoryPath}/${inbox}/${name}`;
const tmpPath = `${RNFS.TemporaryDirectoryPath}/${inbox}/${name}`;
_parts.shift();
_parts.shift();
_parts.shift();
_parts.shift();
const _url = _parts.join("/");
// URL
RNFetchBlob.fs.stat(`/${_url}`)
.then((file) => {
console.log("_url SUCCESS", file);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("_url => ERROR", err)
});
RNFS.stat(`/${_url}`)
.then((file) => {
console.log("RNFS _url SUCCESS", file);
})
.catch((err) => {
console.log("RNFS _url ERROR", err);
});
RNFS.stat(url)
.then((file) => {
console.log("RNFS URL SUCCESS", file);
})
.catch((err) => {
console.log("RNFS URL ERROR", err);
});
RNFS.stat(mainPath)
.then((file) => {
console.log("RNFS mainPath SUCCESS", file);
})
.catch((err) => {
console.log("RNFS mainPath ERROR", err);
});
RNFS.stat(cachaPath)
.then((file) => {
console.log("RNFS cachaPath SUCCESS", file);
})
.catch((err) => {
console.log("RNFS cachaPath ERROR", err);
});
RNFS.stat(documentPath)
.then((file) => {
console.log("RNFS documentPath SUCCESS", file);
})
.catch((err) => {
console.log("RNFS documentPath ERROR", err);
});
RNFS.stat(tmpPath)
.then((file) => {
console.log("RNFS tmpPath SUCCESS", file);
})
.catch((err) => {
console.log("RNFS tmpPath ERROR", err);
});
// URL
RNFetchBlob.fs.stat(url)
.then((file) => {
console.log("URL SUCCESS", file);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("URL => ERROR", err)
});
// MAIN
RNFetchBlob.fs.stat(mainPath)
.then((file) => {
console.log("mainPath SUCCESS", file);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("mainPath => ERROR", err)
});
// CACHE
RNFetchBlob.fs.stat(cachaPath)
.then((file) => {
console.log("cachaPath SUCCESS", file);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("cachaPath => ERROR", err)
});
// DOCUMENT
RNFetchBlob.fs.stat(documentPath)
.then((file) => {
console.log("documentPath SUCCESS", file);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("documentPath => ERROR", err)
});
// TEMP
RNFetchBlob.fs.stat(tmpPath)
.then((file) => {
console.log("tmpPath SUCCESS", tmpPath);
file.path = url;
//uploadFile(file);
})
.catch((err) => {
console.log("tmpPath => ERROR", err)
});
}, 5000);
}please, point me in the right direction to make this work.
Thanks.
After using react-native-document-picker, project Android, gradlew, assembleRelease
Error “Unable, to, process, incoming, event,'ProgressComplete '(ProgressCompleteEvent)”
The specific reason is unclear.
The version I used:
React-native-document-picker:2.0.0
React-native:0.42.0
My build.gradle configuration:
CompileSdkVersion 23
BuildToolsVersion "23.0.1""
DefaultConfig {
ApplicationId "com.xxx""
MinSdkVersion 18
TargetSdkVersion 22
VersionCode 1
VersionName "1""
{NDK
AbiFilters "armeabi-v7a", "x86""
}
}
Excuse me, how can I solve this problem?
I've installed package and linked libraries with "react-native link" command. I've also enabled iCloud in capabilities. But still I'm getting the following issue When I try to open document picker with:
DocumentPicker.show({
filetype: ['public.image'],
},(error,url) => {
alert(url);
});
Also, this is my package.json dependencies:
"axios": "^0.16.2",
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-document-picker": "^2.0.0"
my imports have started to fail:
import {DocumentPicker, DocumentPickerUtil} from "react-native-document-picker";
results in a "module does not exist"
Is this an intentional change?
[EDIT] also noticed the npm version doesn't return the filename, only the url. I can't see these changes in the git log though. Has it been published from another repository?
index.ios.js
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Button,View} from 'react-native';
const DocumentPicker = require('react-native').NativeModules.RNDocumentPicker;
export default class newproject extends Component {
render() {
return (
<View style={styles.container}>
<Button
onPress={() => this.openDocumentPicker()}
title='Open document picker'
/>
</View>
);
}
openDocumentPicker() {
DocumentPicker.show({
filetype: ['public.image'],
},(error,url) => {
alert(url);
});
console.log(DocumentPicker) // prints 'undefined'
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
AppRegistry.registerComponent('newproject', () => newproject);
package.json dependencies:
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-document-picker": "^2.0.0",
I ran react-native link, restarted simulator, packager, still doesn't work.
Is there a way to make this present over a modal?
The version in npm is not the same as here , please update.
Hi,
Does it support multiple files select or not? If not, please guide me how to patch.
Regards,
Mike
Hey, just tried using the package but i get a weird error, i checked all the manual installing and it is all correct. Im trying to when the user opens the 'page' it will appear the picker after 200 milisec but it gets this error or sometimes the App closes:
This is what i wrote:
const DocumentPicker = require('react-native').NativeModules.RNDocumentPicker;
componentDidMount(){
this.timeoutHandle = setTimeout(() => { DocumentPicker.show({ filetype: ['public.image'], },(error,url) => { alert(url); }); }, 200);
}
Hi,
Thanks for the lib, great work 👍
I'd like to access my documents stored in iBooks to retrieve their own path. My goal is to access saved pdf on the device and being able to upload them from my app to my server using react-native-fetch-blob.
Does this lib support iBooks files ? Any restrictions from Apple ?
Thanks ;)
Hi @Elyx0 @KinanKazmi
I'm trying to upload file to my server (due to your example)
The example file in attachments
archive images.zip
I got error from RNFS library during the preparing real path
<Warning>: Failed to open target file at path: file:///Users/anastasiiak/Library/Developer/CoreSimulator/Devices/deviceID/data/Containers/Data/Application/appID/tmp/org.app/archive%20images.zip
Could you explain how to fix this problem?
Thanks
The following code:
DocumentPicker.show({
filetype: DocumentPickerUtil.allFiles(),
}, (err, url) => {
console.log('picker: ', err, url);
});is throwing the following error
JSON value 'public.content' of type NSString cannot be converted to NSArray
Hy Elyx0. I choose the pdf file and I want to change it to base64 but, there is warning like this. Is there a solution ???
I'm trying to open document picker but it give me error.
Cannot read property 'show' of undefined
Files.openDocumentPicker
Files.js:48:23
Object.onPress
Files.js:74:40
Object.touchableHandlePress
TouchableNativeFeedback.android.js:170:37
Object._performSideEffectsForTransition
Touchable.js:746:13
Object._receiveSignal
Touchable.js:664:11
Object.touchableHandleResponderRelease
Touchable.js:433:9
Object.invokeGuardedCallback
ReactNativeStack-dev.js:130:13
Object.invokeGuardedCallback
ReactNativeStack-dev.js:166:37
Object.invokeGuardedCallbackAndCatchFirstError
ReactNativeStack-dev.js:169:58
executeDispatch
ReactNativeStack-dev.js:202:88
this is my code:
openDocumentPicker(){ DocumentPicker.show({ filetype: [DocumentPickerUtil.images()], },(error,res) => { console.log( res.uri, res.type, res.fileName, res.fileSize ); this.setState({ file: res, image: res.uri }) }); }
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.