Increase the avatar max size and show an error if it is too big

Fixes #190

client/components/users/userAvatar.jade

@@ -36,6 +36,8 @@ template(name="memberName")
     = user.username
 
 template(name="changeAvatarPopup")
+  if error.get
+    .warning {{_ error.get}}
   ul.pop-over-list
     each uploadedAvatars
       li: a.js-select-avatar

client/components/users/userAvatar.js

@@ -47,6 +47,10 @@ BlazeComponent.extendComponent({
     return 'changeAvatarPopup';
   },
 
+  onCreated: function() {
+    this.error = new ReactiveVar('');
+  },
+
   avatarUrlOptions: function() {
     return {
       auth: false,
@@ -79,28 +83,39 @@ BlazeComponent.extendComponent({
     });
   },
 
+  setError: function(error) {
+    this.error.set(error);
+  },
+
   events: function() {
     return [{
       'click .js-upload-avatar': function() {
         this.$('.js-upload-avatar-input').click();
       },
       'change .js-upload-avatar-input': function(evt) {
-        var self = this;
-        var file, fileUrl;
+        let file, fileUrl;
 
-        FS.Utility.eachFile(evt, function(f) {
-          file = Avatars.insert(new FS.File(f));
-          fileUrl = file.url(self.avatarUrlOptions());
+        FS.Utility.eachFile(evt, (f) => {
+          try {
+            file = Avatars.insert(new FS.File(f));
+            fileUrl = file.url(this.avatarUrlOptions());
+          } catch (e) {
+            this.setError('avatar-too-big');
+          }
         });
-        var fetchAvatarInterval = window.setInterval(function() {
-          $.ajax({
-            url: fileUrl,
-            success: function() {
-              self.setAvatar(file.url(self.avatarUrlOptions()));
-              window.clearInterval(fetchAvatarInterval);
-            }
-          });
-        }, 100);
+
+        if (fileUrl) {
+          this.setError('');
+          let fetchAvatarInterval = window.setInterval(() => {
+            $.ajax({
+              url: fileUrl,
+              success: () => {
+                this.setAvatar(file.url(this.avatarUrlOptions()));
+                window.clearInterval(fetchAvatarInterval);
+              }
+            });
+          }, 100);
+        }
       },
       'click .js-select-avatar': function() {
         var avatarUrl = this.currentData().url(this.avatarUrlOptions());

collections/avatars.js

@@ -3,7 +3,7 @@ Avatars = new FS.Collection('avatars', {
     new FS.Store.GridFS('avatars')
   ],
   filter: {
-    maxSize: 32000,
+    maxSize: 72000,
     allow: {
       contentTypes: ['image/*']
     }

i18n/en.i18n.json

@@ -189,6 +189,7 @@
     "editProfilePopup-title": "Edit Profile",
     "changeAvatarPopup-title": "Change Avatar",
     "changePasswordPopup-title": "Change Password",
+    "avatar-too-big": "The avatar is too large (70Kb max)",
     "cardDetailsActionsPopup-title": "Card Actions",
     "disambiguateMultiLabelPopup-title": "Disambiguate Label Action",
     "disambiguateMultiMemberPopup-title": "Disambiguate Member Action"