Load image from Photo Gallery

Ionic Native
1

Hello!

I want to load an image from the photo gallery into the app. I installed the Camera plugin and added it to my app’s module. I’m running this code :

app.component.ts :

import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  templateUrl: 'app.html',
})

 export class MyApp {

 constructor(public camera : Camera){
     this.avatar = "somedefaultimage";
 }
 choosePhoto(){
   const options: CameraOptions = {
   quality: 100,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE,
   sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
   }

   this.camera.getPicture(options).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64:
   this.avatar = 'data:image/jpeg;base64,' + imageData;
   }, (err) => {
   // Handle error
   });
 }
}

app.html :

<ion-menu [content]="mycontent" type='reveal' id='menu'>
 <ion-header>
 <ion-toolbar style="padding-top:0; padding-left:0;padding-right:0;padding-bottom:0">
   <img src={{avatar}} style="width:20%" (click)="choosePhoto()">
 </ion-toolbar>
 </ion-header>
</ion-menu> 
<ion-nav #mycontent [root]="rootPage" swipeBackEnabled="false"></ion-nav>

When I click the image, nothing happens, even though I expect choosePhoto() to run and open the image gallery. Why is nothing happening? Am I missing something if I want to be able to see the gallery and select a photo?

2

A potential multitude of situations…

  • Are you running this from an actual device as opposed to a web browser? (i.e. ionic serve)
  • If running on an actual device - do you have any error messages in the chrome debugger tool?

By all means if you would like to share your code with me via git or whatever please do.

3

Ran it on an android device, and it didn’t work. Wouldn’t expect it to work on a browser of course. I’ve shared my code above, do you see anything wrong with it?

4

Code looks fine I think.

Compare with the one I’ve just cooked up…

1 Like
5

Great repository you’ve got there! I’d love to use it for further reference.

I feel like I’m missing a step somewhere along the way. To be honest, I’ve never got an ionic-native plugin to work, including the SMS plugin. I always follow the steps in the documentation but end up with no result. Really lost here. Could it have anything to do with the device’s access to the native features?

6

This:
<img src={{avatar}} style="width:20%" (click)="choosePhoto()">

Should be this:
<img [src]="avatar" style="width:20%" (click)="choosePhoto()">

I can’t promise that this is the root of your issue, but either way that’s the route you want to go.

1 Like
7

I literally cooked that up in like 10 minutes, and basically pasted your function straight in.

Are you adding the ‘Camera’ class to the app.module.ts in the providers section? I don’t know - that’s why I asked to see your whole repo and not just a tiny excerpt - hate playing 20 questions and often find it quicker just writing it up myself and putting it up on git.

8

Going to change that. Thank you!

9

Yup, added it in the providers array in app.module.ts. Have you tested your repo’s code on a real device? Did it work?

10

On an Android - have YOU tested my code on a device?

@Sidharth_1999’s answer is completely sound.

11

Good idea! I’ll test your code on a real device and update my results on the thread. Right now I should probably go to bed cause I have school tomorrow haha.

Thanks for the help you’ve provided so far!

12

Np’z. Sleep and general education are very important… so I’m told :wink:

1 Like
13

By people who own stock in sleep, and general education…

1 Like