[ios] Document picker not giving the response.

[StarkAndy]

I am using the Document picker version 3.2.4 .It's not returning the file after selecting file from drive.

[StarkAndy]

@hi All, if anybody runs out with the similar issue in ios please try different account in drive and don't forget to set passcode .Still if the issue remain let me know i will try to help.

Thanks

[ThanhQuang1410]

I have some problem too. The folder screen show up with my files. But not thing happen when I choose a file. No response no error. Weird

[thuytony]

Hi. Anyone have solution to fix that issues? Please help me.

[thuytony]

I facing with it on Android :(

[StarkAndy]

@ThanhQuang1410 what's your react-native version and document picker version ? .If it's ios try using another drive account or try setting up icloud account there is some restriction.

[ThanhQuang1410]

Here is my react native and document picker version: "react-native": "0.61.5" and "react-native-document-picker": "^3.2.4"

[StarkAndy]

@ThanhQuang1410
there is a point mentioned in https://www.npmjs.com/package/react-native-document-picker .readContent: Boolean which defaults to false. If readContent is set to true the content of the picked file/files will be read and supplied in the result object. Check if you have set it to true it can be one of the reason .

[sujanvaland]

Same issue some locations returns nothing (Downloads,Drive) i get this when i print result
{size: 277976, name: "60", type: "application/pdf", uri: "content://com.google.android.apps.docs.storage.leg…CzvPGCe2GKBVUE_qSsdGr5MCAkjBexMAp-citFSg%3D%3D%0A"}

I get the URI, but when i try to to RNFS.stat it throws error, please note for some location it works any idea ?

Error: failed to stat path null because it does not exist or it is not a folder

[JerakRus]

@sujanvaland I get the exact same error when the file in google drive or the name in ather language (utf-8). Did you find any solution?

[sujanvaland]

Yes i dropped DocumentPicker and using FilePickerManager. You can get the Upload URL from response in below code refer res.path

import FilePickerManager from 'react-native-file-picker';

FilePickerManager.showFilePicker(null, (res) => {
if (res.didCancel) {
ToastAndroid.show("User cancelled file picker", ToastAndroid.LONG);
}
else if (res.error) {
ToastAndroid.show("FilePickerManager Error:" + res.error, ToastAndroid.LONG);
}
else {
if(res.type =="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"|| res.type =="application/zip"){
if((res.size / 1000000) > 10)
{
ToastAndroid.show("File should be of maximum 10 MB", ToastAndroid.SHORT);
this.setState({fileDetail:false,
fileName:'',
fileType : '',
fileSize:0})
}
else{
this.setState({fileDetail:true,
fileName:res.fileName,
fileUrl:res.path,
fileType : res.type,
fileSize:res.readableSize})
}
}
else{
ToastAndroid.show("Invalid File Type", ToastAndroid.LONG);
}
}
});

[JerakRus]

Thanks so much for sharing your code! I looked at this library, and judging by the documentation, it does not work in ios. Why are there so many critical issues with pickers = (

[sujanvaland]

For IOS i am using Document Picker only below is the code...You can check PLATFORM and write your logic

SelectFile = async () => {
var that = this;
//Checking for the permission just after component loaded

  const result = await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
  if ("granted" === result) {
    try {
        const res = await DocumentPicker.pick({
          type: [DocumentPicker.types.allFiles]
        });
       if(res.type == "audio/mpeg" || res.type ==  "image/png"|| res.type ==  "image/jpeg" 
        || res.type =="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"|| res.type =="application/zip"){
          if((res.size / 1000000) > 10){
          alert("File should be of maximum 10 MB");
          that.setState({fileDetail:false,
            fileName:'',
            fileType : '',
            fileSize:0})
        }
        else{

          that.setState({fileDetail:true,
                  fileName:res.name,
                  fileUrl:res.uri,
                  fileType : res.type,
                  fileSize:res.size / 1000000})

        }
       }else{
         alert("Invalid File Type");
       }
      } catch (err) {
        if (DocumentPicker.isCancel(err)) {
          // User cancelled the picker, exit any dialogs or menus and move on
        } else {
          throw err;
        }
      }
  } 
  else{
   return;
  }

}

[JerakRus]

Thank you for sharing. Yesterday I found a PR in document-picker that solves our problem, generally works well and does not need to use 2 libraries. But he has not yet been added to the master. While I think of him. #264

[Piyush132000]

Error: While trying to resolve module react-native-document-picker from file C:\Users\nites\App\Components\FileScreen.js, the package C:\Users\nites\App\node_modules\react-native-document-picker\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\nites\App\node_modules\react-native-document-picker\index.js. Indeed, none of these files exist:

• C:\Users\nites\App\node_modules\react-native-document-picker\index.js(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• C:\Users\nites\App\node_modules\react-native-document-picker\index.js\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  at ResolutionRequest.resolveDependency (C:\Users\nites\App\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:65:15)
  at DependencyGraph.resolveDependency (C:\Users\nites\App\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
  at Object.resolve (C:\Users\nites\App\node_modules\metro\src\lib\transformHelpers.js:267:42)
  at C:\Users\nites\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
  at Array.map ()
  at resolveDependencies (C:\Users\nites\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
  at C:\Users\nites\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
  at Generator.next ()
  at asyncGeneratorStep (C:\Users\nites\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
  at _next (C:\Users\nites\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)

code

import React, { Component } from 'react';

import { StyleSheet, Text, TouchableOpacity, View, Alert } from 'react-native';
import DocumentPicker from 'react-native-document-picker';

export default class FileScreen extends Component {

constructor(props) {
super(props);
this.state = {
singleFileOBJ: '',
};
}

async SingleFilePicker() {
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],

  });

  this.setState({ singleFileOBJ: res });

} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    Alert.alert('Canceled');
  } else {
    Alert.alert('Unknown Error: ' + JSON.stringify(err));
    throw err;
  }
}

}

render() {
return (

    <Text style={styles.text}>
      File Name: {this.state.singleFileOBJ.name ? this.state.singleFileOBJ.name : ''}
    </Text>

    <Text style={styles.text}>
      file Type: {this.state.singleFileOBJ.type ? this.state.singleFileOBJ.type : ''}
    </Text>

    <Text style={styles.text}>
      File Size: {this.state.singleFileOBJ.size ? this.state.singleFileOBJ.size : ''}
    </Text>

    <Text style={styles.text}>
      File URI: {this.state.singleFileOBJ.uri ? this.state.singleFileOBJ.uri : ''}
    </Text>

    <TouchableOpacity
      activeOpacity={0.5}
      style={styles.button}
      onPress={this.SingleFilePicker.bind(this)}>
      <Text style={styles.buttonText}>
        Click Here To Pick File
      </Text>
    </TouchableOpacity>

  </View>
);

}
}

const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: '#fff',
padding: 16,
justifyContent: 'center',
},

button: {
width: '100%',
backgroundColor: '#0091EA',
borderRadius:9,
},

buttonText: {
color: '#fff',
fontSize: 21,
padding: 10,
textAlign: 'center'
},

text: {
color: '#000',
fontSize: 16,
padding: 10,
textAlign: 'left'
},
});

please help me