diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js
index 03e9f2914a..bc80fd49e5 100644
--- a/public/src/client/account/edit.js
+++ b/public/src/client/account/edit.js
@@ -2,7 +2,7 @@
 
 /* globals define, ajaxify, socket, app, config, templates, bootbox */
 
-define('forum/account/edit', ['forum/account/header', 'uploader', 'translator', 'components', 'pictureCropper'], function (header, uploader, translator, components, pictureCropper) {
+define('forum/account/edit', ['forum/account/header', 'translator', 'components', 'pictureCropper'], function (header, translator, components, pictureCropper) {
 	var AccountEdit = {};
 
 	AccountEdit.init = function () {
@@ -214,7 +214,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator',
 		modal.find('[data-action="upload"]').on('click', function () {
 			modal.modal('hide');
 
-			uploader.show({
+			pictureCropper.show({
 				socketMethod: 'user.uploadCroppedPicture',
 				aspectRatio: '1 / 1',
 				paramName: 'uid',
diff --git a/public/src/client/account/header.js b/public/src/client/account/header.js
index 757b87dc1f..7dcf320fbe 100644
--- a/public/src/client/account/header.js
+++ b/public/src/client/account/header.js
@@ -3,10 +3,10 @@
 
 define('forum/account/header', [
 	'coverPhoto',
-	'uploader',
+	'pictureCropper',
 	'components',
 	'translator'
-], function (coverPhoto, uploader, components, translator) {
+], function (coverPhoto, pictureCropper, components, translator) {
 	var AccountHeader = {};
 	var isAdminOrSelfOrGlobalMod;
 
@@ -78,7 +78,7 @@ define('forum/account/header', [
 				}, callback);
 			},
 			function () {
-				uploader.show({
+				pictureCropper.show({
 					title: '[[user:upload_cover_picture]]',
 					socketMethod: 'user.updateCover',
 					aspectRatio: '16 / 9',
diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js
index 9de3e47113..771c355fcc 100644
--- a/public/src/client/groups/details.js
+++ b/public/src/client/groups/details.js
@@ -6,10 +6,10 @@ define('forum/groups/details', [
 	'iconSelect',
 	'components',
 	'coverPhoto',
-	'uploader',
+	'pictureCropper',
 	'translator',
 	'vendor/colorpicker/colorpicker'
-], function (memberList, iconSelect, components, coverPhoto, uploader, translator) {
+], function (memberList, iconSelect, components, coverPhoto, pictureCropper, translator) {
 
 	var Details = {};
 	var groupName;
@@ -31,7 +31,7 @@ define('forum/groups/details', [
 					}, callback);
 				},
 				function () {
-					uploader.show({
+					pictureCropper.show({
 						title: '[[groups:upload-group-cover]]',
 						socketMethod: 'groups.cover.update',
 						aspectRatio: '16 / 9',
diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js
index c4887e0d6e..40be206c19 100644
--- a/public/src/modules/pictureCropper.js
+++ b/public/src/modules/pictureCropper.js
@@ -3,8 +3,33 @@
 /* globals define, socket, app, templates */
 
 define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) {
+	var module = {};
 
-    var module = {};
+	module.show = function (data, callback) {
+		var fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
+		parseModal({
+			showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
+			fileSize: fileSize,
+			title: data.title || '[[global:upload_file]]',
+			description: data.description || '',
+			button: data.button || '[[global:upload]]',
+			accept: data.accept ? data.accept.replace(/,/g, ', ') : ''
+		}, function (uploadModal) {
+			uploadModal = $(uploadModal);
+
+			uploadModal.modal('show');
+		 	uploadModal.on('hidden.bs.modal', function () {
+				uploadModal.remove();
+			});
+
+			uploadModal.find('#fileUploadSubmitBtn').on('click', function () {
+				$(this).addClass('disabled');
+				data.uploadModal = uploadModal;
+				onSubmit(data, callback);
+				return false;
+			});
+		});
+	};
 
     module.handleImageCrop = function (data, callback) {
 		$('#crop-picture-modal').remove();
@@ -12,67 +37,114 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 			translator.translate(cropperHtml, function (translated) {
 				var cropperModal = $(translated);
 				cropperModal.modal('show');
-				
+
 				var img = document.getElementById('cropped-image');
 				var cropperTool = new cropper.default(img, {
 					aspectRatio: data.aspectRatio,
-					viewMode: 1
-				});
-				
-				cropperModal.find('.rotate').on('click', function () {
-					var degrees = this.getAttribute("data-degrees");
-					cropperTool.rotate(degrees);	
-				});
-				
-				cropperModal.find('.flip').on('click', function () {
-					var option = this.getAttribute("data-option");
-					var method = this.getAttribute("data-method");
-					method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
-					this.setAttribute("data-option", option * -1);
-				});
-				
-				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);
-					    cropperModal.modal('hide');
-					});
-				});
-				
-				cropperModal.find('.upload-btn').on('click', function () {
-					$(this).addClass('disabled');
-					cropperTool.destroy();
-				
-					cropperTool = new cropper.default(img, {
-						viewMode: 1,
-						autoCropArea: 1
-					});
-				
-					cropperModal.find('.crop-btn').trigger('click');
+					viewMode: 1,
+					ready: function () {
+						cropperModal.find('.rotate').on('click', function () {
+							var degrees = this.getAttribute("data-degrees");
+							cropperTool.rotate(degrees);
+						});
+
+						cropperModal.find('.flip').on('click', function () {
+							var option = this.getAttribute("data-option");
+							var method = this.getAttribute("data-method");
+							method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
+							this.setAttribute("data-option", option * -1);
+						});
+
+						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);
+							    cropperModal.modal('hide');
+							});
+						});
+
+						cropperModal.find('.upload-btn').on('click', function () {
+							$(this).addClass('disabled');
+							cropperTool.destroy();
+
+							cropperTool = new cropper.default(img, {
+								viewMode: 1,
+								autoCropArea: 1,
+								ready: function () {
+									cropperModal.find('.crop-btn').trigger('click');
+								}
+							});
+						});
+					}
 				});
 			});
 		});
 	};
 
+	function onSubmit(data, callback) {
+		function showAlert(type, message) {
+			module.hideAlerts(data.uploadModal);
+			if (type === 'error') {
+				data.uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled');
+			}
+			data.uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
+		}
+
+		var fileInput = data.uploadModal.find('#fileInput');
+		if (!fileInput.val()) {
+			return showAlert('error', '[[uploads:select-file-to-upload]]');
+		}
+
+		var file    = fileInput[0].files[0];
+		var reader  = new FileReader();
+		var imageUrl;
+		var imageType = file.type;
+
+		reader.addEventListener("load", function () {
+			imageUrl = reader.result;
+
+			data.uploadModal.modal('hide');
+
+			module.handleImageCrop({
+				url: imageUrl,
+				imageType: imageType,
+				socketMethod: data.socketMethod,
+				aspectRatio: data.aspectRatio,
+				paramName: data.paramName,
+				paramValue: data.paramValue
+			}, callback);
+		}, false);
+
+		if (file) {
+			reader.readAsDataURL(file);
+		}
+	}
+
+	function parseModal(tplVals, callback) {
+		templates.parse('partials/modals/upload_file_modal', tplVals, function (html) {
+			translator.translate(html, callback);
+		});
+	}
+
 	return module;
 });