How To set a profile picture functionality in ionic3

Question

In my Project, I need to save and show profile picture to user in profile.htmlpage.

And also allow user to change their profile picture like whatsapp

Here I share my codes

profile.html

  <ion-content>

    <img src="{{pathForImage(lastImage)}}" style="width: 100%" 
    [hidden]="lastImage === null" class="imgcircle">

     <ion-toolbar color="primary">
      <ion-buttons>

  <button ion-button icon-left (click)="presentActionSheet()">
    <ion-icon name="camera"></ion-icon>Select Image
  </button>

  <button ion-button icon-left (click)="uploadImage()" 
  [disabled]="lastImage=== null">
    <ion-icon name="cloud-upload"></ion-icon>Upload
  </button>

  </ion-buttons>
  </ion-toolbar>

  </ion-content>

profile.ts

   export class HomePage {

   lastImage: string = null;
   loading: Loading;

   constructor(public navCtrl: NavController, private camera: Camera, private 
   transfer: Transfer, private file: File, private filePath: FilePath, public 
   actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, 
   public platform: Platform, public loadingCtrl: LoadingController) { }

   public presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
   title: 'Select Image Source',
   buttons: [
    {
      text: 'Load from Library',
      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: false,
   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.');
     });
      }

     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: 'top'
         });
       toast.present();
        }

      // Always get the accurate path to your apps folder
      public pathForImage(img) {
      if (img === null) {
        return '';
         } else {
       return cordova.file.dataDirectory + img;
          }
          }

uploading image to server using PHP

        public uploadImage() {
       // Destination URL
        var url = "http://xxxx/img/upload.php";

        // File for Upload
         var targetPath = this.pathForImage(this.lastImage);

        // File name only
        var filename = this.lastImage;

         var options = {
         fileKey: "file",
         fileName: filename,
         chunkedMode: false,
         mimeType: "multipart/form-data",
         params : {'fileName': filename}
        };

          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('Image succesful uploaded.');
         }, err => {
         this.loading.dismissAll()
         this.presentToast('Error while uploading file.');
           });
           }

whenever user upload Image, it will upload to server successfully.

But after uploading the profile pic When I go to next page and return back to profile.html page, The imag will not be visible

I want to show profile picture, whenever user view profile.html page.

Have any idea??

Answer 1

Because you were getting the file directory URI while uploading. It comes from the mobile directory once you're selected and it is available temporarily at the page. After you went to another page it disappears.Well, you can check the condition for Image tag.

ex:

<img src="{{pathForImage(lastImage)}}" style="width: 100%" 
    [hidden]="lastImage === null" class="imgcircle">
and

<img src="url" style="width: 100%" 
    class="imgcircle" *ngIf="lastImage==null">

You can bind the updated url in src tag to view the uploaded profile and perform two condition to show the image .

url like https://stackoverflow.com/example.png

I hope it will help

Answer 2

Put this code in your Html file.

  <img src="{{ myphoto }}" (click)="getImage()" width="50%" height="50%" alt="Registration Image">

set this in your .ts class. myphoto:any="assets/imgs/registration_default_image.png";

this is method for open gallery and set picture .

// for open gallery

getImage() {

const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.DATA_URL,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  saveToPhotoAlbum:false
}
this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

} //end

this will set your image from gallery.