title: How To set a profile picture functionality in ionic3
body: <p>In my Project, I need to save and show profile picture to user in <code>profile.html</code>page.</p>
  
  <p>And also allow user to change their profile picture like whatsapp</p>
  
  <p>Here I share my codes</p>
  
  <p><b><code>profile.html</code></b></p>
  
  <pre><code>  &lt;ion-content&gt;
  
      &lt;img src="{{pathForImage(lastImage)}}" style="width: 100%" 
      [hidden]="lastImage === null" class="imgcircle"&gt;
  
       &lt;ion-toolbar color="primary"&gt;
        &lt;ion-buttons&gt;
  
    &lt;button ion-button icon-left (click)="presentActionSheet()"&gt;
      &lt;ion-icon name="camera"&gt;&lt;/ion-icon&gt;Select Image
    &lt;/button&gt;
  
    &lt;button ion-button icon-left (click)="uploadImage()" 
    [disabled]="lastImage=== null"&gt;
      &lt;ion-icon name="cloud-upload"&gt;&lt;/ion-icon&gt;Upload
    &lt;/button&gt;
  
    &lt;/ion-buttons&gt;
    &lt;/ion-toolbar&gt;
  
    &lt;/ion-content&gt;
  </code></pre>
  
  <p><b><code>profile.ts</code></b></p>
  
  <pre><code>   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: () =&gt; {
          this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
        }
      },
      {
        text: 'Use Camera',
        handler: () =&gt; {
          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) =&gt; {
     // Special handling for Android library
      if (this.platform.is('android') &amp;&amp; sourceType === 
      this.camera.PictureSourceType.PHOTOLIBRARY) {
      this.filePath.resolveNativePath(imagePath)
      .then(filePath =&gt; {
        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) =&gt; {
      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 =&gt; {
         this.lastImage = newFileName;
         }, error =&gt; {
         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;
            }
            }
  </code></pre>
  
  <p><b>uploading image to server using PHP</b></p>
  
  <pre><code>        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 =&gt; {
           this.loading.dismissAll()
           this.presentToast('Image succesful uploaded.');
           }, err =&gt; {
           this.loading.dismissAll()
           this.presentToast('Error while uploading file.');
             });
             }
  </code></pre>
  
  <p>whenever user upload Image, it will upload to server successfully.</p>
  
  <p>But after uploading the profile pic When I go to next page and return back to <code>profile.html</code> page, The imag will not be visible</p>
  
  <p>I want to show profile picture, whenever user view <code>profile.html</code> page.</p>
  
  <p>Have any idea??</p>