Fix to #75 - Added support for updating user photo

app/css/app.css

@@ -2067,4 +2067,19 @@ img.img_fullsize {
   .im_emoji_btn {
     display: none;
   }
+}
+
+.user_photo_update {
+  cursor: pointer;
+  display: block;
+  overflow: hidden;
+  padding: 0;
+
+  margin-top: 5px;
+  margin-left: 20px;
+  width: 120px;
+  height: 120px;
+  left: 0;
+  top: 15px;
+  position: absolute;
 }

app/js/controllers.js

@@ -833,7 +833,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager) {
 
     $scope.profile = {};
 
@@ -841,12 +841,39 @@ angular.module('myApp.controllers', [])
       var user = AppUsersManager.getUser(id);
       $scope.profile.first_name = user.first_name;
       $scope.profile.last_name = user.last_name;
+      $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
 
       $scope.phone = user.phone;
     });
 
     $scope.notify = {};
     $scope.send = {};
+    $scope.profile.userPhoto = {};
+    $scope.updatingPhoto = false;
+
+    $scope.$watch('profile.userPhoto', onPhotoSelected);
+
+    function onPhotoSelected (photo) {
+      if (!photo.hasOwnProperty('name')) {
+        return;
+      }
+      $scope.updatingPhoto = true;
+      MtpApiFileManager.uploadFile(photo).then(function (inputFile) {
+        MtpApiManager.invokeApi('photos.uploadProfilePhoto', {
+          file: inputFile,
+          caption: '',
+          geo_point: {_: 'inputGeoPointEmpty'},
+          crop: {_: 'inputPhotoCropAuto'}
+        }).then(function() {
+          MtpApiManager.getUserID().then(function (id) {
+            console.log($scope.profile.photo);
+            $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+            console.log($scope.profile.photo);
+          });
+          $scope.updatingPhoto = false;
+        });
+      });
+    };
 
     AppConfigManager.get('notify_nodesktop', 'notify_nosound', 'send_ctrlenter').then(function (settings) {
       $scope.notify.desktop = !settings[0];

app/js/directives.js

@@ -749,4 +749,25 @@ angular.module('myApp.directives', ['myApp.filters'])
         }, 100);
       }
     };
+  })
+
+  .directive('mySettingsForm', function(){
+    return {
+      link: link
+    };
+
+    function link(scope, element, attrs) {
+      var photoSelect = $('input.im_attach_input', element);
+      photoSelect.on('change', function () {
+        var self = this;
+        scope.$apply(function () {
+          scope.profile.userPhoto = self.files[0];
+          setTimeout(function () {
+            try {
+              self.value = '';
+            } catch (e) {};
+          }, 1000);
+        });
+      });
+    };
   });

app/partials/settings_modal.html

@@ -7,7 +7,19 @@
 
   <div class="modal-body">
 
-    <form name="profileForm" class="settings_profile_edit_form clearfix">
+    <form my-settings-form name="profileForm" class="settings_profile_edit_form clearfix">
+      <div class="user_photo_update">
+        <input ng-model="userPhoto" type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
+      </div>
+      <div class="form-group settings_profile_user_photo">
+        <img
+          class="user_modal_image"
+          my-load-thumb
+          thumb="profile.photo"
+        />
+        <span ng-if="updatingPhoto">Uploading<span my-typing-dots></span></span>
+      </div>
+
       <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
         <label class="control-label" for="first_name">
           <span ng-if="error.field == 'first_name'">Invalid First Name</span>