** Image Picker 【IOS11+】Album List : Text covered picture

[soulmecca]

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:

When trying to select an album by clicking its name the text (album name ) moves to the left and placed on the thumbnail album view (thumbnail images are overlaid with the album names)

Expected behavior:

When clicking any album, thumbnail images of "Select an Album" view, album names should not move. When back from the specific album to the album list, thumbnails should be on the left side and the text that is the album names should be next to the thumbnails.

Steps to reproduce:

1. install image picker
2. import the plugin
3. try to get images with the plugin.
4. click one of the albums.

Other information:

This issue is already reported on the git page.
Telerik-Verified-Plugins/ImagePicker#95

[sokre90]

I am experiencing same issue
Environment:

cli packages: (/Users/kingandhismate/.npm-packages/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v9.5.0
npm        : 5.6.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

[danielsogl]

Related to the plugin source.

[sokre90]

@danielsogl So, what is the correct plugin source?

[XamarinD2k]

I m also getting the same problem... some one plz help me

@soulmecca
@sokre90
@danielsogl
@sokre90

[sokre90]

@XamarinD2k I haven't figured out the problem but i've ended up using this plugin https://github.com/wymsee/cordova-imagePicker. It has less options but i found it to be more stable regardless of the issue related to this post. The only downside for me is that it can only return FILE_URI not base64.

[XamarinD2k]

only problem m facing is "Text covered thumbnails" while browse the images on iOS.. please find attachment

[sokre90]

I was facing the same problem and I couldn't make it work, so I switched to this plugin https://github.com/wymsee/cordova-imagePicker and it works great. I also used ionic native file plugin to get a base64 representation of the file(image).

[XamarinD2k]

thanx for ur support... I installed the plugin from the link u'v given above but unable to get the "window.imagePicker" object, can you pls give example code that illustrate "how to use"

@sokre90

[sokre90]

You use it the same way as you would with the other (telerik) image picker, as is described in ionic docs https://ionicframework.com/docs/native/image-picker/. The only thing that differs one another are the options.

1. import { ImagePicker } from '@ionic-native/image-picker'; to your 'app.module.ts' file and then add 'ImagePicker' to ngModule's providers array
2. import { ImagePicker } from '@ionic-native/image-picker'; to the component the component that uses the plugin and instantiate the plugin in your component's constructor 'constructor(private imagePicker: ImagePicker) { }'

this.imagePicker.getPictures(options).then(photos => {
    for (let photo in photos) {
        console.log(photos[photo]);
    }
}, err => { 
    console.log(err);
});

My code is slightly syntacticly different from the example in ionic docs, but it does the same thing

I haven't used any options since i didn't need any but if your application requires just look at available options in the plugin's docs https://github.com/wymsee/cordova-imagePicker

@XamarinD2k

[XamarinD2k]

yup got it bro.. but from where to import it..

import { ImagePicker } from "???????"

@sokre90

[sokre90]

import { ImagePicker } from "@ionic-native/image-picker";

sorry dont know how i missed it

github truncates it if its not in code tags

@XamarinD2k

[XamarinD2k]

wooowwwwww... it worked...!!
really really thanks bro... great support... may GOD shower his blessings on you

@sokre90

[sokre90]

Np. Good luck! @XamarinD2k

[XamarinD2k]

bro, but its not working with Android... app get close (crash) when trying to open gallery in android... I tried to open gallery using Camera plugin also, but same issue (text overlapping) with iOS... finally using Camera Plugin to capture image and getting its fileUri.....

@sokre90

[sokre90]

I had the same problem. The issue is with android camera permissions. iOS does it inherently while for android you must do it manually. Also, I've ended up using different plugins for the two platforms.
For iOS i've used cordova-plugin-image-picker, and for android cordova-plugin-telerik-imagepicker.

This is what you must do for android:
In the component's constructor where you call the image picker you must request permission from the user

import { ImagePicker } from "@ionic-native/image-picker";
import { Platform } from 'ionic-angular';

constructor(private imgPicker:ImagePicker, private platform:Platform) {
 
      if(this.platform.is('android')) {
        this.imgPicker.hasReadPermission()
          .then((granted:boolean) => {
            if(!granted) {
              this.imgPicker.requestReadPermission();
            }
          });
      }
}

[XamarinD2k]

yes, i did it. below is my code:

import { Camera, CameraOptions } from '@ionic-native/camera';
import { ImagePicker } from "@ionic-native/image-picker";
import { Platform } from 'ionic-angular';

constructor() {
private camera: Camera, private _imagePicker: ImagePicker, private _platform: Platform
}

selectPhoto() {
if (this._platform.is('android')) {
const opt: CameraOptions = {
sourceType: this._camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType: this._camera.DestinationType.FILE_URI,
}
this._camera.getPicture(opt).then((imageData) => {
this.uploadImage(imageData);
}, (err) => {
console.log('camera err -> ', err);
});
}
else { // for iOS
let options = { maximumImagesCount: 1 }
this._imagePicker.getPictures(options).then((arrImageData) => {
for (var i = 0; i < arrImageData.length; i++) {
this.uploadImage(arrImageData[i]);
}
}, (err) => {
console.log('image picker err -> ', err);
});
}
}

@sokre90

[shubhambaghel34]

only problem m facing is "Text covered thumbnails" while browsing the images on iOS.