Index: lams_central/src/java/org/lamsfoundation/lams/web/PortraitSaveAction.java
===================================================================
diff -u -r9832d1f0f1e57a22b92883c0a89d03b77e84ec8b -rba7ef9fb0209892892930cb3583066b70880b08b
--- lams_central/src/java/org/lamsfoundation/lams/web/PortraitSaveAction.java	(.../PortraitSaveAction.java)	(revision 9832d1f0f1e57a22b92883c0a89d03b77e84ec8b)
+++ lams_central/src/java/org/lamsfoundation/lams/web/PortraitSaveAction.java	(.../PortraitSaveAction.java)	(revision ba7ef9fb0209892892930cb3583066b70880b08b)
@@ -105,22 +105,16 @@
 	    
 	    //Create nice file name. If file name equals to "blob" - it means it was uploaded using webcam
 	    String fileNameWithoutExt;
-	    boolean isUploadedFromWebcam = false;
 	    if (fileName.equals("blob")) {
 		HttpSession ss = SessionManager.getSession();
 		UserDTO userDTO = (UserDTO) ss.getAttribute(AttributeNames.USER);
 		fileNameWithoutExt = userDTO.getLogin() + "_portrait";
-		isUploadedFromWebcam = true;
 
 	    } else {
 		fileNameWithoutExt = fileName.substring(0, fileName.indexOf('.'));
 	    }
 
 	    // upload to the content repository
-	    if (!isUploadedFromWebcam) {
-		//resize
-		is = ResizePictureUtil.resize(file.getInputStream(), LARGEST_DIMENSION_ORIGINAL);
-	    }
 	    originalFileNode = getCentralToolContentHandler().uploadFile(is, fileNameWithoutExt + "_original.png",
 		    "image/png");
 	    is.close();
Index: lams_central/web/includes/javascript/webrtc-capturestill.js
===================================================================
diff -u -r4e48bcd112ec0b3f9ff808e3c9378a6d556f693e -rba7ef9fb0209892892930cb3583066b70880b08b
--- lams_central/web/includes/javascript/webrtc-capturestill.js	(.../webrtc-capturestill.js)	(revision 4e48bcd112ec0b3f9ff808e3c9378a6d556f693e)
+++ lams_central/web/includes/javascript/webrtc-capturestill.js	(.../webrtc-capturestill.js)	(revision ba7ef9fb0209892892930cb3583066b70880b08b)
@@ -6,7 +6,7 @@
   // width to the value defined here, but the height will be
   // calculated based on the aspect ratio of the input stream.
 
-  var width = 460;    // We will scale the photo width to this
+  var width = 0;    // We will scale the photo width to this
   var height = 0;     // This will be computed based on the input stream
 
   // |streaming| indicates whether or not we're currently streaming
@@ -21,7 +21,7 @@
   var canvas = null;
   var photo = null;
   var startbutton = null;
-  //*LAMS* var added by LAMS. It will hold a URL representing the webcamera picture. It get created by URL.createObjectURL() method.
+  //*LAMS* var added by LAMS. It will hold a URL representing the webcamera picture. It gets created by URL.createObjectURL() method.
   var objectURL;
 
   function startup() {
@@ -64,7 +64,16 @@
 
     video.addEventListener('canplay', function(ev){
       if (!streaming) {
-        height = video.videoHeight / (video.videoWidth/width);
+    	  	//*LAMS* modified by LAMS
+    	  	var videoHeight = video.videoHeight;
+    	  	var videoWidth = video.videoWidth;
+    	  	if (videoWidth > videoHeight) {
+    	  		height = PORTRAIT_SIZE;
+    	  		width =  (videoWidth*height)/videoHeight;
+    	  	} else {
+    	  		width = PORTRAIT_SIZE;
+    	  		height = (videoHeight*width)/videoWidth;   	  		
+    	  	}  
       
         // Firefox currently has a bug where the height can't be read from
         // the video, so we will make assumptions if this happens.
@@ -112,13 +121,27 @@
       
       //*LAMS* added by LAMS. Creates a Blob object representing the image contained in the canvas. Which we then display in photo img.
       canvas.toBlob(function(blob) {
-    	$("#still-portrait").show();
-    	$('html, body').animate({
+    	  	$("#still-portrait").show();
+    	  	$('html, body').animate({
             scrollTop: $("#still-portrait").offset().top
         }, 2000);
-    	
+
+    	  	//create object URL
         objectURL = URL.createObjectURL(blob);
-        photo.src = objectURL;
+        
+        //display croppie
+        if (!croppieWidget) {
+	  	  	croppieWidget = $('#photo').croppie({
+	  	  	    viewport: {
+	  	  	        width: PORTRAIT_SIZE,
+	  	  	        height: PORTRAIT_SIZE
+	  	  	    },
+	  	  	    boundary: { width: width, height: height },
+	  	  	});
+        }
+  	  	croppieWidget.croppie('bind', {
+  	  	    url: objectURL
+  	  	});
       });
       
       //*LAMS* commented out by LAMS
Index: lams_central/web/portrait.jsp
===================================================================
diff -u -r507ebdec972f001e5740565a0a7da8196f994234 -rba7ef9fb0209892892930cb3583066b70880b08b
--- lams_central/web/portrait.jsp	(.../portrait.jsp)	(revision 507ebdec972f001e5740565a0a7da8196f994234)
+++ lams_central/web/portrait.jsp	(.../portrait.jsp)	(revision ba7ef9fb0209892892930cb3583066b70880b08b)
@@ -11,6 +11,7 @@
 <lams:html>
 <lams:head>
 	<lams:css/>
+	<link rel="stylesheet" href="css/croppie.css" />
 	<style type="text/css">
 		#accordion h3 a {
 			border-bottom: 0;
@@ -26,8 +27,8 @@
 			margin-bottom: 0xp;
 		}
 		
-		#canvas, #still-portrait {
-		  display:none;
+		#canvas, #still-portrait, #upload-croppie, #save-upload-button {
+			display:none;
 		}
 	</style>
 
@@ -38,7 +39,14 @@
 	<script type="text/javascript" src="includes/javascript/jquery.blockUI.js"></script>
 	<script type="text/javascript" src="includes/javascript/webrtc-capturestill.js"></script>
 	<script type="text/javascript">
-	
+		//constant for croppie.js
+		var PORTRAIT_SIZE = 400;
+	</script>
+	<script type="text/javascript" src="includes/javascript/croppie.js"></script>
+	<script type="text/javascript">
+		//variable defined in croppie.js
+		var croppieWidget;
+		
 		jQuery(document).ready(function() {
 			//handler for upload-webcam button
 			$('#upload-webcam').click(function() {
@@ -47,15 +55,50 @@
 				});
 				
 				//Creates a Blob object representing the image contained in the canvas. Which we then upload to the server.
-			    canvas.toBlob(function(blob) {
-			    	var formData = new FormData();
+				croppieWidget.croppie('result', 'blob').then(function(blob) {
+					var formData = new FormData();
 					formData.append("file", blob);
 					uploadProtraitToServerSide(formData);
-			    }, 'image/png');		
+				});	
 			});
 
 			//update dialog's height and title
 			updateMyProfileDialogSettings('<fmt:message key="title.portrait.change.screen" />', '740');
+
+			//init croppie widget on Upload tab
+			var $uploadCroppie = $('#upload-croppie').croppie({
+	  	  	    viewport: {
+	  	  	        width: PORTRAIT_SIZE,
+	  	  	        height: PORTRAIT_SIZE
+	  	  	    },
+	  	  		enforceBoundary: false,
+	  	  	    boundary: { width: 500, height: 500 }
+			});
+
+			$('#upload-input').on('change', function () { 
+				//readFile
+	 			if (this.files && this.files[0]) {
+		            var reader = new FileReader();
+		            
+		            reader.onload = function (e) {
+						$('#save-upload-button, #upload-croppie').show();
+		            		$uploadCroppie.croppie('bind', {
+		            			url: e.target.result
+		            		});
+		            }
+		            
+		            reader.readAsDataURL(this.files[0]);
+		        } else {
+			        alert("Sorry - you're browser doesn't support the FileReader API");
+			    }
+			});
+			$('#save-upload-button').on('click', function (ev) {
+				$uploadCroppie.croppie('result', 'blob').then(function(blob) {
+					var formData = new FormData();
+					formData.append("file", blob);
+					uploadProtraitToServerSide(formData);
+				});
+			});
 		});
 
 		function uploadPortraitFile() {
@@ -76,6 +119,7 @@
 				}
 			});
 		}
+
 	</script>
 </lams:head>
 
@@ -109,8 +153,8 @@
 			    	<div class="panel-title">
 			        	<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" 
 			        			aria-expanded="true" aria-controls="collapseOne">
-			          		<i class="fa fa-fw fa-camera text-primary"></i> 
-			          		<fmt:message key="label.portrait.take.snapshot.from.webcamera" />
+			          	<i class="fa fa-fw fa-camera text-primary"></i> 
+			          	<fmt:message key="label.portrait.take.snapshot.from.webcamera" />
 			        	</a>
 			    	</div>
 			    </div>
@@ -120,20 +164,18 @@
 			      			
 						<div>
 						    <video id="video">
-						    	<fmt:message key="label.video.stream.not.available" />
+						    		<fmt:message key="label.video.stream.not.available" />
 						    </video>
 						</div>
 						    
-						<a id="startbutton" class="btn btn-sm btn-file btn-default voffset5" role="button"
-								href="#nogo">
+						<a id="startbutton" class="btn btn-sm btn-file btn-default voffset5" role="button" href="#nogo">
 							<fmt:message key='label.portrait.take.snapshot' />
 						</a>
 						
 						<canvas id="canvas"></canvas>
-						
 						<div id="still-portrait">
 							<div class="output voffset10">
-								<img id="photo" alt="<fmt:message key='label.screen.capture.will.appear.in.this.box' />"> 
+								<div id="photo" ></div> 
 							</div>
 							
 							<a class="btn btn-sm btn-default voffset10" id="upload-webcam">
@@ -146,28 +188,33 @@
 			
 			<!-- Upload -->
 			<div class="panel panel-default">
-			    <div class="panel-heading" role="tab" id="headingTwo">
-			      <div class="panel-title">
-			        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-			         <i class="fa fa-fw fa-upload text-primary"></i> <fmt:message key="label.portrait.upload" />
-			        </a>
-			      </div>
-			    </div>
+				<div class="panel-heading" role="tab" id="headingTwo">
+					<div class="panel-title">
+			        		<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" 
+			        				aria-expanded="false" aria-controls="collapseTwo">
+			        			<i class="fa fa-fw fa-upload text-primary"></i> 
+			        			<fmt:message key="label.portrait.upload" />
+			        		</a>
+					</div>
+				</div>
 			    
 			    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
-			    	<div class="panel-body">
+			    		<div class="panel-body">
 						<div class="form-group">
 							<label class="btn btn-default">
-								<html:file property="file" />
+								<input type="file" name="file" value="" id="upload-input" accept="image/*">
 							</label>
-							<a class="btn btn-sm btn-default offset5" onclick="uploadPortraitFile()" role="button">
-								<fmt:message key="button.save" />
-							</a>
+							
 							<p class="help-block">
 								<fmt:message key="msg.portrait.resized" />
-							</p>								
+							</p>	
+							<div id="upload-croppie"></div>
+							
+							<a class="btn btn-sm btn-default offset5" id="save-upload-button" role="button">
+								<fmt:message key='label.portrait.yes.set.it.as.portrait' />
+							</a>
 						</div>
-			    	</div>
+			    		</div>
 			    </div>
 			</div>
 		</div>