Merge pull request #5457 from pichalite/image-extension

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) {
+								if (err) {
-							        cropperModal.find('#upload-progress-box').hide();
+									cropperModal.find('#upload-progress-box').hide();
-							        cropperModal.find('.upload-btn').removeClass('disabled');
+									cropperModal.find('.upload-btn').removeClass('disabled');
-							        cropperModal.find('.crop-btn').removeClass('disabled');
+									cropperModal.find('.crop-btn').removeClass('disabled');
-							        return app.alertError(err.message);
+									return app.alertError(err.message);
-							    }
+								}
-
+
-							    callback(imageData.url);
+								callback(imageData.url);
-							    cropperModal.modal('hide');
+								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/controllers/uploads.js

@@ -59,7 +59,10 @@ function uploadAsImage(req, uploadedFile, callback) {
 				return next(new Error('[[error:no-privileges]]'));
 			}
 			if (plugins.hasListeners('filter:uploadImage')) {
-				return plugins.fireHook('filter:uploadImage', {image: uploadedFile, uid: req.uid}, callback);
+				return plugins.fireHook('filter:uploadImage', {
+					image: uploadedFile,
+					uid: req.uid
+				}, callback);
 			}
 			file.isFileTypeAllowed(uploadedFile.path, next);
 		},
@@ -156,7 +159,10 @@ uploadsController.uploadThumb = function (req, res, next) {
 				}
 
 				if (plugins.hasListeners('filter:uploadImage')) {
-					return plugins.fireHook('filter:uploadImage', {image: uploadedFile, uid: req.uid}, next);
+					return plugins.fireHook('filter:uploadImage', {
+						image: uploadedFile,
+						uid: req.uid
+					}, next);
 				}
 
 				uploadFile(req.uid, uploadedFile, next);
@@ -167,11 +173,17 @@ uploadsController.uploadThumb = function (req, res, next) {
 
 uploadsController.uploadGroupCover = function (uid, uploadedFile, callback) {
 	if (plugins.hasListeners('filter:uploadImage')) {
-		return plugins.fireHook('filter:uploadImage', {image: uploadedFile, uid: uid}, callback);
+		return plugins.fireHook('filter:uploadImage', {
+			image: uploadedFile,
+			uid: uid
+		}, callback);
 	}
 
 	if (plugins.hasListeners('filter:uploadFile')) {
-		return plugins.fireHook('filter:uploadFile', {file: uploadedFile, uid: uid}, callback);
+		return plugins.fireHook('filter:uploadFile', {
+			file: uploadedFile,
+			uid: uid
+		}, callback);
 	}
 
 	file.isFileTypeAllowed(uploadedFile.path, function (err) {
@@ -184,7 +196,10 @@ uploadsController.uploadGroupCover = function (uid, uploadedFile, callback) {
 
 function uploadFile(uid, uploadedFile, callback) {
 	if (plugins.hasListeners('filter:uploadFile')) {
-		return plugins.fireHook('filter:uploadFile', {file: uploadedFile, uid: uid}, callback);
+		return plugins.fireHook('filter:uploadFile', {
+			file: uploadedFile,
+			uid: uid
+		}, callback);
 	}
 
 	if (!uploadedFile) {
@@ -197,7 +212,7 @@ function uploadFile(uid, uploadedFile, callback) {
 
 	if (meta.config.hasOwnProperty('allowedFileExtensions')) {
 		var allowed = file.allowedExtensions();
-		var extension = typeToExtension(uploadedFile.type);
+		var extension = file.typeToExtension(uploadedFile.type);
 		if (!extension || (allowed.length > 0 && allowed.indexOf(extension) === -1)) {
 			return callback(new Error('[[error:invalid-file-type, ' + allowed.join(', ') + ']]'));
 		}
@@ -207,7 +222,7 @@ function uploadFile(uid, uploadedFile, callback) {
 }
 
 function saveFileToLocal(uploadedFile, callback) {
-	var extension = typeToExtension(uploadedFile.type);
+	var extension = file.typeToExtension(uploadedFile.type);
 	if (!extension) {
 		return callback(new Error('[[error:invalid-extension]]'));
 	}
@@ -228,14 +243,6 @@ function saveFileToLocal(uploadedFile, callback) {
 	});
 }
 
-function typeToExtension(type) {
-	var extension;
-	if (type) {
-		extension = '.' + mime.extension(type);
-	}
-	return extension;
-}
-
 function deleteTempFiles(files) {
 	async.each(files, function (file, next) {
 		fs.unlink(file.path, function (err) {
@@ -247,6 +254,4 @@ function deleteTempFiles(files) {
 	});
 }
 
-
-
 module.exports = uploadsController;

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

@@ -43,7 +43,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 +82,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);
@@ -109,12 +115,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 +185,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 +227,24 @@ 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});
+				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
+				return callback(err); // send back the original error
 			}
 
-			callback(err, {url: url});
+			callback(err, {
+				url: url
+			});
 		});
 	};
 

test/mocha.opts

@@ -1,2 +1,2 @@
 --reporter dot
---timeout 15000
+--timeout 25000