Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-02 12:05:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baris Usakli
2013-10-22 15:54:02 -04:00
parent 9babef0095
commit f4faee4283
12 changed files with 242 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
public/src/forum/accountedit.js
View File

@@ -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 = {

11
public/src/forum/admin/settings.js
View File

@@ -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) {

83
public/src/modules/uploader.js Normal file
View File

@@ -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;
});

35
public/templates/accountedit.tpl
View File

@@ -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>

35
public/templates/admin/footer.tpl
View File

@@ -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;">

4
public/templates/admin/header.tpl
View File

@@ -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">

3
public/templates/admin/settings.tpl
View File

@@ -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>

34
public/templates/footer.tpl
View File

@@ -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>

2
public/templates/header.tpl
View File

@@ -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>

10
src/posts.js
View File

@@ -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 {

51
src/routes/admin.js
View File

@@ -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);
});
});

2
src/routes/user.js
View File

@@ -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)