Opening image picker from within modal

[3rror404]

When the image picker is triggered from within a page that was opened using showModal(), the picker is loaded behind the page. Is there any way to work around this?

[hiddencaliber]

Is there any update on this ?

[moritzvieli]

That's an iOS-only problem. I am also looking forward to a fix. I just implemented a very ugly workaround for iOS:

1. Before showing the select image dialog, close the modal with an own result code
2. Show the image dialog
3. After selection, save the image on the parent page
4. Display the modal again with the selected image

To show the modal the second time, a timeout is needed, because we cannot display the modal inside the close modal function (the modal is still open):

if(values.result == 'pickImage') {
  this.imagePickerProvider.selectPicture()
  .then((response) => {
    this.newWallPostImage = response.toBase64String('jpeg');
    this.newWallPost = values.text;

    // Use a timeout, because opening the modal from here does not work
    // --> Still open. Timeout of 1 ms did not work on a real device. Maybe
    // On slower devices, we need to further increase this timeout...
    setTimeout(() => {
      // Show the modal again this time containing the image
      this.editWallPost();
      }, 500);
   });

[moritzvieli]

Welp, just saw the same problem here: NativeScript/NativeScript#3195

And surprisingly, the workaround is exactly the same as mine. Although in my opinion, the timeout is a little wobbly...

Anyway, if Issue 3195 cannot be resolved, it maybe makes sense to handle this case like shown. But NativeScript could make it easier for us and handle this case automatically on iOS.

[abhayastudios]

+1

[tbozhikov]

Hi guys, a new version of the plugin is out 6.0.0, and it now supports opening the image picker in ios from a modal page without complicated workarounds. All you need is to pass the modal page from which you open the picker to the create method:
imagepicker.create({ mode: "single" }, theModalPage)
I've demonstrated this in this app.

[mhmo91]

Can someone show an example here with Angular, it's not working for me on the IOS
@tbozhikov tried following your example but in angular n it throw an error

(UIKit) Warning: Attempt to present <QBImagePickerController: 0x7fa6d8201b30> on <UIViewControllerImpl: 0x7fa6d820e8f0> whose view is not in the window hierarchy!

i assume a ref of the page is like that

constructor(private zone: NgZone, public page: Page, private expenseService: ExpenseService, public userService: UserService, public recipientService: RecipientService, public params: ModalDialogParams, public fileOperationsService: FileOperationsService, public vcRef: ViewContainerRef, public modalService: ModalDialogService) {
        this.expenseId = params.context.expenseId;
        this.readOnly = params.context.readOnly;
        this.attachments = this.expenseService.allAttachment;
        this.context = imagepicker.create({
            mode: "multiple" // use "multiple" for multiple selection
        }, this.page);
    }

[tbozhikov]

@mhmo91
Here is a resolution of similar issue on modals, which could be the reason you are getting this error. So, this might not be related to ImagePicker at all. Please, give it a try and let us know if this fixes your case.

[FranciZ]

As far as I can tell this has not been solved for Angular. Simply passing in the Page reference does not work.

[mhmo91]

@tbozhikov i haven't really got a chance to try your resolution, i had to the change the structure to routing instead of modals, would be nice if someone can see this solved though.. ))

[wendt88]

for everyone using nativescript-vue, I this works for me:

let modalView;
if (this.$modal) {
    let view = this.$el;
    // loop until last parentNode, if component is nested in modal
    // otherwise this.$el.nativeView;
    while (view.parentNode) {
         view = view.parentNode;
    }
    modalView = view.nativeView;
}
imagepicker.create({}, modalView);

[abhayastudios]

@mailiam @tbozhikov

Even with the latest version of this plugin, I am still not able to open the ImagePicker in an existing modal. Here is my example project that:

• opens a modal
• gets a reference from that Page (though ViewChild, but also tried through shownModally event)
• pass the NativeElement property of that Page reference to ImagePicker create

It does open the ImagePicker but it will open an new modal on top of the existing one.

Note: the Page object I get does seem to be the top element, since its parent is undefined and it does contain the viewController property that this piece of code is looking for

Any ideas?

EDIT: is what I am seeing actually expected behavior? I was under the impression that the additional hostView parameter would allow the ImagePicker to open in the existing modal?

[iosdeveloper1001]

I was facing the same issue with the error of window hierarchy, I Solved it by just adding a Timeout of 10 milliseconds.

let context = imagepicker.create({ mode: "single" });
this.startSelection(context);

public startSelection(context) {
		let _that = this;
		setTimeout(function() {
		context
			.authorize()
			.then(() => {
				return context.present();
			})
			.then((selection) => {
				selection.forEach(function (selected) {
					let source = new ImageSourceModule.ImageSource();
					if (source && source !== null) {
						source.fromAsset(selected).then((source) => {
						}, error => { });
					}
				});
			}).catch(function (e) {
				console.log(e);
			});
		}, 10);
	}