undefined returns from react-native-document-picker-CodePudding

I am attempting to use the 'react-native-document-picker' module in React Native to build image file 'picking' functionality.

import React, { Component } from "react";
import { Button, Dimensions, Image, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";

import DocumentPicker from 'react-native-document-picker';

export default class Images extends Component {
constructor(props) {
  super(props);

  this.state = {
    photo: null
  };
}

//*****FUNCTIONS

 ChoosePhoto = async () => {

    try {

     const res = await DocumentPicker.pick({ type: [DocumentPicker.types.images], });
       //Provide the type of file you want user to pick

console.log('File Selection Response: '   JSON.stringify(res));
console.log('File Selection Response JSON: '   res);
console.log(
  res.uri,
  res.type, // mime type
  res.name,
  res.size
)    

this.setState({ photo: res });  // Setting the state to show single file attributes

    } catch (err) {
    this.setState({ photo: null });
  
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled');  //user canceled the document selection
      } else {
        alert('Selection Error: '   JSON.stringify(err));  //Unknown Error
      }  //Handling any exception (if any)

    }  //try routine

};

//*****

 render() {
   return (

     <View style={styles.main}>

       <TouchableOpacity
         style={styles.buttonStyle}
         onPress={this.ChoosePhoto}
       >
           <Text style={styles.buttonTextStyle}>Select Image</Text>
       </TouchableOpacity>

     </View>

   );  //return
 }  //render

}  //class 'Images' Component

I do not receive any errors upon running the code above. The problem is that all after 'picking' a file the 'console.log' statements for returned JSON values are "undefined".

In other words the command for "const res = await DocumentPicker.pick({ type: [DocumentPicker.types.images], });" seems to run OK and the initial 'console.log' (that utilizes a 'JSON.stringify' statement) returns info like this:

File Selection Response: [{"size":144672,"fileCopyUri":null,"name":"IMG-20221228-WA0002.jpg","type":"image/jpeg","uri":"content://com.android.providers.media.documents/document/image:2483"}]

However any other 'console.log' statement that is there (without the 'JSON.stringify' statement) just reads as "undefined"...therefore the "this.setState({ photo: res });" also seems to be setting "undefined" as the value for the "photo" variable.

Does anybody know why the JSON values are returned as "undefined" after the 'pick'? How am I to set the "this.state.photo" variable correctly using the information that is returned from the 'pick'? I thank you in advance for any advice.

CodePudding user response：

react-native-document-picker return DocumentPickerResponse[] which is array even if you set

allowMultiSelection: false

so you have to use it like an array. res.uri will be undefined but res[0].uri will get you values.

according to documentation :

Breaking in v6: pick returns a Promise<Array> instead of Promise. If you were using pick, change those usages to pickSingle.

if you want to pick only one item at a time then i suggest you should use ** pickSingle** which will return you an object instead of Array.