Step 13.25: Implement pick, update and set of profile image

src/pages/profile/profile.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Profile } from 'api/models';
-import { AlertController, NavController } from 'ionic-angular';
+import { AlertController, NavController, Platform } from 'ionic-angular';
 import { MeteorObservable } from 'meteor-rxjs';
 import { ChatsPage } from '../chats/chats';
+import { PictureService } from '../../services/picture';
+import { Pictures } from 'api/collections';
 
 @Component({
   selector: 'profile',
@@ -14,13 +16,42 @@ export class ProfilePage implements OnInit {
 
   constructor(
     private alertCtrl: AlertController,
-    private navCtrl: NavController
+    private navCtrl: NavController,
+    private pictureService: PictureService,
+    private platform: Platform
   ) {}
 
   ngOnInit(): void {
     this.profile = Meteor.user().profile || {
       name: ''
     };
+
+    MeteorObservable.subscribe('user').subscribe(() => {
+      let platform = this.platform.is('android') ? "android" :
+        this.platform.is('ios') ? "ios" : "";
+      platform = this.platform.is('cordova') ? platform : "";
+
+      this.picture = Pictures.getPictureUrl(this.profile.pictureId, platform);
+    });
+  }
+
+  selectProfilePicture(): void {
+    this.pictureService.select().then((blob) => {
+      this.uploadProfilePicture(blob);
+    })
+      .catch((e) => {
+        this.handleError(e);
+      });
+  }
+
+  uploadProfilePicture(blob: File): void {
+    this.pictureService.upload(blob).then((picture) => {
+      this.profile.pictureId = picture._id;
+      this.picture = picture.url;
+    })
+      .catch((e) => {
+        this.handleError(e);
+      });
   }
 
   updateProfile(): void {