Gallery image selector screen opens behind custom dialog

[lachama]

Hello,

I'm trying to upload an image from the Gallery and insert it inside a custom modal but when I call for the gallery, the image selector screen from IOS opens behind the dialog.

Note: I'm using Angular 2 and Typescript, Nativescript v2.3.0 and it's happening on IOS emulator -> Iphone 6 - 8.1

Here is my modal xml:

<GridLayout rows="*,60,100,auto" columns="*,*" class="modal-height padding-m">
    <Image row="0" colSpan="2" [src]="character.imageUrl" (tap)="uploadImage()" verticalAlignment="center" class="margin-bottom-s thumbnail"></Image>

    <TextField row="1" colSpan="2" hint="Enter name" keyboardType="text" autocorrect="false" autocapitalizationType="none" class="margin-bottom-s" [(ngModel)]="character.name"></TextField>
    <TextView row="2" colSpan="2" hint="Enter description" [editable]="true" class="margin-bottom-s" [(ngModel)]="character.description"></TextView>

    <Button row="3" col="0" text="Save" (tap)="save(character)" class="btn-height btn-fontSize btn-positive"></Button>
    <Button row="3" col="1" text="Cancel" (tap)="cancel()" class="btn-height btn-fontSize"></Button>

</GridLayout>

Here is my component code:

@Component({
    selector: 'modal-content',
    templateUrl: 'modal-content.html'
})

export class ModalContent {
    public character: Character;

    constructor(private params: ModalDialogParams) {
        this.character = new Character();
        this.character.imageUrl = "~/images/camera-icon.png";
    }

    public uploadImage(): void {
        let context = imagepickerModule.create({
            mode: "single"
        });
        if (platform.device.os === "Android" && platform.device.sdkVersion >= "23") {
            permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, "I need these permissions to read from storage")
                .then(() => {
                    this.startSelection(context);
                })
                .catch((err) => {
                    console.log("Permiso denegado! :( ");
                    console.log("err", err);
                });
        } else {

            this.startSelection(context);
        }
    }

    public startSelection(context): void {
        context
            .authorize()
            .then(() => {
                return context.present();
            })
            .then((selection) => {
                selection.forEach((selected) => {
                    this.character.imageUrl = selected.thumb;
                });
            })
            .catch((e)=> {
                console.log(e);
            });
    }

    public save(res: Character): void {
        this.params.closeCallback(res);
    }

    public cancel() {
        this.params.closeCallback('Cancel');
    }

Any ideas?

Thanks!

[Daxito]

Had the same issue, in my case I opened a modal just to select "Camera" or "Gallery", because of this issue I just closed the modal windows after user selection, basically the modal is not taking care of actually opening the gallery, just grab the source of the picture.

+1 to maybe fix this.

[lachama]

@Daxito thanks, it seems to be the only solution I have found so far

[ButterMeWaffle]

no fix for this yet?

[FahadAlbukhari]

Any fix for this yet?

[NickIliev]

@SamuelReeder @FahadAlbukhari @lachama the issue seems to be no longer reproducible with the latest changes in nativescript-angular.

Test application demonstrating the above can be found here (please do let me know if I am missing something)