From f4faee4283cb315e2bc7a4ca62bd8bd38d797654 Mon Sep 17 00:00:00 2001 From: Baris Usakli Date: Tue, 22 Oct 2013 15:54:02 -0400 Subject: [PATCH] moved image uploading to a require js module, added image upload to site logo --- public/src/forum/accountedit.js | 94 ++++------------------------- public/src/forum/admin/settings.js | 11 +++- public/src/modules/uploader.js | 83 +++++++++++++++++++++++++ public/templates/accountedit.tpl | 35 ----------- public/templates/admin/footer.tpl | 35 +++++++++++ public/templates/admin/header.tpl | 4 ++ public/templates/admin/settings.tpl | 3 +- public/templates/footer.tpl | 34 +++++++++++ public/templates/header.tpl | 2 +- src/posts.js | 10 ++- src/routes/admin.js | 57 +++++++++++++++-- src/routes/user.js | 2 +- 12 files changed, 242 insertions(+), 128 deletions(-) create mode 100644 public/src/modules/uploader.js diff --git a/public/src/forum/accountedit.js b/public/src/forum/accountedit.js index 7771562454..530261c77d 100644 --- a/public/src/forum/accountedit.js +++ b/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'); - $('#upload-picture-modal').removeClass('hide'); + uploader.open(config.relative_path + '/user/uploadpicture', function(imageUrlOnServer) { + $('#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 = { diff --git a/public/src/forum/admin/settings.js b/public/src/forum/admin/settings.js index b6017af47e..bbf04fef3e 100644 --- a/public/src/forum/admin/settings.js +++ b/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) { diff --git a/public/src/modules/uploader.js b/public/src/modules/uploader.js new file mode 100644 index 0000000000..381e0d2cad --- /dev/null +++ b/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; +}); \ No newline at end of file diff --git a/public/templates/accountedit.tpl b/public/templates/accountedit.tpl index 2166c69053..acfe8bc4ce 100644 --- a/public/templates/accountedit.tpl +++ b/public/templates/accountedit.tpl @@ -31,41 +31,6 @@ - -
+ +
+ +
@@ -126,4 +129,5 @@
+
diff --git a/public/templates/admin/settings.tpl b/public/templates/admin/settings.tpl index 9172ba310e..693247efa1 100644 --- a/public/templates/admin/settings.tpl +++ b/public/templates/admin/settings.tpl @@ -11,7 +11,8 @@
-
+
+

diff --git a/public/templates/footer.tpl b/public/templates/footer.tpl index 39bdc9eca0..85d380fbc2 100644 --- a/public/templates/footer.tpl +++ b/public/templates/footer.tpl @@ -21,6 +21,40 @@
+
diff --git a/public/templates/header.tpl b/public/templates/header.tpl index 100d2d71df..a88a02339e 100644 --- a/public/templates/header.tpl +++ b/public/templates/header.tpl @@ -43,7 +43,7 @@
- +

{title}

diff --git a/src/posts.js b/src/posts.js index ef285a8bcd..e1d30a677c 100644 --- a/src/posts.js +++ b/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 { diff --git a/src/routes/admin.js b/src/routes/admin.js index 28d0044849..afdb47adbc 100644 --- a/src/routes/admin.js +++ b/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); + }); }); @@ -89,7 +138,7 @@ var user = require('./../user.js'), plugins.ready(function() { plugins.fireHook('filter:admin.create_routes', custom_routes, function(err, custom_routes) { var routes = custom_routes.routes; - + for (var route in routes) { if (routes.hasOwnProperty(route)) { app[routes[route].method || 'get']('/admin' + routes[route].route, function(req, res) { @@ -98,10 +147,10 @@ var user = require('./../user.js'), res.send(header + options.content + templates['admin/footer']); }); }); - }); + }); } } - }); + }); }); app.namespace('/api/admin', function () { diff --git a/src/routes/user.js b/src/routes/user.js index d31f2b1ba7..62b8560b97 100644 --- a/src/routes/user.js +++ b/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)