Add action to ActionSheet buttons

Ionic Framework ionic-v3
1

Hi there,

How would you call different function on ActionSheet buttons ?

image
Capture d’écran 2017-05-22 à 11.23.24.png764×1016 60.3 KB

I want Camera Roll to open my camera (I already have the function that works with a normal button)
and I want Gallery to obviously open the gallery to choose a picture

Thanks in advance :v:

More Informations about version :

global packages:

@ionic/cli-utils : 1.1.2
Cordova CLI      : 7.0.1
Ionic CLI        : 3.1.2

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.1.2
@ionic/cli-plugin-ionic-angular : 1.1.2
Ionic Framework                 : ionic-angular 3.2.1

System:

Node       : v6.10.3
OS         : macOS Sierra
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
2

just put your function call inside the button handler, as it shown in the image console.log('Camera Clicked') replace it with your function call
please in the next time submit your code, not an image of it.

1 Like
3

Alright sorry for that, it’s working fine.

But now… how would you open the gallery and not the camera ?

I tried this : this.camera.PictureSourceType.PHOTOLIBRARY;

alertSheetPictureOptions(){
    let actionSheet = this.actionSheetCtrl.create({
        title: 'Add picture with',
        buttons: [
        {
          text: 'Camera Roll',
          icon: 'camera',
          handler: () => {
            this.takePicture();
          }
        },{
          text: 'Gallery',
          icon: 'images',
          handler: () => {
            this.camera.PictureSourceType.PHOTOLIBRARY;
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          icon: 'undo',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
        ]
     });
     actionSheet.present();
   }
4

@Petalomine
will you post your takePicture(); implementaion

5

There it is :

public takePicture(){
     this.camera.getPicture({
         destinationType: this.camera.DestinationType.DATA_URL,
         quality: 100,
         correctOrientation: true,
     }).then((imageData) => {
       // imageData is a base64 encoded string
       this.base64Image = "data:image/jpeg;base64," + imageData;

       // Variable to select the last picture taken by the ID
       let cameraImageSelector = document.getElementById('camera-image');
       cameraImageSelector.setAttribute('src', this.base64Image);
     }, (err) => {
         alert(err);
     });
   }
6

You can use image picker plugin.

7

It looks great but is there any other option ?
This plugin is not compatible for Windows Phone :confused:

Thanks for the reply !

8

hi @Petalomine
sorry for late reply
you need to make some changes in your code

public takePicture(pictureSource:number){
     this.camera.getPicture({
         destinationType: this.camera.DestinationType.DATA_URL,
         quality: 100,
         correctOrientation: true,
         sourceType:pictureSource
     }).then((imageData) => {
       // imageData is a base64 encoded string
       this.base64Image = "data:image/jpeg;base64," + imageData;

       // Variable to select the last picture taken by the ID
       let cameraImageSelector = document.getElementById('camera-image');
       cameraImageSelector.setAttribute('src', this.base64Image);
     }, (err) => {
         alert(err);
     });
   }

and

alertSheetPictureOptions(){
    let actionSheet = this.actionSheetCtrl.create({
        title: 'Add picture with',
        buttons: [
        {
          text: 'Camera Roll',
          icon: 'camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },{
          text: 'Gallery',
          icon: 'images',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          icon: 'undo',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
        ]
     });
     actionSheet.present();
   }
9

No problems for the time ! :slight_smile:

Working well… But the thing is that by your way, it’s only possible to add 1 picture and it removes it if you change the option (Camera Roll or Gallery), isn’t it ? My DIV isn’t generated by picture for the moment.
I tried by creating 2 functions, one for the camera, the other for the gallery. But at least… with 2 DIVs so I’m also stuck…
There are many little freezes when scrolling with 2 pictures on the app… :cry:
My smartphone is nearly 3 years old and is a survivor… :laughing:

Just asking, do you know how to get the path of the picture and how to save it in my SQLite db ?
Because by taking the picture with the Camera function and not the Gallery, it doesn’t save the picture anywhere. Where does the picture go with the DATA_URL DestinationType ?

Thanks for your time and help :thumbsup:

10

@Petalomine
it would help if you told me what you are trying to accomplish

11

@MarcusIII
I’m trying to create a Memo app. I want to insert pictures from camera or gallery and then save the path of it in my SQLite DB to link these pictures with the Memo that has this or those pictures.
Each Memo has 0, 1 or more pictures. But all Memos are different.

How can I save the picture taken by my camera to my Gallery and then get the path of the picture taken or directly chosen from my gallery, if it already exists, to insert it to my SQLite database.

Tell me if it makes more sense.
English isn’t my native language sorry… :neutral_face:

Again, thanks for your time.