Selecting Image from Gallery or Camera

Ionic Native
#1

Here, I can open camera and select image from gallery, but how to upload image to sever PHP, use POST method.
This is my code:

openeditprofile() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Option',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Take photo',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'ios-camera-outline' : null,
          handler: () => {
            this.takephoto();
          }
        },
        {
          text: 'Choose photo from Gallery',
          icon: !this.platform.is('ios') ? 'ios-images-outline' : null,
          handler: () => {
            this.openGallery();
          }
        },

  ]
});
actionSheet.present();

}

 takephoto() {
>      const options: CameraOptions = {
>        quality: 100,
>        destinationType: this.camera.DestinationType.DATA_URL,
>        encodingType: this.camera.EncodingType.JPEG,
>        mediaType: this.camera.MediaType.PICTURE
>      }
> 
>      this.camera.getPicture(options).then((imageData) => {
>        // imageData is either a base64 encoded string or a file URI
>        // If it's base64:
>        this.base64Image  = 'data:image/jpeg;base64,' + imageData;
>        this.photos.push(this.base64Image);
>        this.photos.reverse();
>      }, (err) => {
>        // Handle error
>      })}
> 
>     openGallery() {
> 
>     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.SAVEDPHOTOALBUM
>     }
> 
>     this.camera.getPicture(options).then((imageData) => {
>       // imageData is either a base64 encoded string or a file URI
>       // If it's base64:
>       this.base64Image  = 'data:image/jpeg;base64,' + imageData;
>       this.photos.push(this.base64Image);
>       this.photos.reverse();
>     }, (err) => {
>       // Handle error
     })}
Getting the image path from the camera plugin
#2

Sorry having a hard time looking at your code - can you put it all into a concise code block like you have for the bottom bit?

#3

ok…I have fixed it

#4

That’s better.

For one I’m a sucker for tidy code… so how about something a little easier on the eye…

  openeditprofile() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Option',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Take photo',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'ios-camera-outline' : null,
          handler: () => {
            this.captureImage(false);
          }
        },
        {
          text: 'Choose photo from Gallery',
          icon: !this.platform.is('ios') ? 'ios-images-outline' : null,
          handler: () => {
            this.captureImage(true);
          }
        },
      ]
    });
    actionSheet.present();
  }


  async captureImage(useAlbum: boolean) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      ...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
    }

    const imageData = await this.camera.getPicture(options);

    this.base64Image = `data:image/jpeg;base64,${imageData}`;

    this.photos.unshift(this.base64Image);

  }

Now you’re down to one method that can deal with both situations captureImage. It’s also using async which makes your Promise more legible.

I am assuming you at least know how to write a php endpoint which can take a POST.
If so, post the actual image as a base64 string and assemble on the server…

function base64_to_jpeg($base64_string, $output_file) {
    // open the output file for writing
    $ifp = fopen( $output_file, 'wb' ); 

    // split the string on commas
    // $data[ 0 ] == "data:image/png;base64"
    // $data[ 1 ] == <actual base64 string>
    $data = explode( ',', $base64_string );

    // we could add validation here with ensuring count( $data ) > 1
    fwrite( $ifp, base64_decode( $data[ 1 ] ) );

    // clean up the file resource
    fclose( $ifp ); 

    return $output_file; 
}
1 Like
#5

I use ionic 2… you can make for ionic 2

#6

Is that a question or a statement?

#7

Oh no, My English is not good, I can not exchange more

#8

English is an advantage when it comes to most documentation in the world.

You need an endpoint which can accept a post.

You need to post your image within an object, such as { "imageBase64" : "<stringhere>" }

I’ll stop there for now. Good luck!

#9

thank you very much… :tim:

#10

hello All ,I have one problem ,in whatsapp application when I click on camera icon …how that list
of images are display from gallery directly ??… please help me …am not
able to find solution to this task “how to display list of horizontal
images in ionic application” …i use camera ,imagepicker,imageviewer…
plugin but still not find solution

#11

hello @healer12 … can i get code of your uploading image ??

#12

Check this Ionic 4 Image Picker Tutorial