Ability to resize avatars before uploading them

www/profile/inner.js

@@ -11,6 +11,7 @@ define([
     '/customize/messages.js',
     '/bower_components/marked/marked.min.js',
     'cm/lib/codemirror',
+    '/bower_components/croppie/croppie.min.js',
 
     'cm/mode/markdown/markdown',
 
@@ -20,6 +21,7 @@ define([
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/customize/src/less2/main.less',
+    'css!/bower_components/croppie/croppie.css',
 ], function (
     $,
     Crypto,
@@ -32,7 +34,8 @@ define([
     Realtime,
     Messages,
     Marked,
-    CodeMirror
+    CodeMirror,
+    Croppie
     )
 {
     var APP = window.APP = {
@@ -253,12 +256,44 @@ define([
         createEditableInput($block, LINK_ID, placeholder, getValue, setValue);
     };
 
+    var AVATAR_SIZE_LIMIT = 0.5;
     var allowedMediaTypes = [
         'image/png',
         'image/jpeg',
         'image/jpg',
         'image/gif',
     ];
+    var transformAvatar = function (file, cb) {
+        if (file.type === 'image/gif') { return void cb(file); }
+        var $croppie = $('<div>', {
+            'class': 'cp-app-profile-resizer'
+        });
+
+        var todo = function () {
+            UI.confirm($croppie[0], function (yes) {
+                if (!yes) { return; }
+                $croppie.croppie('result', {
+                    type: 'blob',
+                    size: {width: 300, height: 300}
+                }).then(function(blob) {
+                    blob.lastModifiedDate = new Date();
+                    blob.name = 'avatar';
+                    cb(blob);
+                });
+            });
+        };
+
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $croppie.croppie({
+                url: e.target.result,
+                viewport: { width: 100, height: 100 },
+                boundary: { width: 400, height: 300 },
+            });
+            todo();
+        };
+        reader.readAsDataURL(file);
+    };
     var addAvatar = function ($container) {
         var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
         var $span = $('<span>').appendTo($block);
@@ -318,14 +353,30 @@ define([
             }
         };
         APP.FM = common.createFileManager(fmConfig);
+        var accepted = ".gif,.jpg,.jpeg,.png";
         var data = {
             FM: APP.FM,
             filter: function (file) {
                 var sizeMB = Util.bytesToMegabytes(file.size);
                 var type = file.type;
-                return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
+                // We can't resize .gif so we have to display an error if it is too big
+                if (sizeMB > AVATAR_SIZE_LIMIT && type === 'image/gif') {
+                    UI.log(Messages._getKey('profile_uploadSizeError', [
+                        Messages._getKey('formattedMB', [AVATAR_SIZE_LIMIT])
+                    ]));
+                    return false;
+                }
+                // Display an error if the image type is not allowed
+                if (allowedMediaTypes.indexOf(type) === -1) {
+                    UI.log(Messages._getKey('profile_uploadTypeError', [
+                        accepted.split(',').join(', ')
+                    ]));
+                    return false;
+                }
+                return true;
             },
-            accept: ".gif,.jpg,.jpeg,.png"
+            transformer: transformAvatar,
+            accept: accepted
         };
         var $upButton = common.createButton('upload', false, data);
         $upButton.text(Messages.profile_upload);