moved image uploading to a require js module, added image upload to site logo

public/src/forum/accountedit.js

@@ -1,4 +1,4 @@
-define(['forum/accountheader'], function(header) {
+define(['forum/accountheader', 'uploader'], function(header, uploader) {
 	var AccountEdit = {};
 
 	AccountEdit.init = function() {
@@ -7,61 +7,6 @@ define(['forum/accountheader'], function(header) {
 		var gravatarPicture = templates.get('gravatarpicture');
 		var uploadedPicture = templates.get('uploadedpicture');
 
-		$('#uploadForm').submit(function() {
-			AccountEdit.status('uploading the file ...');
-
-			$('#upload-progress-bar').css('width', '0%');
-			$('#upload-progress-box').show();
-			$('#upload-progress-box').removeClass('hide');
-
-			if (!$('#userPhotoInput').val()) {
-				AccountEdit.error('select an image to upload!');
-				return false;
-			}
-
-			$(this).find('#imageUploadCsrf').val($('#csrf_token').val());
-
-
-			$(this).ajaxSubmit({
-
-				error: function(xhr) {
-					AccountEdit.error('Error: ' + xhr.status);
-				},
-
-				uploadProgress: function(event, position, total, percent) {
-					console.log(percent);
-					$('#upload-progress-bar').css('width', percent + '%');
-				},
-
-
-				success: function(response) {
-					if (response.error) {
-						AccountEdit.error(response.error);
-						return;
-					}
-
-					var imageUrlOnServer = response.path;
-
-					$('#user-current-picture').attr('src', imageUrlOnServer);
-					$('#user-uploaded-picture').attr('src', imageUrlOnServer);
-
-					uploadedPicture = imageUrlOnServer;
-
-					setTimeout(function() {
-						AccountEdit.hideAlerts();
-						$('#upload-picture-modal').modal('hide');
-					}, 750);
-
-					socket.emit('api:updateHeader', {
-						fields: ['username', 'picture', 'userslug']
-					});
-					AccountEdit.success('File uploaded successfully!');
-				}
-			});
-
-			return false;
-		});
-
 		var selectedImageType = '';
 
 		$('#submitBtn').on('click', function() {
@@ -137,17 +82,21 @@ define(['forum/accountheader'], function(header) {
 		$('#uploadPictureBtn').on('click', function() {
 
 			$('#change-picture-modal').modal('hide');
-			$('#upload-picture-modal').modal('show');
+			uploader.open(config.relative_path + '/user/uploadpicture', function(imageUrlOnServer) {
-			$('#upload-picture-modal').removeClass('hide');
+				$('#user-current-picture').attr('src', imageUrlOnServer);
+				$('#user-uploaded-picture').attr('src', imageUrlOnServer);
+
+				uploadedPicture = imageUrlOnServer;
+
+				socket.emit('api:updateHeader', {
+					fields: ['username', 'picture', 'userslug']
+				});
+			});
 
-			AccountEdit.hideAlerts();
 
 			return false;
 		});
 
-		$('#pictureUploadSubmitBtn').on('click', function() {
-			$('#uploadForm').submit();
-		});
 
 		(function handlePasswordChange() {
 			var currentPassword = $('#inputCurrentPassword');
@@ -230,27 +179,6 @@ define(['forum/accountheader'], function(header) {
 		}());
 	};
 
-	AccountEdit.hideAlerts = function() {
-		$('#alert-status').addClass('hide');
-		$('#alert-success').addClass('hide');
-		$('#alert-error').addClass('hide');
-		$('#upload-progress-box').addClass('hide');
-	}
-
-	AccountEdit.status = function(message) {
-		AccountEdit.hideAlerts();
-		$('#alert-status').text(message).removeClass('hide');
-	}
-
-	AccountEdit.success = function(message) {
-		AccountEdit.hideAlerts();
-		$('#alert-success').text(message).removeClass('hide');
-	}
-
-	AccountEdit.error = function(message) {
-		AccountEdit.hideAlerts();
-		$('#alert-error').text(message).removeClass('hide');
-	}
 
 	AccountEdit.changeUserPicture = function(type) {
 		var userData = {

public/src/forum/admin/settings.js

@@ -1,4 +1,4 @@
-define(function() {
+define(['uploader'], function(uploader) {
 	var Settings = {};
 
 	Settings.init = function() {
@@ -69,6 +69,15 @@ define(function() {
 				});
 			}
 		});
+
+		$('#uploadLogoBtn').on('click', function() {
+
+			uploader.open(config.relative_path + '/admin/uploadlogo', function(image) {
+				$('#logoUrl').val(image);
+			});
+
+			uploader.hideAlerts();
+		});
 	};
 
 	Settings.remove = function(key) {

public/src/modules/uploader.js

@@ -0,0 +1,83 @@
+define(function() {
+
+	var module = {};
+
+	module.open = function(route, callback) {
+		$('#upload-picture-modal').modal('show').removeClass('hide');
+		module.hideAlerts();
+
+		$('#uploadForm')[0].reset();
+		$('#uploadForm').attr('action', route);
+
+		$('#pictureUploadSubmitBtn').off('click').on('click', function() {
+			$('#uploadForm').submit();
+		});
+
+		$('#uploadForm').off('submit').submit(function() {
+
+			function status(message) {
+				module.hideAlerts();
+				$('#alert-status').text(message).removeClass('hide');
+			}
+
+			function success(message) {
+				module.hideAlerts();
+				$('#alert-success').text(message).removeClass('hide');
+			}
+
+			function error(message) {
+				module.hideAlerts();
+				$('#alert-error').text(message).removeClass('hide');
+			}
+
+			status('uploading the file ...');
+
+			$('#upload-progress-bar').css('width', '0%');
+			$('#upload-progress-box').show().removeClass('hide');
+
+			if (!$('#userPhotoInput').val()) {
+				error('select an image to upload!');
+				return false;
+			}
+
+			$(this).find('#imageUploadCsrf').val($('#csrf_token').val());
+
+
+			$(this).ajaxSubmit({
+
+				error: function(xhr) {
+					error('Error: ' + xhr.status);
+				},
+
+				uploadProgress: function(event, position, total, percent) {
+					$('#upload-progress-bar').css('width', percent + '%');
+				},
+
+				success: function(response) {
+					if (response.error) {
+						error(response.error);
+						return;
+					}
+					callback(response.path);
+
+					success('File uploaded successfully!');
+					setTimeout(function() {
+						module.hideAlerts();
+						$('#upload-picture-modal').modal('hide');
+					}, 750);
+				}
+			});
+
+			return false;
+		});
+	}
+
+	module.hideAlerts = function() {
+		$('#alert-status').addClass('hide');
+		$('#alert-success').addClass('hide');
+		$('#alert-error').addClass('hide');
+		$('#upload-progress-box').addClass('hide');
+	}
+
+	return module;
+});

public/templates/accountedit.tpl

@@ -31,41 +31,6 @@
 		</div><!-- /.modal-dialog -->
 	</div><!-- /.modal -->
 
-	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload 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="myModalLabel">Upload Picture</h3>
-				</div>
-				<div class="modal-body">
-					<form id="uploadForm" action="{relative_path}/user/uploadpicture" method="post" enctype="multipart/form-data">
-						<div class="form-group">
-							<label for="userPhoto">Upload a picture</label>
-							<input type="file" id="userPhotoInput"  name="userPhoto">
-							<p class="help-block">You may only upload PNG, JPG, or GIF files under 256kb.</p>
-						</div>
-						<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
-					</form>
-
-					<div id="upload-progress-box" class="progress progress-striped">
-						<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
-							<span class="sr-only"> success</span>
-						</div>
-					</div>
-
-					<div id="alert-status" class="alert alert-info hide"></div>
-					<div id="alert-success" class="alert alert-success hide"></div>
-					<div id="alert-error" class="alert alert-danger hide"></div>
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
-					<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
-				</div>
-			</div><!-- /.modal-content -->
-		</div><!-- /.modal-dialog -->
-	</div><!-- /.modal -->
-
 	<div class="account-username-box" data-userslug="{userslug}">
 		<span class="account-username">
 			<a href="/user/{userslug}">{username}</a> <i class="icon-chevron-right"></i>

public/templates/admin/footer.tpl

@@ -2,6 +2,41 @@
 		</div>
 	</div>
 
+	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload 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="myModalLabel">Upload Picture</h3>
+				</div>
+				<div class="modal-body">
+					<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
+						<div class="form-group">
+							<label for="userPhoto">Upload a picture</label>
+							<input type="file" id="userPhotoInput"  name="userPhoto">
+							<p class="help-block">You may only upload PNG, JPG, or GIF files under 256kb.</p>
+						</div>
+						<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
+					</form>
+
+					<div id="upload-progress-box" class="progress progress-striped">
+						<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+							<span class="sr-only"> success</span>
+						</div>
+					</div>
+
+					<div id="alert-status" class="alert alert-info hide"></div>
+					<div id="alert-success" class="alert alert-success hide"></div>
+					<div id="alert-error" class="alert alert-danger hide"></div>
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
+
 	<div id="alert_window"></div>
 
 	<div id="footer" class="container" style="padding-top: 50px; display:none;">

public/templates/admin/header.tpl

@@ -18,6 +18,7 @@
 	<script type="text/javascript" src="{relative_path}/src/translator.js"></script>
 	<script type="text/javascript" src="{relative_path}/src/ajaxify.js"></script>
 	<script src="{relative_path}/vendor/jquery/js/jquery.timeago.js"></script>
+	<script src="{relative_path}/vendor/jquery/js/jquery.form.js"></script>
 	<script src="{relative_path}/vendor/requirejs/require.js"></script>
 	<script src="{relative_path}/vendor/bootbox/bootbox.min.js"></script>
 
@@ -70,6 +71,8 @@
 		</div>
 	</div>
 
+	<input id="csrf_token" type="hidden" template-variable="csrf" value="{csrf}" />
+
 	<div class="container">
 		<div class="row">
 			<div class="col-md-3">
@@ -126,4 +129,5 @@
 					</ul>
 				</div><!--/.well -->
 			</div><!--/span-->
+
 			<div class="col-md-9" id="content">

public/templates/admin/settings.tpl

@@ -11,7 +11,8 @@
 		<label>Site Keywords</label>
 		<input type="text" class="form-control" placeholder="Keywords describing your community, comma-seperated" data-field="keywords" /><br />
 		<label>Site Logo</label>
-		<input type="text" class="form-control" placeholder="Path to a logo to display on forum header" data-field="brand:logo" /><br />
+		<input id="logoUrl" type="text" class="form-control" placeholder="Path to a logo to display on forum header" data-field="brand:logo" /><br />
+		<input id="uploadLogoBtn" type="button" class="btn btn-default" value="Upload"></input> <br />
 		<label>Imgur Client ID</label>
 		<input type="text" class="form-control" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" /><br />
 		<label>Maximum User Image Size</label>

public/templates/footer.tpl

@@ -21,6 +21,40 @@
 		</div><!-- /.modal-dialog -->
 	</div><!-- /.modal -->
 
+	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Upload 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="myModalLabel">Upload Picture</h3>
+				</div>
+				<div class="modal-body">
+					<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
+						<div class="form-group">
+							<label for="userPhoto">Upload a picture</label>
+							<input type="file" id="userPhotoInput"  name="userPhoto">
+							<p class="help-block">You may only upload PNG, JPG, or GIF files under 256kb.</p>
+						</div>
+						<input id="imageUploadCsrf" type="hidden" name="_csrf" value="" />
+					</form>
+
+					<div id="upload-progress-box" class="progress progress-striped">
+						<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+							<span class="sr-only"> success</span>
+						</div>
+					</div>
+
+					<div id="alert-status" class="alert alert-info hide"></div>
+					<div id="alert-success" class="alert alert-success hide"></div>
+					<div id="alert-error" class="alert alert-danger hide"></div>
+				</div>
+				<div class="modal-footer">
+					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+					<button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
 
 	<div id="alert_window"></div>
 

public/templates/header.tpl

@@ -43,7 +43,7 @@
 				</button>
 				<div>
 					<a href="/">
-						<img class="{brand:logo:display} forum-logo" src="{relative_path}/{brand:logo}" />
+						<img class="{brand:logo:display} forum-logo" src="{brand:logo}" />
 					</a>
 					<a href="/">
 						<h1 class="navbar-brand forum-title">{title}</h1>

src/posts.js

@@ -177,10 +177,16 @@ var RDB = require('./redis.js'),
 		multi.exec(function (err, replies) {
 			async.map(replies, function(postData, _callback) {
 				if (postData) {
-					postData.relativeTime = new Date(parseInt(postData.timestamp,10)).toISOString();
+
 					postData.post_rep = postData.reputation;
 					postData['edited-class'] = postData.editor !== '' ? '' : 'none';
-					postData['relativeEditTime'] = postData.edited !== '0' ? (new Date(parseInt(postData.edited,10)).toISOString()) : '';
+					try {
+						postData.relativeTime = new Date(parseInt(postData.timestamp,10)).toISOString();
+						postData['relativeEditTime'] = postData.edited !== '0' ? (new Date(parseInt(postData.edited,10)).toISOString()) : '';
+					} catch(e) {
+						winston.err('invalid time value');
+					}
+
 
 					if (postData.uploadedImages) {
 						try {

src/routes/admin.js

@@ -8,7 +8,8 @@ var user = require('./../user.js'),
 	plugins = require('../plugins'),
 	winston = require('winston'),
 	nconf = require('nconf'),
-	fs = require('fs');
+	fs = require('fs'),
+	path = require('path');
 
 (function (Admin) {
 	Admin.isAdmin = function (req, res, next) {
@@ -78,6 +79,54 @@ var user = require('./../user.js'),
 					res.send(header + app.create_route('admin/index') + templates['admin/footer']);
 				});
 			});
+
+			app.post('/uploadlogo', Admin.isAdmin, function(req, res) {
+
+				if (!req.user)
+					return res.redirect('/403');
+
+				var allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
+
+				if (allowedTypes.indexOf(req.files.userPhoto.type) === -1) {
+					res.send({
+						error: 'Allowed image types are png, jpg and gif!'
+					});
+					return;
+				}
+
+				var tempPath = req.files.userPhoto.path;
+				var extension = path.extname(req.files.userPhoto.name);
+
+				if (!extension) {
+					res.send({
+						error: 'Error uploading file! Error : Invalid extension!'
+					});
+					return;
+				}
+
+				var filename =  'site-logo' + extension;
+				var uploadPath = path.join(process.cwd(), nconf.get('upload_path'), filename);
+
+				winston.info('Attempting upload to: ' + uploadPath);
+
+				var is = fs.createReadStream(tempPath);
+				var os = fs.createWriteStream(uploadPath);
+
+				is.on('end', function () {
+					fs.unlinkSync(tempPath);
+
+					res.json({
+						path: nconf.get('upload_url') + filename
+					});
+				});
+
+				os.on('error', function (err) {
+					fs.unlinkSync(tempPath);
+					winston.err(err);
+				});
+
+				is.pipe(os);
+			});
 		});
 
 

src/routes/user.js

@@ -425,7 +425,7 @@ var user = require('./../user.js'),
 						posts.getPostsByUid(userData.theirid, 0, 9, function (posts) {
 
 							userData.posts = posts.filter(function (p) {
-								return p.deleted !== "1";
+								return p && p.deleted !== "1";
 							});
 							userData.isFollowing = isFollowing;
 							if (!userData.profileviews)