nativescript-imagepicker: Imagepicker not working, selection is empty

Which platform(s) does your issue occur on?

  • Both
  • iOS 10 - 11/Android 7
  • emulator and device. iPhone 5s - Xiaomi Mi Note 4

Please, provide the following version numbers that your issue occurs with:

  • CLI: 4.0.0
  • Cross-platform modules: 4.0.0
  • Runtime(s): 4.0.1
  • Plugin(s): “dependencies”: { “@angular/animations”: “~5.2.0”, “@angular/common”: “~5.2.0”, “@angular/compiler”: “~5.2.0”, “@angular/core”: “~5.2.0”, “@angular/forms”: “~5.2.0”, “@angular/http”: “~5.2.0”, “@angular/platform-browser”: “~5.2.0”, “@angular/platform-browser-dynamic”: “~5.2.0”, “@angular/router”: “~5.2.0”, “nativescript-angular”: “~5.2.0”, “nativescript-camera”: “^4.0.2”, “nativescript-drop-down”: “^3.2.1”, “nativescript-imagepicker”: “^6.0.1”, “nativescript-iqkeyboardmanager”: “^1.2.0”, “nativescript-ngx-fonticon”: “^4.1.0”, “nativescript-plugin-firebase”: “^5.2.0”, “nativescript-social-login”: “^4.0.0”, “nativescript-sqlite”: “^2.0.1”, “nativescript-telerik-ui”: “^3.1.4”, “nativescript-theme-core”: “~1.0.4”, “nativescript-ui-listview”: “^3.5.4”, “nativescript-ui-sidedrawer”: “^3.5.2”, “reflect-metadata”: “~0.1.10”, “rxjs”: “~5.5.5”, “tns-core-modules”: “^4.0.0”, “zone.js”: “~0.8.18” }, “devDependencies”: { “@angular/compiler-cli”: “~5.2.0”, “@ngtools/webpack”: “~1.9.1”, “babel-traverse”: “6.4.5”, “babel-types”: “6.4.5”, “babylon”: “6.4.5”, “clean-webpack-plugin”: “~0.1.19”, “codelyzer”: “~4.0.2”, “copy-webpack-plugin”: “~4.3.0”, “css-loader”: “~0.28.7”, “extract-text-webpack-plugin”: “~3.0.2”, “lazy”: “1.0.11”, “nativescript-dev-sass”: “^1.3.5”, “nativescript-dev-typescript”: “~0.6.0”, “nativescript-dev-webpack”: “^0.11.0”, “nativescript-worker-loader”: “~0.8.1”, “raw-loader”: “~0.5.1”, “resolve-url-loader”: “~2.2.1”, “sass-loader”: “~6.0.6”, “tns-platform-declarations”: “^4.0.0”, “tslint”: “~5.8.0”, “typescript”: “~2.6.2”, “uglifyjs-webpack-plugin”: “~1.1.6”, “webpack”: “~3.10.0”, “webpack-bundle-analyzer”: “^2.9.1”, “webpack-sources”: “~1.1.0” }

Please, tell us how to recreate the issue in as much detail as possible.

When trying to select an image, this code that I’ve been using for a while stopped working, returning undefined is not an object (evaluating 'file.split'). Also, according to the demo provided selection[0] returns

{
    "_observers": {},
    "_options": {
        "keepAspectRatio": true
    },
    "_ios": {}
}

Is there any code involved?

private _startSelection(context) {
        context.authorize().then(() => {
            return context.present();
        }).then((selection) => {
            selection.forEach((selected) => this.user.image = selected.fileUri);
            const base64 = this._imgToBase64(this.user.image);
            const data = `data:image/${this.user.image.split('.').pop().toLowerCase()};base64,${base64}`;
            this._userService.saveImage({image: data}).subscribe(
                (result: any) =>  {
                    console.log(result);
                },
                (error: any) => {
                    console.log(error);
                }
            );
            this._changeDetectionRef.detectChanges();
        }).catch((e) => console.log(e));
    }

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 2
  • Comments: 21 (4 by maintainers)

Most upvoted comments

@sivamamidi-REISys the issue you’re facing is about getImage method.

If you upgraded to 6.0 forget about this method. What you need to do now is:

selection.forEach( (selected_item) => {
   if (platformModule.device.os === "Android") {
       //fileUri = selected_item.android;
       fileUri = selected_item.android.toString();
   } else {
       // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
       /*
       let folder = fs.knownFolders.documents();
       let path = fs.path.join(folder.path, "prescription.png");
       let saved = imagesource.saveToFile(path,  enums.ImageFormat.png);
       fileUri = path;
       */
       const opt = PHImageRequestOptions.new();
       opt.version = PHImageRequestOptionsVersion.Current;
       PHImageManager.defaultManager().requestImageDataForAssetOptionsResultHandler(
        ios, opt, (NSData, dataUTI, UIImageOrientation, NSDictionary) => {
        fileUri = NSDictionary.objectForKey("PHImageFileURLKey").toString();
        });
   }
   fileUri = fileUri || selection[0].fileUri;
   this.upload(fileUri);
});

@lini thank you for your reply.

iOS: always unable to get image path. Android: unable to get image path if selected image is not stored in the device’s internal memory (Google Drive, SD Card, etc.)

Yes that’s correct.

For the iOS issue - please try the following approach to get the image path - #181 (comment)

I’ve tried that and it doesn’t work. The solution above relies on the selection which for me looks like this:

JS: {
JS:   "_observers": {},
JS:   "_options": {
JS:     "keepAspectRatio": true
JS:   },
JS:   "_ios": ""
JS: }

For the Android issue - can you confirm that selecting files from internal memory works and only selecting files from external locations produces an null location?

I can definitely confirm that that’s the case. Even testing the demo app gives me the same issue.