I want to update profile image like whatsapp

i want to update profile image like whatsapp.when user click on button and select/capture image.when select the image this time update the profile pic like whatsapp.where ?should be call the function submitAdd(). please help me anyone

  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Gallery',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);

          }

        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }
  
    public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    saveToPhotoAlbum: true,
    correctOrientation: true
  };
 
  // Get the data of an image
  this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
      this.filePath.resolveNativePath(imagePath)
        .then(filePath => {
          let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
          this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        });
    } else {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });
}


// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}
 
// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
   
  }, error => {
    this.presentToast('Error while storing file.');
  });
  
}
 
private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,

    position: 'middle'
  });
  toast.present();
}
 
// Always get the accurate path to your apps folder
public pathForImage(img) {
  if (img === null) {
    return '';
  } else {

    return cordova.file.dataDirectory + img;
  }
}
//------------------------------------- end Take Photo ---------------------------------------------------  

//------------------------------------- Start Register ---------------------------------------------------  
  public submitAdd() {
  // Destination URL
  alert(this.getMyads.ad_store_id)
  var url = "http://maydomain.com/addsApp/update2.php";
 
  // File for Upload
  var targetPath = this.pathForImage(this.lastImage);
 
  // File name only
  var filename = this.lastImage;
 alert(filename);
  var options = {
    fileKey: "file",
    fileName: filename,
    chunkedMode: false,
    mimeType: "multipart/form-data",
    params : {

      "fileName": filename,
      "user_id":this.getMyads.user_id

      }
  };
 
  const fileTransfer: TransferObject = this.transfer.create();
 
  this.loading = this.loadingCtrl.create({
    content: 'Uploading...',
  });
  this.loading.present();
 
  // Use the FileTransfer to upload the image
  fileTransfer.upload(targetPath, url, options).then(data => {
    this.loading.dismissAll()
    this.presentToast('Your ad successfully Submited!');

  }, err => {
    this.loading.dismissAll()
    this.presentToast('Something worng. \n Try again!');
  });
}

hey ,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

just put the function inside the camera button.

1 Like

thanks but where and which function can you please tell me my code is :
<button ion-button color=“primary” (click)=" getPictures()">Open Gallery

and getpicture() function code ts file

getPictures(){
let options= {
maximumImagesCount: 5,
allowEdit: true,
targetWidth: 100,
targetHeight: 100,
quality: 50,
}
this.imagePicker.getPictures(options).then( results =>{
console.log(results);
for(let i=0; i < results.length;i++){
this.images.push(results[i]);
};
});
}

its working or not for you?

no …mycode is working for only taking image from gallery and display using image picker plugin …but i want to display list of old images of gallery when i open camera button like in whatsapp …please see below image in which when i click on camera icon then list of horizontal images are display