Merge pull request #5412 from pichalite/cropperjs

Ability to crop profile images before uploading

src/meta/css.js

@@ -70,6 +70,7 @@ module.exports = function (Meta) {
 					source += '\n@import "..' + path.sep + '..' + path.sep + 'public/less/generics.less";';
 					source += '\n@import "..' + path.sep + '..' + path.sep + 'public/less/mixins.less";';
 					source += '\n@import "..' + path.sep + '..' + path.sep + 'public/less/global.less";';
+					source += '\n@import (inline) "..' + path.sep + 'node_modules/cropperjs/dist/cropper.css";';
 					source = '@import "./theme";\n' + source;
 
 					minify(source, paths, 'cache', callback);

src/meta/js.js

@@ -81,7 +81,8 @@ module.exports = function (Meta) {
 				"Chart.js": './node_modules/chart.js/dist/Chart.min.js',
 				"mousetrap.js": './node_modules/mousetrap/mousetrap.min.js',
 				"jqueryui.js": 'public/vendor/jquery/js/jquery-ui.js',
-				"buzz.js": 'public/vendor/buzz/buzz.js'
+				"buzz.js": 'public/vendor/buzz/buzz.js',
+				"cropper.js": './node_modules/cropperjs/dist/cropper.min.js'
 			}
 		}
 	};

src/socket.io/user/profile.js

@@ -37,6 +37,20 @@ module.exports = function (SocketUser) {
 			}
 		], callback);
 	};
+	
+	SocketUser.uploadCroppedPicture = function (socket, data, callback) {
+		if (!socket.uid) {
+			return callback(new Error('[[error:no-privileges]]'));
+		}
+		async.waterfall([
+			function (next) {
+				user.isAdminOrSelf(socket.uid, data.uid, next);
+			},
+			function (next) {
+				user.uploadCroppedPicture(data, next);
+			}
+		], callback);
+	};
 
 	SocketUser.removeCover = function (socket, data, callback) {
 		if (!socket.uid) {

src/user/picture.js

@@ -220,6 +220,84 @@ module.exports = function (User) {
 			}
 		});
 	};
+	
+	User.uploadCroppedPicture = function (data, callback) {
+		var keepAllVersions = parseInt(meta.config['profile:keepAllUserImages'], 10) === 1;
+		var url, md5sum;
+
+		if (!data.imageData) {
+			return callback(new Error('[[error:invalid-data]]'));
+		}
+		
+		async.waterfall([
+			function (next) {
+				var size = data.file ? data.file.size : data.imageData.length;
+				var uploadSize = parseInt(meta.config.maximumProfileImageSize, 10) || 256;
+				if (size > uploadSize * 1024) {
+					return next(new Error('[[error:file-too-big, ' + meta.config.maximumProfileImageSize + ']]'));
+				}
+
+				md5sum = crypto.createHash('md5');
+				md5sum.update(data.imageData);
+				md5sum = md5sum.digest('hex');
+
+				data.file = {
+					path: path.join(os.tmpdir(), md5sum)
+				};
+
+				var buffer = new Buffer(data.imageData.slice(data.imageData.indexOf('base64') + 7), 'base64');
+
+				fs.writeFile(data.file.path, buffer, {
+					encoding: 'base64'
+				}, next);
+			},
+			function (next) {
+				var image = {
+					name: 'profileAvatar',
+					path: data.file.path,
+					uid: data.uid
+				};
+
+				if (plugins.hasListeners('filter:uploadImage')) {
+					return plugins.fireHook('filter:uploadImage', {image: image, uid: data.uid}, next);
+				}
+
+				var filename = data.uid + '-profileavatar' + (keepAllVersions ? '-' + Date.now() : '');
+				async.waterfall([
+					function (next) {
+						file.isFileTypeAllowed(data.file.path, next);
+					},
+					function (next) {
+						file.saveFileToLocal(filename, 'profile', image.path, next);
+					},
+					function (upload, next) {
+						next(null, {
+							url: nconf.get('relative_path') + upload.url,
+							name: image.name
+						});
+					}
+				], next);
+			},
+			function (uploadData, next) {
+				url = uploadData.url;
+				User.setUserFields(data.uid, {uploadedpicture: url, picture: url}, next);
+			},
+			function (next) {
+				fs.unlink(data.file.path, function (err) {
+					if (err) {
+						winston.error(err);
+					}
+					next();
+				});
+			}
+		], function (err) {
+			if (err) {
+				callback(err);	// send back the original error
+			}
+
+			callback(err, {url: url});
+		});
+	};
 
 	User.removeCoverPicture = function (data, callback) {
 		db.deleteObjectFields('user:' + data.uid, ['cover:url', 'cover:position'], callback);

src/views/modals/crop_picture.tpl

@@ -0,0 +1,22 @@
+	<div id="crop-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="crop-picture" aria-hidden="true">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+					<h3 id="crop-picture">[[user:crop_picture]]</h3>
+				</div>
+				<div class="modal-body">
+					<div id="upload-progress-box" class="progress hide">
+						<div id="upload-progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+						</div>
+					</div>
+					
+					<img id="cropped-image" src="{url}" >
+ 				</div>
+				<div class="modal-footer">
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button class="btn btn-primary crop-btn">[[user:upload_cropped_picture]]</button>
+				</div>
+			</div>
+		</div>
+	</div>