rnmods / react-native-document-picker

Document Picker for React Native

react-native-document-picker

📣📣 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!

react-native-document-picker's Issues

Unable to process incoming event 'ProgressComplete ' (ProgressCompleteEvent)

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?

Uploading with android fail with react-native-firebase

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.

support RN 40

check this out: microsoft/react-native-code-push#678

Please update your readme/doc

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.

Gradle dependency wrong

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 ...

can't open it over a modal

Is there a way to make this present over a modal?

Add android documentation on README

Spaces in filename

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

application initializing document picker is missing the icloud entitlement

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"

JSON value 'public.content' of type NSString cannot be converted to NSArray

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

Proper Intent for opening system picker on Android

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.

import failing

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?

no such file or directory, open

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 ???

iBooks compatibility

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

Does not work with iPad.

"
*** 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.'
"

Access Content uri in android

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

Android No Activity found to handle

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

After selecting a pdf file type is null

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

promisifying the module

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

add example

recent iPad changes causing crash?

when running from iPhone:

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIPopoverController initWithContentViewController:] called when not running under UIUserInterfaceIdiomPad.'

DocumentPicker shows only ICloud Option

DocumentPicker is only giving option of ICloud for all UTI types.

Some questions

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?

IOS using module without iCloud capability

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

iOS 11 and Dropbox

In 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?

Move file using react-native-fs

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

Unable to see Local folders such as Album

How can one access device local folders apart from cloud options?

react-native link does not work for android

Error trying load files from iCloud, Dropbox

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

• react-native-fs
• react-native-fetch-blob

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.

Unable to use this package with archive (zip files)

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!!

'Documents' app ignoring the 'filetype'

@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.

Getting "undefined is not an object (evaluating 'DocumentPicker.show')" error on a new project

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 to get file size?

Bad result code: 0 alert in file manager

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(((

Cannot read property 'show' of undefined

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

Error : File not exist

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 ?

react-native run-android build crashes

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

add license

pretty please :)

Feature request: ability to disable iCloud

Picking a folder to save to

Have you any idea if its possible to pick a folder to save to?

Gallery option unavailable

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

update npm

The version in npm is not the same as here , please update.

picker doesn't return type for PDF

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

Multiple Select

Hi,

Does it support multiple files select or not? If not, please guide me how to patch.

Regards,

Mike

Simulator crashes

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:

Ability to select multiple files.

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?

[RFC] 3.0.0

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.

• iOS idea: The hfsTypeCode should be used to attempt to return a mime type. (hfsTypeCode doesn't seem to return anything) Use Apple's UTI handling to implicitly get a mime type from a file extension.
• iOS bug: A callback should be called with an error instead of exiting and never responding.
• iOS bug: Migrate from the deprecated UIDocumentMenuViewController to UIDocumentPickerViewController.
• Android: ACTION_PICK should never be used, it is intended for choosing data from a media provider, not choosing any document of a mime type.
• Android: 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).
  • Optional: We could provide an option to allow the user to choose between import/get_content mode and persistent open mode. Maybe a mode, forOpen: true, or persistent option.
• Android: Intent handler should guard against nonexistent current activity and failure to show the document picker due to a throw.
• Support multiple document selection: Do this with a second method that always returns a promise for an array to keep the possibility of supporting flow types (rename show -> pick and add pickMultiple). I already have code for this on Android. On iOS support for this is coming in iOS 11.
• Return a Promise instead of using a callback: RN's native documentation recommends using promises for async js/native handling instead of callbacks (callbacks to native on iOS are marked as experimental). And almost all of react-navigation's own public APIs now use Promises instead of callbacks.
• Errors returned by the library should include a string error code that makes it possible to identify the error.
• Add a .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.
• Android: A document picker should not implicitly download a file if it gets a network URL.
• Android: Use getInt(sizeIndex) to get the file size, it should not be converted to a string and than parsed back into an int.
• Android: Drop all file path and http handling from the document picker. Both 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.
• Android: Update content resolver handler to use DocumentsContract.Document.COLUMN_MIME_TYPE on KitKat+ instead of just getType to get the mime type.
• Change 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'.
• Default to an */*/allFiles when type is not defined.
• Cleanup the public API: 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.
• Android: Rename 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.
• Add a warning when native code is not available
• Make sure a chooser is used on Android API level 18 where the new DocumentProvider picker is not available
• #50 Fix make type option with more than 1 types work on Android

can not read property 'show' of undefined

soon I used it , it went crashed . testing on xcode
componentDidMount(){

const DocumentPicker = NativeModules.RNDocumentPicker;

DocumentPicker.show({
filetype: ['public.image'],
},(error,url) => {
alert(url);
});

}

选择文件后返回的路径没办法识别

为什么我显示的选择文件后，返回的参数里面的uri是这样的
uri:"content://com.android.providers.media.documents/document/image%3A31760"
而不是"file:///image/image-ed114c33-22ee-43ad-bfda-538a050fa7d9.jp"呢？

Does this support browsing photos?