how do i fix "cannot read property match of undefned" in this code

Question

i'm trying to integrate nativescript-imagepicker plugin with my Nativescript App, but i get error **cannot read **property match of undefined**** below is what i have already tried, thanks.

function onSelectSingleTap(args) {  
    var context = imagepickerModule.create({
        mode: "single"
    });
    if (platformModule.device.os === "Android" && platformModule.device.sdkVersion >= 23) {   
        permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, "I need these permissions to read from storage")
        .then(function() {
            console.log("Permissions granted!");
            startSelection(context);
        })
        .catch(function() {
            console.log("Uh oh, no permissions - plan B time!");
        });
    } else {
        startSelection(context);
    }
}

function sendImages(selected) {
    let fileUri = selected.fileUri;
    imageName = extractImageName(fileUri);

    var request = {
        url: "http://vvvvvv.com/skog/upload.php",
        method: "POST",
        headers: {
            "Content-Type": "application/octet-stream",
            "File-Name": imageName
        },
        description: "{ 'uploading': " + imageName + " }"
    };
    //get the image source and upload from there
    selected.getImage().then(imageSource => {
        let temp = fs.knownFolders.temp();
        let uniqueName = '_' + Math.random().toString(36).substr(2, 9);
        let filePath = fs.path.join(temp.path, uniqueName + ".jpg");
        let saved = imageSource.saveToFile(filePath, enums.ImageFormat.jpeg);
        console.log(`item saved:${saved}`);
        var task = session.uploadFile(filePath, request);

        task.on("progress", logEvent);
        task.on("error", logEvent);
        task.on("complete", x => cleanFile(filePath));
    });
    //return task;
}
function logEvent(e) {      
        console.log("----------------");
        console.log('Status: ' + e.eventName);
        console.log('Error: ' + e.error);
        // console.log(e.object);
        if (e.totalBytes !== undefined) {
            console.log('current bytes transfered: ' + e.currentBytes);
            console.log('Total bytes to transfer: ' + e.totalBytes);
        }  
    }
function cleanFile(file){
    fs.remove(file);
}
function startSelection(context) {
    context
        .authorize()
        .then(function() {
            imageItems.length = 0;
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(function(selected) {
                sendImages(selected);
                //selected.uploadTask = sendImages(selected);             
                selected.imageName = imageName;

                console.log("----------------");
                console.log("uri: " + selected.uri);           
                console.log("fileUri: " + selected.fileUri);
                console.log('Image name:' + imageName);

                imageItems.push(selected);
            });
            //list.items = selection;
        }).catch(function (e) {
      console.log(e);
      alert(e.message);
        });
}
function extractImageName(fileUri) {
  var pattern = /[^/]*$/;
  var imageName = fileUri.match(pattern);

  return imageName[0];
}

I don't think the fault is from the php which is why i'm not adding the code to the question, but if you think otherwise, please let me know please help

Answer 1

selection is an array of ImageAsset, so selected.getImage() is obviously undefined. It has only getImageAsync(...) but that returns native image data.

To create ImageSource from asset, you should use fromAsset method.

fileUri is also undefined, there is no property as such. I'm not sure where you are picking all these from. I suggest you to refer the documentation for all valid properties and methods.

Answer 2

this will do it

function onSelectSingleTap(args) {
      var context = imagepickerModule.create({
          mode: "single"
      });

      if (platformModule.device.os === "Android" && platformModule.device.sdkVersion >= 23) {
          permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, "I need these permissions to read from storage")
              .then(function () {
                  console.log("Permissions granted!");
                  startSelection(context);
              })
              .catch(function () {
                  console.log("Uh oh, no permissions - plan B time!");
              });
      } else {
          startSelection(context);
      }
    }


    function startSelection(context) {

      context
          .authorize()
          .then(function () {

              return context.present();
          })
          .then(function (selection) {
            selection.forEach(function(selected) {
              //alert(selected.android.toString()); 
              var file =  selected.android.toString();
              var url = "https://adekunletestprojects.000webhostapp.com/skog/upload.php";
              var name = file.substr(file.lastIndexOf("/") + 1);
              //alert(name);
              var bghttp = require("nativescript-background-http");
              var session = bghttp.session("image-upload");
              var request = {
              url: url,
              method: "POST",
              headers: {
                  "Content-Type": "application/octet-stream",
                  "File-Name": name
              },
            description: "Uploading " + name
        };

            var task = session.uploadFile(file, request);
            task.on("progress", progressHandler);
            return task;
            function progressHandler(e) {
              var toast = Toast.makeText("uploaded " + e.currentBytes + " / " + e.totalBytes);
              toast.show();
          }
            });
          }).catch(function (e) {
              console.log(e.eventName);
              alert(e.message);
          });
    }