Ionic-native/image-picker not working with Ionic 3

Hi, I tried to use the ionic-native/image-picker, link below, to browse image files storaged in the device memory but the cordova-plugin-telerik-imagepicker, which ionic-native/image-picker depends on, does not install due to file not found error. It is looking for files, like the AndroidManifest.xml, on the wrong place. So I believe that it is not compatible with Ionic 3.

So can anyone, please, point me a plugin compatible with Ionic 3 to browse image files storaged locally in the device? It would be great if this plugin works on the browser too.

All posts I found on goolge leads me to ionic-native/image-piccker or cordova-plugin-imagepicker and neither of them worked.

Link to ionic-native/image-picker:

Environment information:
Angular CLI: 1.6.8
Node: 8.9.4
OS: win32 x64
Angular: 5.0.3
Ionic: 3.19.1
Npm: 5.6.0

Thank you very much.

What version has you android platform? The folder structure depends on the android version. Maybe the plugin does not support your android platform.

There are issues about the plugin not supporting android 7 platform: https://github.com/Telerik-Verified-Plugins/ImagePicker/issues/92

Remove your android 7:
ionic cordova platform rm android
Add android 6.3:
ionic cordova platform add android@6.3.0

Android 6.3.0:
android-6-3-0

Android 7.0.0:
android-7-0-0

1 Like

What version of Cordova Android platform are you running? That should be in your ionic info output? (In future, you might want to post the whole output of ionic info., save some time.)

Edit: Whoops didnt read Nexi’;s comment. Yes, probably you need to roll back your platform version.

1 Like

Hi Nexi and AaronSterling, I have downgrade my platform to the version 6.4.0 and worked, however I decided not to use the image-picker because I need the image data encoded as base64 and I need it to work on the browser too, so I replace it with the native HTML and used the javascript FileReader to encode the selected file data as base64.

Here goes some code in case someone is having hard time with image-picker like me.

HTML

<input #fileInput type="file" id="file-input" (change)="onImageLoad($event)" name="files" />

TS

onImageLoad(e){
  var reader = new FileReader();
  let self = this;

 
  let imageFileName = e.target.files[0].name;
  reader.onload = function(e) {
    self.fileData = reader.result; //base64 encoded
    let fileType = self.fileData.substring(self.fileData.indexOf(':')+1,self.fileData.indexOf('/'));;
  }

  reader.readAsDataURL(e.target.files[0]);

}

The downside of this approach is that the user can select files of any type, not only, image but you can check this by getting the file type which is embedded in the encoded data.

Thanks

2 Likes