image upload and changing images will clean up later andrew stayla

public/css/style.less

@@ -270,6 +270,8 @@ footer.footer {
 		margin-right: 8px;
 		margin-top: -2px;
 		float: left;
+		width:24px;
+		height:24px;
 	}
 
 	span {
@@ -347,6 +349,20 @@ footer.footer {
     margin-right:20px;
     vertical-align:top;
 }
+ 
+.user-profile-picture {
+   width:128px;
+   height:128px;
+}
+
+.user-header-profile-picture {
+   width:24px;
+   height:24px;
+}
+
+.user-picture-label {
+  font-size:20px;
+}
 
 .account-bio-block{
   display:inline-block;

public/templates/account.tpl

@@ -14,7 +14,7 @@
 	</div>
 		
 	<div class="account-picture-block">
-		<img src="{user.picture}?s=128" />
+		<img src="{user.picture}?s=128" class="user-profile-picture"/>
 	</div>
 	
 	<div class="account-bio-block">

public/templates/accountedit.tpl

@@ -1,22 +1,75 @@
 
 <div class="well">
+
     <div class="alert" id="message" style="display:none">
         <button type="button" class="close" data-dismiss="message">&times;</button>
         <strong></strong>
         <p></p>
     </div>
 
+ 
+	<!-- Change Picture Modal -->
+	<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	  <div class="modal-header">
+	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+	    <h3 id="myModalLabel">Change Picture</h3>
+	  </div>
+	  <div class="modal-body">
+
+	    <div id="gravatar-box">
+		    <img id="user-gravatar-picture" src="" class="img-polaroid user-profile-picture">
+		    <span class="user-picture-label">Gravatar</span>
+   		    <i class='icon-ok'></i>
+	    </div>
+	    
+	    <div id="uploaded-box">
+		    <img id="user-uploaded-picture" src="" class="img-polaroid user-profile-picture">
+		    <span class="user-picture-label">Uploaded picture</span>
+		    <i class='icon-ok'></i>
+	    </div>
+	    
+	    <a id="uploadPictureBtn" href="#">Upload new picture</a>
+	    
+	  </div>
+	  <div class="modal-footer">
+	    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+	    <button id="savePictureChangesBtn" class="btn btn-primary">Save changes</button>
+	  </div>
+	</div>
+	
+
+	<!-- Upload picture modal-->
+	<div id="upload-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	  <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="/pictureupload" method="post" enctype="multipart/form-data">
+	    	<input id="userPhotoInput" type="file" name="userPhoto" >
+	    </form>
+	    
+	    <span id="status" />
+   	
+	  </div>
+	  <div class="modal-footer">
+	    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+	    <button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
+	  </div>
+	</div>
+
+
     <!-- BEGIN user -->
     
     <div class="account-username-box">
         <span class="account-username"><a href="/users/{user.username}">{user.username}</a></span>
         <span class="pull-right"><a href="/users/{user.username}/edit">edit</a></span>
     </div>
-    
-    
 
-    <div class="account-picture-block">
-        <img src="{user.picture}?s=128" />
+    <div class="account-picture-block text-center">
+        <img id="user-current-picture" class="user-profile-picture" src="{user.picture}" /><br/>
+        <a id="changePictureBtn" href="#">change picture</a>
     </div>
   
       
@@ -66,35 +119,187 @@
               
          </form>
     </div>
+    
+    <!-- how to pass data to the script ?? -->
+	<div id="user-data-picture" class="hide">{user.picture}</div>
+	<div id="user-data-gravatarpicture" class="hide">{user.gravatarpicture}</div>
+	<div id="user-data-uploadedpicture" class="hide">{user.uploadedpicture}</div>
+
+    
     <!-- END user -->
 
-
-
 </div>
+
+
+
 <script type="text/javascript">
-(function() {
+
+$(document).ready(function() {
+ 
+    $('#uploadForm').submit(function() {
+        status('uploading the file ...');
+ 
+        $(this).ajaxSubmit({
+ 
+			error: function(xhr) {
+				status('Error: ' + xhr.status);
+			},
+ 
+			success: function(response) {
+				if(response.error) {
+					status('Opps, something bad happened');
+					return;
+				}
+ 
+				var imageUrlOnServer = response.path;
+ 				
+ 				$('#user-current-picture').attr('src', imageUrlOnServer);
+ 				$('#user-uploaded-picture').attr('src', imageUrlOnServer);
+ 				
+				$('#user-data-uploadedpicture').html(imageUrlOnServer);        
+ 								
+	        	$('#upload-picture-modal').modal('hide');
+	        	
+				socket.emit('api:updateHeader', { fields: ['username', 'picture'] });
+				status('');
+            }
+		});
+
+		return false;
+    });
+ 
+    function status(message) {
+		$('#status').text(message);
+    }
+});
+
+
+(function() {	
+	
+	function submitUserData() {
+		var userData = {
+            uid:$('#inputUID').val(),
+            email:$('#inputEmail').val(),
+            fullname:$('#inputFullname').val(),
+            website:$('#inputWebsite').val(),
+            birthday:$('#inputBirthday').val(),
+            location:$('#inputLocation').val()
+        };
+            
+		$.post('/edituser',
+        	userData,
+            function(data) {
+
+			}                
+		);
+	}
+	
+	function changeUserPicture(type) { 
+		var userData = {
+            uid: $('#inputUID').val(),
+			type: type
+        };
+            
+		$.post('/changeuserpicture',
+        	userData,
+            function(data) {	
+       			socket.emit('api:updateHeader', { fields: ['username', 'picture'] });
+            }                
+		);
+	}
+	
+	
     $(document).ready(function(){
         
+		var selectedImageType = '';
+        
         $('#submitBtn').on('click',function(){
 
-            var userData = {
-                uid:$('#inputUID').val(),
-                email:$('#inputEmail').val(),
-                fullname:$('#inputFullname').val(),
-                website:$('#inputWebsite').val(),
-                birthday:$('#inputBirthday').val(),
-                location:$('#inputLocation').val()
-            };
-            
-            $.post('/edituser',
-                userData,
-                function(data) {
+           submitUserData();
 
-                }                
-            );
-            
         });
         
+        
+        function updateImages() {
+        	
+			var currentPicture = $('#user-current-picture').attr('src');
+        	var gravatarPicture = $('#user-data-gravatarpicture').html();        
+			var uploadedPicture = $('#user-data-uploadedpicture').html();        
+
+			if(gravatarPicture)
+	        	$('#user-gravatar-picture').attr('src', gravatarPicture);
+	        else
+	        	$('#user-gravatar-picture').addClass('hide');
+
+        	if(uploadedPicture)
+	        	$('#user-uploaded-picture').attr('src', uploadedPicture);
+	        else
+	        	$('#user-uploaded-picture').addClass('hide');
+	        	
+	        	
+	         if(currentPicture == gravatarPicture)
+		        $('#gravatar-box .icon-ok').show();
+			else
+		        $('#gravatar-box .icon-ok').hide();
+		        
+   	        if(currentPicture == uploadedPicture)
+		        $('#uploaded-box .icon-ok').show();
+			else
+		        $('#uploaded-box .icon-ok').hide();
+        }
+        
+        
+        $('#changePictureBtn').on('click', function() {
+			selectedImageType = '';
+			updateImages();
+        	
+        	$('#change-picture-modal').modal('show');
+        	
+        	return false;
+        });
+        
+        $('#gravatar-box').on('click', function(){
+    		$('#gravatar-box .icon-ok').show();
+	        $('#uploaded-box .icon-ok').hide();
+	        selectedImageType = 'gravatar';
+    	});
+    	
+    	$('#uploaded-box').on('click', function(){
+    		$('#gravatar-box .icon-ok').hide();
+	        $('#uploaded-box .icon-ok').show();
+	        selectedImageType = 'uploaded';
+    	});
+    	
+    	$('#savePictureChangesBtn').on('click', function() {
+        	$('#change-picture-modal').modal('hide');
+
+        	if(selectedImageType) {
+	        	changeUserPicture(selectedImageType);
+	        	
+	        	if(selectedImageType == 'gravatar')
+			        $('#user-current-picture').attr('src', $('#user-data-gravatarpicture').html());		
+				else if(selectedImageType == 'uploaded')
+			        $('#user-current-picture').attr('src', $('#user-data-uploadedpicture').html());						
+	        }
+        	
+    	});
+    	
+    	$('#upload-picture-modal').on('hide', function() {
+    		$('#userPhotoInput').val('');
+    	});
+    	
+    	$('#uploadPictureBtn').on('click', function(){
+    		
+        	$('#change-picture-modal').modal('hide');
+        	$('#upload-picture-modal').modal('show');
+        	
+        	$('#pictureUploadSubmitBtn').on('click', function() {
+    		    $('#uploadForm').submit();
+        	});
+        	
+        	return false;
+    	});
+        
     });
 }());
 </script>

public/templates/footer.tpl

@@ -46,24 +46,28 @@
 
 		socket.emit('api:updateHeader', { fields: ['username', 'picture'] });
 
-		socket.once('api:updateHeader', function(data) {
-			
+		socket.on('api:updateHeader', function(data) {
 			if (data.uid > 0) {
 				var	gravatar = document.createElement('img'),
 					name = document.createElement('span')
 					logoutEl = document.createElement('li');
+					
+				right_menu.innerHTML = '';
 
 				logoutEl.innerHTML = '<a href="/logout">Log out</a>';
 
 				name.innerHTML = data['username'];
 				gravatar.src = data['picture']+"?s=24";
+				
+				var userLink = $('<a id="user_label" href="/users/'+data['username']+'"></a>');
 
-
-                $('#user_label').attr('href','/users/'+data['username']);
-
-				user_label.innerHTML = '';
-				user_label.appendChild(gravatar);
-				user_label.appendChild(name);
+				userLink.append(gravatar);
+				userLink.append(name);
+				
+				var userLi = $('<li></li>');
+				userLi.append(userLink);
+				
+				$(right_menu).append(userLi);
 				right_menu.appendChild(logoutEl);
 			} else {
 				var registerEl = document.createElement('li'),

public/templates/header.tpl

@@ -12,6 +12,8 @@
 	<script type="text/javascript" src="/src/app.js"></script>
 	<script type="text/javascript" src="/src/templates.js"></script>
 	<script type="text/javascript" src="/src/ajaxify.js"></script>
+	<script type="text/javascript" src="/src/jquery.form.js"></script>
+
 	<link rel="stylesheet" type="text/css" href="/css/style.css" />
 </head>
 
@@ -39,7 +41,7 @@
 					</ul>
 					<ul class="nav pull-right" id="right-menu">
 						<!--<li><i class="icon-plus icon-2x" style="color:#999;"></i></li> fail. add this back later -->
-						<li><a href="/users" id="user_label"></a></li>
+						<!--<li><a href="/users" id="user_label"></a></li>-->
 					</ul>
 				</div>
 			</div>

src/user.js

@@ -252,6 +252,8 @@ var	config = require('../config.js'),
 
 			User.hashPassword(password, function(hash) {
 
+				var gravatar = User.createGravatarURLFromEmail(email);
+
 				RDB.hmset('user:'+uid, {
 					'username' : username,
 					'fullname': '',
@@ -261,7 +263,9 @@ var	config = require('../config.js'),
 					'email' : email,
 					'joindate' : new Date().getTime(),
 					'password' : hash,
-					'picture' : User.createGravatarURLFromEmail(email),
+					'picture': gravatar,
+					'gravatarpicture' : gravatar,
+					'uploadedpicture': '',
 					'reputation': 0,
 					'postcount': 0
 				});

src/webserver.js

@@ -9,6 +9,7 @@ var express = require('express'),
 	
 	user = require('./user.js'),
 	utils = require('./utils.js'),
+	fs = require('fs'),
 	admin = require('./routes/admin.js'),
 	auth = require('./routes/authentication.js');
 
@@ -199,6 +200,82 @@ var express = require('express'),
 
 // TODO move user related logic into another file vvvvvvvvvvvvvvvvvvvv
 
+	app.post('/pictureupload', function(req, res) {
+    	
+		if(!req.user)
+			return res.redirect('/403');
+		
+		user.getUserField(req.user.uid, 'uploadedpicture', function(uploadedpicture) {
+			
+			var index = uploadedpicture.lastIndexOf('/');
+			var filename = uploadedpicture.substr(index+1);
+
+			var absolutePath = global.configuration['ROOT_DIRECTORY'] + config.upload_path + filename;
+
+			fs.unlink(absolutePath, function(err) {
+				if(err) {				
+					console.log(err);
+				}
+				
+				uploadUserPicture(req.user.uid, req.files.userPhoto.name, req.files.userPhoto.path, res);
+				
+			});
+			
+		});
+
+	});
+	
+	function uploadUserPicture(uid, filename, tempPath, res) {
+		var uploadPath = config['upload_path'] + uid + '-' + filename;
+
+		fs.rename(
+			tempPath,
+			global.configuration['ROOT_DIRECTORY']+ uploadPath,
+			function(error) {
+	            if(error) {
+					res.send({
+	                    error: 'Ah crap! Something bad happened'
+					});
+	                return;
+	            }
+	 			
+	 			var imageUrl = config.base_url + config.install_path + uploadPath;
+	 			
+	            res.send({
+					path: imageUrl
+	            });
+	            
+	            user.setUserField(uid, 'uploadedpicture', imageUrl);
+	            user.setUserField(uid, 'picture', imageUrl);
+	            
+			}
+    	);
+		
+	}
+	
+
+	app.post('/changeuserpicture', function(req, res){
+		if(!req.user)
+			return res.redirect('/403');
+		
+		if(req.user.uid != req.body.uid)
+			return res.redirect('/');
+			
+		var type = req.body.type;
+		if(type == 'gravatar') {	
+			user.getUserField(req.user.uid, 'gravatarpicture', function(gravatar){
+				user.setUserField(req.user.uid, 'picture', gravatar);
+			});
+		}
+		else if(type == 'uploaded') {
+			user.getUserField(req.user.uid, 'uploadedpicture', function(uploadedpicture){
+				user.setUserField(req.user.uid, 'picture', uploadedpicture);
+			});
+		}
+		res.send({});
+	});
+
+
 	app.post('/edituser', function(req, res){
 
 		if(!req.user)