*Possible Unhandled Promise Rejection (id: 0): Type Error: undefined is not an object (eveluating 'result.cancelled') Cloudinary image upload

Question

can anybody help me. I have this project where I have to upload image into cloudinary. the problem here is there are warning on Possible Unhandled Promise Rejection (id: 0): Type Error: undefined is not an object (eveluating 'result.cancelled') Can somebody help me?

Here is my Constructor

    constructor(props) {
  super(props);
this.state = {
  image: '',
  receiptamount: '',
  driverusername: '',
  requesterusername: '', 
  avatarSource: '',
};
}

Here is my function

    pickImage = async () => {
      let result = await ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);
    
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
          const source = { uri: 'data:image/jpeg;base64,' + response.data }
          
          this.setState({
            image: 

response.uri,
      });
      console.log( {uri: response.uri});
      // You can also display the image using data:
      // const source = { uri: 'data:image/jpeg;base64,' + response.data };
  
      this.setState({
        avatarSource: source,
      });
    }
  });

    if (!result.cancelled) {
        
    
        // url generation via cloudinary
        let base64Img = this.state.avatarSource;
    
        //Add your cloud name
        let apiUrl = 'https://api.cloudinary.com/v1_1/'someinfo'/image/upload';
    
        let data = {
          file: base64Img,
          upload_preset: 'my_upload_preset',
          cloud_name : 'kusinahanglan',
        };
        
        fetch(apiUrl, {
          method: 'POST',
          
      body: JSON.stringify(data),
      headers: {
        'content-type': 'multipart/form-data',
      },
      
    }).then(r => {
      data = r._bodyText;
      console.log('data value:' + data)
      // uploads url to image as generated from cloudinary
      firebase.database().ref('receipts/' + this.state.requesterusername).set({
        imagename: JSON.parse(r._bodyText).public_id + "." + JSON.parse(r._bodyText).format,
        imageurl: JSON.parse(r._bodyText).secure_url,
        receiptamount: this.state.receiptamount,
        driverusername: this.state.driverusername,
        requesterusername: this.state.requesterusername,
        
        });
    });
  }
};



render() {
  return (
    <View style={styles.container}>
    
                            <TextInput
        value1={this.state.receiptamount}
        placeholder = "receipt amount"
        onChangeText = {(value1) => this.setState({receiptamount:value1})}
        />
      
                                    <TextInput
        value2={this.state.driverusername}
        placeholder = "driver username"
        onChangeText = {(value2) => this.setState({driverusername:value2})}
        />
        
                                      <TextInput
        value3={this.state.requesterusername}
        placeholder = "requester username"
        onChangeText = {(value3) => this.setState({requesterusername:value3})}
        />
    
      <TouchableOpacity
        onPress={() => this.pickImage()}
        style={{ width: 200, alignSelf: 'center' }}>
        <View style={{ backgroundColor: 'transparent' }}>
          {this.state.image
            ? <Image
                source={{ uri: this.state.image }}
                style={{
                  width: 200,
                  height: 200,
                  borderRadius: 100,
                  alignSelf: 'center',
                }}
              />
            : <View
                style={{
                  backgroundColor: 'grey',
                  width: 200,
                  height: 200,
                  borderRadius: 100,
                }}
              />}
            
        
        </View>
      </TouchableOpacity>
    </View>
  );
}
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',

  backgroundColor: '#ecf0f1',
},
});

Answer 1

Result from ImagePicker will be undefined, as the library does not return anything there. Put your code in response.didCancel instead.

let result = await ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');

    // url generation via cloudinary
    let base64Img = this.state.avatarSource;

    //Add your cloud name
    let apiUrl = 'https://api.cloudinary.com/v1_1/'my info'/image/upload';

    let data = {
      file: base64Img,
      upload_preset: 'my_upload_preset',
      cloud_name : 'kusinahanglan',
    };

    fetch(apiUrl, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'content-type': 'multipart/form-data',
      }
    }).then(r => {
      data = r._bodyText;
      console.log('data value:' + data)
      // uploads url to image as generated from cloudinary
      firebase.database().ref('receipts/' + this.state.requesterusername).set({
    imagename: JSON.parse(r._bodyText).public_id + "." + JSON.parse(r._bodyText).format,
    imageurl: JSON.parse(r._bodyText).secure_url,
    receiptamount: this.state.receiptamount,
    driverusername: this.state.driverusername,
    requesterusername: this.state.requesterusername,

    });
});
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      const source = { uri: 'data:image/jpeg;base64,' + response.data }

      this.setState({
        image: response.uri,
  });
  console.log( {uri: response.uri});
  // You can also display the image using data:
  // const source = { uri: 'data:image/jpeg;base64,' + response.data };

  this.setState({
    avatarSource: source,
  });
}

});