ImagePicker

Ionic Framework ionic-v3
1

Hi All,

I am using Ionic 2, and am trying to capture and then save the image via JSON (saves to a database via a RESTful service), and then retrieve the image via JSON and display it.

My problem is I am also trying to implement an ImagePicker:

import { ImagePicker } from 'ionic-native';

  imagePicker() {

      let options = {
        maximumImagesCount: 1,
        width: 300,
        height: 300,
        quality : 75
      };

    ImagePicker.getPictures(options)
        .then((results) => {
            this.base64Image = "data:image/jpeg;base64," + results[0];
        }, (error) => {
            console.log("ERROR -> " + JSON.stringify(error));
        });
  }

I have a button to pick images from the gallery:

<button (click)="imagePicker()">
  Pick from Gallery
</button>

However, when I deploy this app to my Android phone, the whole app works fine, except clicking the Pick from Gallery button does nothing.

I get the following error:

ERROR: "cordova_not_available"

Does this mean that the ImagePicker plugin is not working or I have not set it up correctly?

import { ImagePicker } from 'ionic-native';

I did call the following to set it up, is there anywhere else I need to configure it?

cordova plugin add cordova-plugin-image-picker

Any advise will be appreciated, if anyone can point out what I am doing wrong with the ImagePicker, please let me know…

1 Like
2

that all look correct, I would try removing and reinstalling the plugin…

3

Thanks Aaron, I tried that, however, I still get the same error:

ERROR: "cordova_not_available"

E:\Development\IDE\ionic-apps\jobs-4hire>cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-image-picker 1.1.1 "ImagePicker"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

E:\Development\IDE\ionic-apps\jobs-4hire>cordova plugin remove cordova-plugin-image-picker
Uninstalling cordova-plugin-image-picker from android
Removing "cordova-plugin-image-picker"

E:\Development\IDE\ionic-apps\jobs-4hire>cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

E:\Development\IDE\ionic-apps\jobs-4hire>cordova plugin add cordova-plugin-image-picker
Fetching plugin "cordova-plugin-image-picker@~1.1.1" via npm
Installing "cordova-plugin-image-picker" for android

E:\Development\IDE\ionic-apps\jobs-4hire>cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-image-picker 1.1.1 "ImagePicker"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
4

and there are no ts error when you build the code from android?

5

No typescript errors

6

The strange thing is, I have a camera plugin that works fine.

import { Camera, ImagePicker } from 'ionic-native';

takePhoto() {
    Camera.getPicture({
        quality: 75,
        destinationType: navigator.camera.DestinationType.DATA_URL,
        sourceType: navigator.camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: navigator.camera.EncodingType.JPEG,
        targetWidth: 300,
        targetHeight: 300,
        saveToPhotoAlbum: false
    }).then(imageData => {
        this.zone.run(() => {
            this.base64Image = "data:image/jpeg;base64," + imageData;
        });
    }, error => {
        console.log("ERROR -> " + JSON.stringify(error));
        alert("ERROR: " + JSON.stringify(error));
    });
}
7

When I run this on my device, get:

ERROR: "plugin_not_installed"

Any ideas why it says that when I access the ImagePicker, when cordova plugin list displays:

cordova-plugin-image-picker 1.1.1 "ImagePicker"

Thanks

8

SOLVED:

Looks like Ionic View does not support cordova-plugin-image-picker. That’s where I have been testing.

Here is a list of supported plugins: http://docs.ionic.io/v1.0/docs/view-usage

I built an apk and installed on my device and it works.

1 Like
9

i followed your code but it is doing nothing.

imagePicker() {

       let options = {
           maximumImagesCount: 2,
           width: 300,
           height: 300,
           quality: 75
       };

       ImagePicker.getPictures(options).then((results) => {
           for (var i = 0; i < results.length; i++) {
              this. base64Image=('Image URI: ' + results[i]);
           }
       }, (err) => { });
   }

HTML

           <img [src]="base64Image" *ngIf="base64Image"  />

wt i am doing wrong?

10

hey did you got solution to above problem ??

11

This post helped me to get the imagepicker working: https://stackoverflow.com/questions/47734623/no-access-to-selected-images-via-image-picker-plugin-in-ios