Can't get the data response object from react-native-customized-image-picker

I have read in the document here: https://github.com/mg365/react-native-customized-image-picker that I could get the response object of data from an image, but when I tried it I got undefined. I can get other objects like size, mime, and path like this:

    SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
    }).then((imgResponse) => {
      console.log(imgResponse[0].path); <-- This logs the correct path
      console.log(imgResponse[0].data); <-- This logs the undefined
      let imgSource = { uri: imgResponse[0].path };
      this.setState({
        userimgSource: imgSource,
      });
    });
   }

My ultimate goal is to upload an image to a server and I think having the data is required? I am using the RNFetchBlob multipart/form-data. Any help on this is appreciated, thank you!

First of all data prop is not at all required, you can upload your file using path. If you really want data then there is a prop name "includeBase64"(by default it false) set it to true.

   SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
     includeBase64:true
    
    })

NOTE: Setting {includeBase64: true} will convert your image to base64 which may lead to OUT OF MEMORY issue in android when you try to upload a large image.

To Upload Your using path and React-Native-Fetch-Blob

    RNFetchBlob.fetch('POST', URL, {
        // dropbox upload headers
        ...
        'Content-Type': 'multipart/form-data',
        // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
        // Or simply wrap the file path with RNFetchBlob.wrap().
    }, [
            // element with property `filename` will be transformed into `file` in form data

            { name: 'file', filename: 'Image.png', data: RNFetchBlob.wrap(response.uri) },
            // custom content type

        ]).then((res) => {

        })
        .catch((err) => {
            // error handling ..
        })

And if you have RN>=0.54 then You don't need fetch-blob to upload image React-native now has full blob support.try this

var photo = {
      uri: URI,
      type:image/png, // check your object you will get  mime-type in image picker response.
      name: file,
      fileName:Image.png
    };
    var body = new FormData();
    body.append('file', photo);
    axios({
        method: 'post',
        url: 'URL',
        data: body,
        config: { headers: {'Content-Type': 'multipart/form-data' }}
    })

reference Links

upload video using React-native-fetch-blob

react-native blob support announcement

send Form data using Axios