react-native-documents / document-picker Goto Github PK
View Code? Open in Web Editor NEWDocument Picker for React Native
Home Page: https://react-native-documents.github.io/
License: MIT License
Document Picker for React Native
Home Page: https://react-native-documents.github.io/
License: MIT License
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
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.
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 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"
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?
pretty please :)
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 }) }); }
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.
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.
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!!
为什么我显示的选择文件后,返回的参数里面的uri是这样的
uri:"content://com.android.providers.media.documents/document/image%3A31760"
而不是"file:///image/image-ed114c33-22ee-43ad-bfda-538a050fa7d9.jp"呢?
Hi,
Does it support multiple files select or not? If not, please guide me how to patch.
Regards,
Mike
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);
});
}
check this out: microsoft/react-native-code-push#678
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
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 ;)
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?
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.
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
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
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 ...
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 AndroidDocumentPicker is only giving option of ICloud for all UTI types.
The version in npm is not the same as here , please update.
Have you any idea if its possible to pick a folder to save to?
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);
}
soon I used it , it went crashed . testing on xcode
componentDidMount(){
const DocumentPicker = NativeModules.RNDocumentPicker;
DocumentPicker.show({
filetype: ['public.image'],
},(error,url) => {
alert(url);
});
}
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.
How can one access device local folders apart from cloud options?
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
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 ?
Is there a way to make this present over a modal?
when running from iPhone:
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIPopoverController initWithContentViewController:] called when not running under UIUserInterfaceIdiomPad.'
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?
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
@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.
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
"
*** 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.'
"
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
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.