added ability to upload category images. closes #638, closes #532

public/src/forum/admin/categories.js

@@ -1,4 +1,4 @@
-define(function() {
+define(['uploader'], function(uploader) {
 	var	Categories = {};
 
 	Categories.init = function() {
@@ -147,7 +147,6 @@ define(function() {
 				var btn = $(this);
 				var categoryRow = btn.parents('li');
 				var cid = categoryRow.attr('data-cid');
-				console.log(this.getAttribute('data-disabled'));
 
 				var disabled = this.getAttribute('data-disabled') === '0' ? '1' : '0';
 				categoryRow.remove();
@@ -179,6 +178,17 @@ define(function() {
 				var	cid = $(this).parents('li[data-cid]').attr('data-cid');
 				Categories.launchPermissionsModal(cid);
 			});
+
+
+			$('.upload-button').on('click', function() {
+				var inputEl = this;
+				
+				uploader.open(config.relative_path + '/admin/category/uploadpicture', function(imageUrlOnServer) {
+					inputEl.value = imageUrlOnServer;
+					$(inputEl).parents('li[data-cid]').find('.preview-box').css('background', 'url(' + imageUrlOnServer + '?' + new Date().getTime() + ')');
+					modified(inputEl);
+				});
+			});
 		});
 	};
 

public/templates/admin/categories.tpl

@@ -15,7 +15,7 @@
 			<li data-cid="{categories.cid}" class="entry-row">
 				<div class="row">
 					<div class="col-sm-2 hidden-xs">
-						<div class="preview-box" style="background: {categories.bgColor}; color: {categories.color};">
+						<div class="preview-box" style="background: {categories.background}; color: {categories.color};">
 							<div class="icon">
 								<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
 							</div>
@@ -67,6 +67,7 @@
 													<hr />
 													<li data-disabled="{categories.disabled}"><a href="#"></a></li>
 												</ul>
+												<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
 											</div>
 											<!-- <div class="btn-group">
 												<button type="submit" class="btn btn-default disable-btn" data-disabled="{categories.disabled}">Disable</button>

public/templates/home.tpl

@@ -8,7 +8,7 @@
 		<a href="category/{categories.slug}" itemprop="url">
 			<meta itemprop="name" content="{categories.name}">
 			<h4><span class="badge {categories.badgeclass}">{categories.topic_count} </span> {categories.name}</h4>
-			<div class="icon" style="background: {categories.bgColor}; color: {categories.color};">
+			<div class="icon" style="background: {categories.background}; color: {categories.color};">
 				<div id="category-{categories.cid}" class="category-slider-{categories.post_count}">
 					<div class="category-box"><i class="fa {categories.icon} fa-4x"></i></div>
 					<div class="category-box" itemprop="description">{categories.description}</div>

src/categories.js

@@ -25,7 +25,7 @@ var db = require('./database.js'),
 				name: data.name,
 				description: data.description,
 				icon: data.icon,
-				bgColor: data.bgColor,
+				background: data.bgColor,
 				color: data.color,
 				slug: slug,
 				topic_count: 0,
@@ -288,7 +288,11 @@ var db = require('./database.js'),
 	Categories.getCategoryData = function(cid, callback) {
 		db.exists('category:' + cid, function(err, exists) {
 			if (exists) {
-				db.getObject('category:' + cid, callback);
+				db.getObject('category:' + cid, function(err, data) {
+					if (data.cid == "15") console.log(data);
+					data.background = data.image ? 'url(' + data.image + ')' : data.bgColor;
+					callback(err, data);
+				});
 			} else {
 				callback(new Error('No category found!'));
 			}

src/routes/admin.js

@@ -10,7 +10,8 @@ var nconf = require('nconf'),
 	pkg = require('./../../package.json'),
 	categories = require('./../categories'),
 	meta = require('../meta'),
-	plugins = require('../plugins');
+	plugins = require('../plugins'),
+	utils = require('./../../public/src/utils.js');
 
 
 
@@ -97,6 +98,53 @@ var nconf = require('nconf'),
 				});
 			});
 
+			app.post('/category/uploadpicture', 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 =  'category' + utils.generateUUID() + extension;
+				var uploadPath = path.join(nconf.get('base_dir'), 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);
+					console.log(nconf.get('upload_url') + filename);
+					res.json({
+						path: nconf.get('upload_url') + filename
+					});
+				});
+
+				os.on('error', function (err) {
+					fs.unlinkSync(tempPath);
+					winston.err(err);
+				});
+
+				is.pipe(os);
+			});
+
 			app.post('/uploadlogo', function(req, res) {
 
 				if (!req.user)