nativescript image-picker not working

Question

I'm using the plugin image-picker for nativescript and I copied the example code to see how it works and to adapt it to my code. But the code doesn't work. When I tap the button it's supposed that the screen gallery from my device should be opened, but nothing happen when I tap the button.

The code below is how I implements this.

album_list.component.ts

import { Component } from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';

//image picker
var imagepicker = require("nativescript-imagepicker");


@Component({
    selector:'album_list',
    moduleId: module.id,
    templateUrl: "album_list.component.html",

})

export class AlbumListComponent{

    constructor(private routerExt: RouterExtensions ){}


    ngOnInit() {

    }

    onSelectMultipleTap() {
        console.log('Im in');

        function selectImages() {
            var context = imagepicker.create({
                mode: "multiple"
            });

            context
                .authorize()
                .then(function() {
                    return context.present();
                })
                .then(function(selection) {
                    console.log("Selection done:");
                    selection.forEach(function(selected) {
                        console.log(" - " + selected.uri);
                    });
                }).catch(function (e) {
                    console.log(e);
                });
        }

    }


}

album_list.component.html

<StackLayout>
        <Button text="Pick Multiple Images" (tap)="onSelectMultipleTap()" > </Button>
</StackLayout>

As I said, when I tap the button in the html the log from the function onSelectMultipleTap appears, but nothing else.

Thanks!!

Answer 1

I had a slightly different issue that only occurred on iOS. I'm working on an upgraded Nativescript project from 4 to 6, and yes I know NS 8 is out right now, but some of the libraries being used aren't supported on the latest NS.

My application had a modal list view that popped up to allow the user to select between camera and gallery, and once the user clicked one of the options the list modal would close. At that time the camera or gallery modal should have appeared but it didn't. What was happening was the closing of the first model was somehow blocking the second modal from opening. My fix was to add a conditional async timeout in my method before calling the context.present(). See my code below:

public takePicture() {
    // const options = { width: 1280, height: 720, keepAspectRatio: false, saveToGallery: false};
    const self = this;
    camera.requestPermissions()
        .then(async function () {
            //This iOS pause is needed so the camera modal popup will not be stopped by the list option modal closing
            if (isIOS) { 
                await new Promise(resolve => setTimeout(() => resolve(), 1000));
            }
        })
        .then (function() {
            camera.takePicture()
                .then((imageAsset) => {
                    const imagePost = new TripMessagePostModel();
                    ImageSource.fromAsset(imageAsset).then((result) => {
                        const time = new Date();
                        imagePost.image = result.toBase64String("jpeg", 50);
                        imagePost.imageFileName = `${self.userId}-${time.getTime()}.jpeg`;
                            self.addPost(imagePost);
                    });
                }).catch((err) => {
                    console.log("Error -> " + err.message);
                });
            }
        )
    }

public selectImage() {
    const context = imagepicker.create({
        mode: "single",
    });

    const imagePost = new TripMessagePostModel();
    context
        .authorize()
        .then(async function() {
            //This iOS pause is needed so the camera modal popup will not be stopped by the list option modal closing
            if (isIOS) { 
                await new Promise(resolve => setTimeout(() => resolve(), 1000));
            }
            return context.present();
        })
        .then(function(selection) {
            selection.forEach(async (selected) => {
                ImageSource.fromAsset(selected).then((result) => {
                    //console.log(selected.android.toString());
                    const time = new Date();
                    imagePost.image = result.toBase64String("jpeg", 40);
                    imagePost.imageFileName = `${this.userId}-${time.getTime()}.jpeg`;
                    
                    this.addPost(imagePost);
                    
                });
            });
        }).catch((e) => {
            console.log(e);
        });
}

Answer 2

You arent calling selectImages(), you just declare it. Replace with this:

onSelectMultipleTap() {
    console.log('Im in');

    function selectImages() {
        var context = imagepicker.create({
            mode: "multiple"
        });

        context
            .authorize()
            .then(function() {
                return context.present();
            })
            .then(function(selection) {
                console.log("Selection done:");
                selection.forEach(function(selected) {
                    console.log(" - " + selected.uri);
                });
            }).catch(function (e) {
                console.log(e);
            });
    }
    selectImages()

}