Add extensions for cropped images

public/src/modules/pictureCropper.js

@@ -18,7 +18,7 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 			uploadModal = $(uploadModal);
 
 			uploadModal.modal('show');
-		 	uploadModal.on('hidden.bs.modal', function () {
+			uploadModal.on('hidden.bs.modal', function () {
 				uploadModal.remove();
 			});
 
@@ -31,9 +31,11 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 		});
 	};
 
-    module.handleImageCrop = function (data, callback) {
+	module.handleImageCrop = function (data, callback) {
 		$('#crop-picture-modal').remove();
-		templates.parse('modals/crop_picture', {url: data.url}, function (cropperHtml) {
+		templates.parse('modals/crop_picture', {
+			url: data.url
+		}, function (cropperHtml) {
 			translator.translate(cropperHtml, function (translated) {
 				var cropperModal = $(translated);
 				cropperModal.modal('show');
@@ -58,28 +60,28 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 						cropperModal.find('.reset').on('click', function () {
 							cropperTool.reset();
 						});
-						
+
 						cropperModal.find('.crop-btn').on('click', function () {
 							$(this).addClass('disabled');
 							var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
-							
+
 							cropperModal.find('#upload-progress-bar').css('width', '100%');
 							cropperModal.find('#upload-progress-box').show().removeClass('hide');
-							
+
 							var socketData = {};
 							socketData[data.paramName] = data.paramValue;
 							socketData['imageData'] = imageData;
-							
-							socket.emit(data.socketMethod, socketData, function (err, imageData) {
-							    if (err) {
-							        cropperModal.find('#upload-progress-box').hide();
-							        cropperModal.find('.upload-btn').removeClass('disabled');
-							        cropperModal.find('.crop-btn').removeClass('disabled');
-							        return app.alertError(err.message);
-							    }
 
-							    callback(imageData.url);
+							socket.emit(data.socketMethod, socketData, function (err, imageData) {
-							    cropperModal.modal('hide');
+								if (err) {
+									cropperModal.find('#upload-progress-box').hide();
+									cropperModal.find('.upload-btn').removeClass('disabled');
+									cropperModal.find('.crop-btn').removeClass('disabled');
+									return app.alertError(err.message);
+								}
+
+								callback(imageData.url);
+								cropperModal.modal('hide');
 							});
 						});
 
@@ -115,8 +117,8 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 			return showAlert('error', '[[uploads:select-file-to-upload]]');
 		}
 
-		var file    = fileInput[0].files[0];
+		var file = fileInput[0].files[0];
-		var reader  = new FileReader();
+		var reader = new FileReader();
 		var imageUrl;
 		var imageType = file.type;
 

src/file.js

@@ -6,6 +6,7 @@ var path = require('path');
 var winston = require('winston');
 var jimp = require('jimp');
 var mkdirp = require('mkdirp');
+var mime = require('mime');
 
 var utils = require('../public/src/utils');
 
@@ -13,8 +14,8 @@ var file = {};
 
 file.saveFileToLocal = function (filename, folder, tempPath, callback) {
 	/*
-	* remarkable doesn't allow spaces in hyperlinks, once that's fixed, remove this.
+	 * remarkable doesn't allow spaces in hyperlinks, once that's fixed, remove this.
-	*/
+	 */
 	filename = filename.split('.');
 	filename.forEach(function (name, idx) {
 		filename[idx] = utils.slugify(name);
@@ -100,7 +101,8 @@ file.existsSync = function (path) {
 	var exists = false;
 	try {
 		exists = fs.statSync(path);
-	} catch(err) {
+	}
+	catch (err) {
 		exists = false;
 	}
 
@@ -110,7 +112,8 @@ file.existsSync = function (path) {
 file.link = function link(filePath, destPath, cb) {
 	if (process.platform === 'win32') {
 		fs.link(filePath, destPath, cb);
-	} else {
+	}
+	else {
 		fs.symlink(filePath, destPath, 'file', cb);
 	}
 };
@@ -120,4 +123,12 @@ file.linkDirs = function linkDirs(sourceDir, destDir, callback) {
 	fs.symlink(sourceDir, destDir, type, callback);
 };
 
+file.typeToExtension = function (type) {
+	var extension;
+	if (type) {
+		extension = '.' + mime.extension(type);
+	}
+	return extension;
+};
+
 module.exports = file;

src/user/picture.js

@@ -8,7 +8,6 @@ var nconf = require('nconf');
 var crypto = require('crypto');
 var winston = require('winston');
 var request = require('request');
-var mime = require('mime');
 
 var plugins = require('../plugins');
 var file = require('../file');
@@ -43,7 +42,10 @@ module.exports = function (User) {
 		async.waterfall([
 			function (next) {
 				if (plugins.hasListeners('filter:uploadImage')) {
-					return plugins.fireHook('filter:uploadImage', {image: picture, uid: updateUid}, next);
+					return plugins.fireHook('filter:uploadImage', {
+						image: picture,
+						uid: updateUid
+					}, next);
 				}
 
 				var filename = updateUid + '-profileimg' + (keepAllVersions ? '-' + Date.now() : '') + (convertToPNG ? '.png' : extension);
@@ -79,7 +81,10 @@ module.exports = function (User) {
 			},
 			function (_image, next) {
 				uploadedImage = _image;
-				User.setUserFields(updateUid, {uploadedpicture: uploadedImage.url, picture: uploadedImage.url}, next);
+				User.setUserFields(updateUid, {
+					uploadedpicture: uploadedImage.url,
+					picture: uploadedImage.url
+				}, next);
 			},
 			function (next) {
 				next(null, uploadedImage);
@@ -99,7 +104,7 @@ module.exports = function (User) {
 			var uploadSize = parseInt(meta.config.maximumProfileImageSize, 10) || 256;
 			var size = res.headers['content-length'];
 			var type = res.headers['content-type'];
-			var extension = mime.extension(type);
+			var extension = file.typeToExtension(type);
 
 			if (['png', 'jpeg', 'jpg', 'gif'].indexOf(extension) === -1) {
 				return callback(new Error('[[error:invalid-image-extension]]'));
@@ -109,12 +114,21 @@ module.exports = function (User) {
 				return callback(new Error('[[error:file-too-big, ' + uploadSize + ']]'));
 			}
 
-			var picture = {url: url, name: ''};
+			var picture = {
-			plugins.fireHook('filter:uploadImage', {image: picture, uid: uid}, function (err, image) {
+				url: url,
+				name: ''
+			};
+			plugins.fireHook('filter:uploadImage', {
+				image: picture,
+				uid: uid
+			}, function (err, image) {
 				if (err) {
 					return callback(err);
 				}
-				User.setUserFields(uid, {uploadedpicture: image.url, picture: image.url});
+				User.setUserFields(uid, {
+					uploadedpicture: image.url,
+					picture: image.url
+				});
 				callback(null, image);
 			});
 		});
@@ -170,10 +184,14 @@ module.exports = function (User) {
 				};
 
 				if (plugins.hasListeners('filter:uploadImage')) {
-					return plugins.fireHook('filter:uploadImage', {image: image, uid: data.uid}, next);
+					return plugins.fireHook('filter:uploadImage', {
+						image: image,
+						uid: data.uid
+					}, next);
 				}
 
-				var filename = data.uid + '-profilecover' + (keepAllVersions ? '-' + Date.now() : '');
+				var extension = file.typeToExtension(data.imageData.slice(5, data.imageData.indexOf('base64') - 1));
+				var filename = data.uid + '-profilecover' + (keepAllVersions ? '-' + Date.now() : '') + (extension || '');
 				async.waterfall([
 					function (next) {
 						file.isFileTypeAllowed(data.file.path, next);
@@ -208,20 +226,25 @@ module.exports = function (User) {
 						winston.error(unlinkErr);
 					}
 
-					callback(err);	// send back the original error
+					callback(err); // send back the original error
 				});
 			}
 
 			if (data.position) {
 				User.updateCoverPosition(data.uid, data.position, function (err) {
-					callback(err, {url: url});
+					callback(err, {
+						url: url
+					});
+				});
+			}
+			else {
+				callback(err, {
+					url: url
 				});
-			} else {
-				callback(err, {url: url});
 			}
 		});
 	};
-	
+
 	User.uploadCroppedPicture = function (data, callback) {
 		var keepAllVersions = parseInt(meta.config['profile:keepAllUserImages'], 10) === 1;
 		var url, md5sum;
@@ -229,7 +252,7 @@ module.exports = function (User) {
 		if (!data.imageData) {
 			return callback(new Error('[[error:invalid-data]]'));
 		}
-		
+
 		async.waterfall([
 			function (next) {
 				var size = data.file ? data.file.size : data.imageData.length;
@@ -260,10 +283,14 @@ module.exports = function (User) {
 				};
 
 				if (plugins.hasListeners('filter:uploadImage')) {
-					return plugins.fireHook('filter:uploadImage', {image: image, uid: data.uid}, next);
+					return plugins.fireHook('filter:uploadImage', {
+						image: image,
+						uid: data.uid
+					}, next);
 				}
 
-				var filename = data.uid + '-profileavatar' + (keepAllVersions ? '-' + Date.now() : '');
+				var extension = file.typeToExtension(data.imageData.slice(5, data.imageData.indexOf('base64') - 1));
+				var filename = data.uid + '-profileavatar' + (keepAllVersions ? '-' + Date.now() : '') + (extension || '');
 				async.waterfall([
 					function (next) {
 						file.isFileTypeAllowed(data.file.path, next);
@@ -281,7 +308,10 @@ module.exports = function (User) {
 			},
 			function (uploadData, next) {
 				url = uploadData.url;
-				User.setUserFields(data.uid, {uploadedpicture: url, picture: url}, next);
+				User.setUserFields(data.uid, {
+					uploadedpicture: url,
+					picture: url
+				}, next);
 			},
 			function (next) {
 				fs.unlink(data.file.path, function (err) {
@@ -293,10 +323,12 @@ module.exports = function (User) {
 			}
 		], function (err) {
 			if (err) {
-				callback(err);	// send back the original error
+				callback(err); // send back the original error
 			}
 
-			callback(err, {url: url});
+			callback(err, {
+				url: url
+			});
 		});
 	};