hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
v1.18.x
Baris Usakli 11 years ago
parent 9babef0095
commit f4faee4283
12 changed files with 242 additions and 128 deletions
Show Stats Download Patch File Download Diff File

94
public/src/forum/accountedit.js
Unescape Escape 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,18 +82,22 @@ 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);
AccountEdit.hideAlerts();
uploadedPicture = imageUrlOnServer;
return false;
socket.emit('api:updateHeader', {
fields: ['username', 'picture', 'userslug']
});
});
$('#pictureUploadSubmitBtn').on('click', function() {
$('#uploadForm').submit();
return false;
});
(function handlePasswordChange() {
var currentPassword = $('#inputCurrentPassword');
var password_notify = $('#password-notify');
@ -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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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>

8
src/posts.js
Unescape Escape 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';
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
Unescape Escape 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
Unescape Escape 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)

Write Preview
Loading…
Cancel
Save