Index: lams_tool_images/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r0c0c05bbcad9cb7918b6c3309244ae99d5a5b207 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 0c0c05bbcad9cb7918b6c3309244ae99d5a5b207)
+++ lams_tool_images/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -169,5 +169,6 @@
 label.image.options=Image Options
 label.activity.completion=End of Activity
 label.posted.by  ={0} on {1}
+errors.maxfilesize = Image exceeds the max file size
 
 #======= End labels: Exported 161 labels for en AU =====
Index: lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java
===================================================================
diff -u -r3399163940c61c9132223c758d274486e57ff9b7 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	(.../LearningAction.java)	(revision 3399163940c61c9132223c758d274486e57ff9b7)
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	(.../LearningAction.java)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -814,21 +814,21 @@
     private List<FormFile> createFileListFromMultipleForm(MultipleImagesForm multipleForm) {
 
 	List<FormFile> fileList = new ArrayList<FormFile>();
-	if (!StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
+	if (multipleForm.getFile1() != null && !StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
 	    fileList.add(multipleForm.getFile1());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
+	if (multipleForm.getFile2() != null && !StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
 	    fileList.add(multipleForm.getFile2());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
+	if (multipleForm.getFile3() != null && !StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
 	    fileList.add(multipleForm.getFile3());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
+	if (multipleForm.getFile4() != null && !StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
 	    fileList.add(multipleForm.getFile4());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
+	if (multipleForm.getFile5() != null && !StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
 	    fileList.add(multipleForm.getFile5());
-	}
+	}	
 
 	return fileList;
     }
Index: lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/MonitoringAction.java
===================================================================
diff -u -r3399163940c61c9132223c758d274486e57ff9b7 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/MonitoringAction.java	(.../MonitoringAction.java)	(revision 3399163940c61c9132223c758d274486e57ff9b7)
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/MonitoringAction.java	(.../MonitoringAction.java)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -580,21 +580,21 @@
     private List<FormFile> createFileListFromMultipleForm(MultipleImagesForm multipleForm) {
 
 	List<FormFile> fileList = new ArrayList<FormFile>();
-	if (!StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
+	if (multipleForm.getFile1() != null && !StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
 	    fileList.add(multipleForm.getFile1());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
+	if (multipleForm.getFile2() != null && !StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
 	    fileList.add(multipleForm.getFile2());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
+	if (multipleForm.getFile3() != null && !StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
 	    fileList.add(multipleForm.getFile3());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
+	if (multipleForm.getFile4() != null && !StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
 	    fileList.add(multipleForm.getFile4());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
+	if (multipleForm.getFile5() != null && !StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
 	    fileList.add(multipleForm.getFile5());
-	}
+	}	
 
 	return fileList;
     }
Index: lams_tool_images/web/includes/javascript/imageGallerycommon.js
===================================================================
diff -u -rf4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/includes/javascript/imageGallerycommon.js	(.../imageGallerycommon.js)	(revision f4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8)
+++ lams_tool_images/web/includes/javascript/imageGallerycommon.js	(.../imageGallerycommon.js)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -6,6 +6,7 @@
 	$("#new-image-input-area").load(url, function() {
 		$(this).show();
 		$("#saveCancelButtons").hide();
+		$('#file-title').focus();		
 	});
 }
 	
Index: lams_tool_images/web/includes/javascript/imageGalleryitem.js
===================================================================
diff -u -rf4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision f4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8)
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -54,18 +54,19 @@
 		if (file.name.length < 1) {
 			alert("file.name.length < 1");
 			return;
-		} else if (file.size > UPLOAD_FILE_LARGE_MAX_SIZE) {
-			alert(LABEL_MAX_FILE_SIZE);
-			return;
 		} else if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
 			alert(LABEL_NOT_ALLOWED_FORMAT);
 			return;
+		} else if (file.size > UPLOAD_FILE_LARGE_MAX_SIZE) {
+			alert(LABEL_MAX_FILE_SIZE);
+			return;
 		}
 
 		// Add the file to the request.
 		formData.append('file', file, file.name);
 		$('#uploadButtons').hide();
 		$('#itemAttachmentArea_Busy').show();
+		
 	}
 
 	$.ajax({
@@ -75,9 +76,11 @@
         processData: false,
         contentType: false,
     	success: function(data) {
-    		$('#new-image-input-area').html(data);
+   			$('#new-image-input-area').html(data);
     	},
     	error: function(jqXHR, textStatus, errorMessage) {
+    		$('#uploadButtons').show();
+    		$('#itemAttachmentArea_Busy').hide();    		
         	alert(errorMessage);
     	}
 	});
@@ -152,7 +155,9 @@
     		$('#new-image-input-area').html(data);
     	},
     	error: function(jqXHR, textStatus, errorMessage) {
-        	alert(errorMessage);
+    		$('#uploadButtons').show();
+    		$('#itemAttachmentArea_Busy').hide();            	
+    		alert(errorMessage);
     	}
 	});
 } 
Index: lams_tool_images/web/pages/authoring/parts/addimage.jsp
===================================================================
diff -u -rf4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision f4d9fb8cc51c25fecdd0eac1dcf5f5efc916cdf8)
+++ lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -17,6 +17,7 @@
 				</div>
 			</div>
 		</div>
+
 			
 		<div class="panel-body">
 			<%@ include file="/common/messages.jsp"%>
Index: lams_tool_images/web/pages/authoring/parts/imagefile.jsp
===================================================================
diff -u -r5f7cdba78b6fde3914f078d77c1131bf742c0111 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision 5f7cdba78b6fde3914f078d77c1131bf742c0111)
+++ lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -38,7 +38,7 @@
 					<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
 				</button>
 			</span>
-			<input type="file" id="fileSelector" name="file" multiple style="display:none"> 
+			<input type="file" id="fileSelector" name="file" style="display:none"> 
 			<input type="text" id="fileInputName" style="display:none" disabled="disabled" placeholder="File not selected" class="form-control input-sm">
 		</div>
 				
Index: lams_tool_images/web/pages/learning/learning.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -163,7 +163,8 @@
 					sessionMapID: "${sessionMapID}"
 				}
 			);
-		}  
+		}
+				
     </script>
    
 </lams:head>
Index: lams_tool_images/web/pages/learning/parts/addimage.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -1,17 +1,85 @@
-<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
+<!DOCTYPE html>
 
 <lams:html>
 	<lams:head>
 		<title>
 			<fmt:message key="label.learning.title" />
 		</title>
 		<%@ include file="/common/header.jsp"%>
-		
+					
 		<script type="text/javascript">
 			$(document).ready(function(){ 
-				document.getElementById("image-title").focus();
+				document.getElementById("imageTitle").focus();
+				
 			});
+			
+			function submitImage(){
+
+				var UPLOAD_FILE_MAX_SIZE = ${UPLOAD_FILE_MAX_SIZE};
+				var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
+				var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"/>';
+				var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';	
+				
+				if ( typeof CKEDITOR !== 'undefined' ) {
+					for ( instance in CKEDITOR.instances ) {
+						CKEDITOR.instances[instance].updateElement();
+					}
+				}
+
+				var formData = new FormData();
+				$.each($('#imageGalleryItemForm').serializeArray(), function(i, field) {
+					formData.append(field.name, field.value);
+				});
+				
+				// validate uploading file if we add it for the first time
+				if (!eval($("#has-file").val())) {
+					var fileSelect = document.getElementById('file');
+					// Get the selected files from the input.
+					var files = fileSelect.files;
+					
+					if (files.length == 0) {
+						alert(LABEL_ITEM_BLANK);
+						return;
+					}
+					var file = files[0];
+
+				    // Check the file type.
+					if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+						alert(LABEL_NOT_ALLOWED_FORMAT);
+						return;
+					} else if (file.size > UPLOAD_FILE_MAX_SIZE) {
+						alert(LABEL_MAX_FILE_SIZE + ' ' + (UPLOAD_FILE_MAX_SIZE/1024/1000) + 'MBs');
+						return;
+					}
+
+					// Add the file to the request.
+					formData.append('file', file, file.name);
+					$('#uploadButtons').hide();
+					$('#itemAttachmentArea_Busy').show();
+					
+				}
+
+				$.ajax({
+			    	type: 'POST',
+			    	url: $("#imageGalleryItemForm").attr('action'),
+			    	data: formData,
+			        processData: false,
+			        contentType: false,
+			    	success: function(data) {
+			   				self.parent.checkNew();
+			    	},
+			    	error: function(jqXHR, textStatus, errorMessage) {
+								$('#uploadButtons').show();
+								$('#itemAttachmentArea_Busy').hide();
+			        	alert(errorMessage);
+			    	}
+				});
+			} 		
+				
 		</script>
 	</lams:head>
 	
@@ -20,6 +88,11 @@
 		<div class="panel-heading">
 			<div class="panel-title">
 				<fmt:message key="label.authoring.basic.add.image" />
+					<a href="<html:rewrite page='/learning/initMultipleImages.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=500&modal=true" 
+							class="thickbox btn btn-default pull-right btn-xs">  
+						<fmt:message key="label.authoring.basic.upload.multiple.images" />
+					</a>
+				
 			</div>
 		</div>
 			
@@ -34,36 +107,53 @@
 				    <label for="image-title">
 				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
 				    </label>
-				    <html:text property="title" styleClass="form-control" styleId="image-title" tabindex="1"/>
+				    <html:text property="title" styleClass="form-control" styleId="imageTitle" tabindex="1"/>
 				</div>
 		
 				<div class="form-group">
 					<label for="description">
 						<fmt:message key="label.authoring.basic.resource.description.input" />
 					</label>
-					<lams:STRUTS-textarea rows="5" tabindex="4" styleClass="text-area form-control" property="description" />
+					<lams:STRUTS-textarea rows="5" tabindex="2" styleClass="text-area form-control" property="description" />
 				</div>
 	
-				<div class="form-group">
-				    <label for="file">
-				    	<fmt:message key="label.authoring.basic.resource.file.input"/>
-				    </label>
-					<input type="file" name="file" />
+				<div class="input-group">
+				    <span class="input-group-btn">
+							<button id="fileButtonBrowse" tabindex="3" type="button" class="btn btn-sm btn-default">
+							<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+						</button>
+					</span>
+					<input type="file" id="file" name="file" multiple style="display:none"> 
+					<input type="text" id="fileInputName" style="display:none" disabled="disabled" placeholder="File not selected" class="form-control input-sm">
 				</div>
-				
-				<a href="<html:rewrite page='/learning/initMultipleImages.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=500&modal=true" 
-						class="thickbox btn btn-default btn-xs">  
-					<fmt:message key="label.authoring.basic.upload.multiple.images" />
-				</a>
+						
+				<script type="text/javascript">
+					// Fake file upload
+					document.getElementById('fileButtonBrowse').addEventListener('click', function() {
+						document.getElementById('file').click();
+					});
+					
+					document.getElementById('file').addEventListener('change', function() {
+						$('#fileInputName').show();
+						document.getElementById('fileInputName').value = this.value.replace(/^.*\\/, "");
+						
+					});
+				</script>  
+										
 			</html:form>
+
+			<div class="panel-body text-center" style="display:none" id="itemAttachmentArea_Busy">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary"></i>
+			</div>
+
 			
-			<div class="voffset10 pull-right">
-				<a href="#nogo" onclick="document.imageGalleryItemForm.submit();" class="btn btn-default btn-sm button-add-item">
-					<fmt:message key="label.authoring.basic.add.image" /> 
-				</a>
-				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
+			<div id="uploadButtons" class="voffset10 pull-right">
+				<a href="#nogo" tabindex="4" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
+				<a href="#nogo" tabindex="5" onclick="javascript:submitImage();" class="btn btn-default btn-sm button-add-item">
+					<fmt:message key="label.authoring.basic.add.image" /> 
+				</a>
 			</div>
 	
 		<div id="footer"></div>
Index: lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -1,12 +1,92 @@
-<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
+<!DOCTYPE html>
 <lams:html>
 	<lams:head>
 		<title>
 			<fmt:message key="label.learning.title" />
 		</title>
 		<%@ include file="/common/header.jsp"%>
+		<script type="text/javascript">
+			
+			function submitMultipleImages(){
+				
+				var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
+				var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"/>';
+				var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';	
+				
+				var formData = new FormData();
+				formData.append('sessionMapID', $("#sessionMapID").val());
+				
+				// Get selected files from the inputs
+				var validateFiles = [];
+				if ($('#file1').val()) { 
+					var file = document.getElementById('file1').files[0];
+					validateFiles.push(file);
+					formData.append('file1', file, file.name);
+				}
+				if ($('#file2').val()) { 
+					var file = document.getElementById('file2').files[0];
+					validateFiles.push(file);
+					formData.append('file2', file, file.name);
+				}
+				if ($('#file3').val()) { 
+					var file = document.getElementById('file3').files[0];
+					validateFiles.push(file);
+					formData.append('file3', file, file.name);
+				}
+				if ($('#file4').val()) {
+					var file = document.getElementById('file4').files[0];
+					validateFiles.push(file);
+					formData.append('file4', file, file.name);
+				}
+				if ($('#file5').val()) { 
+					var file = document.getElementById('file5').files[0];
+					validateFiles.push(file);
+					formData.append('file5', file, file.name);
+				}
+					
+				// validate files 
+				if (validateFiles.length == 0) {
+					alert(LABEL_ITEM_BLANK);
+					return;
+				}
+				for (var i = 0; i < validateFiles.length; i++) {
+					  var file = validateFiles[i];
+			
+					  // Check the file type.
+					  if (file.size > ${UPLOAD_FILE_MAX_SIZE}) {
+						  alert(LABEL_MAX_FILE_SIZE + ' ' + (UPLOAD_FILE_MAX_SIZE/1024/1000) + ' MBs');
+						  return;
+					  } else if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+						  alert(LABEL_NOT_ALLOWED_FORMAT);
+						  return;
+					  }
+			
+					  // Add the file to the request.
+				}
+				
+				$('#uploadButtons').hide();
+				$('#itemAttachmentArea_Busy').show();
+			
+			
+				$.ajax({
+			    	type: 'POST',
+			    	url: $("#multipleImagesForm").attr('action'),
+			    	data: formData,
+			        processData: false,
+			        contentType: false,
+			    	success: function(data) {
+			    		self.parent.checkNew();
+			    	},
+			    	error: function(jqXHR, textStatus, errorMessage) {
+			        	alert(errorMessage);
+			    	}
+				});
+			} 
+		</script>		
 	</lams:head>
 	
 <body class="stripes">
@@ -15,6 +95,10 @@
 		<div class="panel-heading">
 			<div class="panel-title">
 				<fmt:message key="label.authoring.basic.add.multiple.images" />
+				<a href="<html:rewrite page='/learning/newImageInit.do'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
+						class="thickbox btn btn-default pull-right btn-xs">  
+					<fmt:message key="label.authoring.basic.upload.single.image" />
+				</a>				
 			</div>
 		</div>
 			
@@ -23,45 +107,141 @@
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/learning/saveMultipleImages" method="post" styleId="multipleImagesForm" enctype="multipart/form-data">
-				<html:hidden property="sessionMapID" />
+				<html:hidden property="sessionMapID" styleId="sessionMapID"/>
 	
 				<div class="form-group">
 					<label>
 						<fmt:message key="label.authoring.basic.resource.files.input" />
 					</label>
 					
 					<div>
-						<input type="file" name="file1" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file2" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file3" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file4" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file5" />
-					</div>
+						<div class="input-group">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse1" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file1" name="file1" style="display:none"> 
+							<input type="text" id="fileInputName1" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse1').addEventListener('click', function() {
+								document.getElementById('file1').click();
+							});
+							
+							document.getElementById('file1').addEventListener('change', function() {
+								$('#fileInputName1').show();
+								document.getElementById('fileInputName1').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+				
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse2" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file2" name="file2" style="display:none"> 
+							<input type="text" id="fileInputName2" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse2').addEventListener('click', function() {
+								document.getElementById('file2').click();
+							});
+							
+							document.getElementById('file2').addEventListener('change', function() {
+								$('#fileInputName2').show();
+								document.getElementById('fileInputName2').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+									
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse3" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file3" name="file3" style="display:none"> 
+							<input type="text" id="fileInputName3" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse3').addEventListener('click', function() {
+								document.getElementById('file3').click();
+							});
+							
+							document.getElementById('file3').addEventListener('change', function() {
+								$('#fileInputName3').show();
+								document.getElementById('fileInputName3').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+						
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse4" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file4" name="file4" style="display:none"> 
+							<input type="text" id="fileInputName4" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse4').addEventListener('click', function() {
+								document.getElementById('file4').click();
+							});
+							
+							document.getElementById('file4').addEventListener('change', function() {
+								$('#fileInputName4').show();
+								document.getElementById('fileInputName4').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+						
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse5" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file5" name="file5" style="display:none"> 
+							<input type="text" id="fileInputName5" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse5').addEventListener('click', function() {
+								document.getElementById('file5').click();
+							});
+							
+							document.getElementById('file5').addEventListener('change', function() {
+								$('#fileInputName5').show();
+								document.getElementById('fileInputName5').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>
 				</div>
 				
-				<a href="<html:rewrite page='/learning/newImageInit.do'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
-						class="thickbox btn btn-default btn-xs">  
-					<fmt:message key="label.authoring.basic.upload.single.image" />
-				</a>
-				
 			</html:form>
+			
+			<div class="panel-body text-center" style="display:none" id="itemAttachmentArea_Busy">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary"></i>
+			</div>			
 	
-			<div class="voffset10 pull-right">
-				<a href="#nogo" onclick="javascript:document.multipleImagesForm.submit();" class="btn btn-default button-add-item">
-					<fmt:message key="label.authoring.basic.add.images" /> 
-				</a>
-				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
-					<fmt:message key="label.cancel" /> 
-				</a>
-			</div>
+			<div id="uploadButtons">
+				<div class="voffset10 pull-right">
+					<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
+						<fmt:message key="label.cancel" /> 
+					</a>
+					<a href="#nogo" onclick="javascript:submitMultipleImages();" class="btn btn-default button-add-item">
+						<fmt:message key="label.authoring.basic.add.images" /> 
+					</a>
+				</div>
+			</div>	
 	
 		<div id="footer"></div>
 		<!--closes footer-->
Index: lams_tool_images/web/pages/learning/parts/commentsarea.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -96,27 +96,25 @@
 			
 			<%--"Check for new", "Add new image" and "Delete" buttons---------------%>
 				
-			<c:if test="${imageGallery.allowShareImages}">
-			
-				<a href="#nogo" onclick="return checkNew()" class="btn btn-default" id="check-for-new-button"> 
-					<fmt:message key="label.check.for.new" /> 
-				</a>
-							
-				<c:if test="${not finishedLock}">
-					<br>
-					<a href="<html:rewrite page='/learning/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
-							class="btn btn-default voffset10 thickbox" id="add-new-image-button">  
-						<fmt:message key="label.learning.add.new.image" />
-					</a>
+			<div class="btn-group" role="group">	
+				<c:if test="${imageGallery.allowShareImages}">
+					<button href="#nogo" onclick="return checkNew()" class="btn btn-sm btn-default" id="check-for-new-button"> 
+						<i class="fa fa-refresh"></i> <fmt:message key="label.check.for.new" /> 
+					</button>
+								
+					<c:if test="${not finishedLock}">
+						<a href="<html:rewrite page='/learning/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
+								class="btn btn-default btn-sm thickbox" id="add-new-image-button">  
+							<i class="fa fa-upload"></i> <fmt:message key="label.learning.add.new.image" />
+						</a>
+					</c:if>
+					
+					<c:if test="${sessionMap.isAuthor}">
+						<button href="#nogo" onclick="return deleteImage(${sessionMap.currentImage.uid});" class="btn btn-default btn-sm" id="delete-button"> 
+							<i class="fa fa-trash"></i> <fmt:message key="label.learning.delete.image" /> 
+						</button>
+					</c:if>
 				</c:if>
-				
-				<c:if test="${sessionMap.isAuthor}">
-					<br>
-					<a href="#nogo" onclick="return deleteImage(${sessionMap.currentImage.uid});" class="btn btn-default voffset10" id="delete-button"> 
-						<fmt:message key="label.learning.delete.image" /> 
-					</a>
-				</c:if>
-			</c:if>
-		
+			</div>
 	</div>
 </c:if>
Index: lams_tool_images/web/pages/monitoring/imagesummary.jsp
===================================================================
diff -u -raaf77d979eda13d8e6947b82857bbeda7c62be3f -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision aaf77d979eda13d8e6947b82857bbeda7c62be3f)
+++ lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -134,12 +134,12 @@
 			<br>
 			
 			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default roffset5">
+					<fmt:message key="label.cancel" /> 
+				</a>
 				<a href="#nogo" onclick="javascript:document.imageGalleryItemForm.submit();" class="btn btn-default">
 					<fmt:message key="label.monitoring.imagesummary.save" /> 
 				</a>
-				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
-					<fmt:message key="label.cancel" /> 
-				</a>
 			</div>
 		</div>
 	
Index: lams_tool_images/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -75,6 +75,12 @@
 				launchPopup(myUrl,"MonitoringReview");
 			}
 			
+			function checkNew(){
+				var monitorURL = window.location.href;
+				document.location.href = monitorURL;
+	 		    return false;
+			}			
+			
 			$(document).ready(function(){
 
 				$(".tablesorter").tablesorter({
Index: lams_tool_images/web/pages/monitoring/parts/addimage.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/monitoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/monitoring/parts/addimage.jsp	(.../addimage.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -1,65 +1,161 @@
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="UPLOAD_FILE_LARGE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_LARGE_MAX_SIZE)%></c:set>
 
 <lams:html>
 <lams:head>
 	<title>
 		<fmt:message key="label.learning.title" />
 	</title>
 	<%@ include file="/common/header.jsp"%>
+		<script type="text/javascript">
+			$(document).ready(function(){ 
+				document.getElementById("imageTitle").focus();
+				
+			});
+			
+			function submitImage(){
+
+				var UPLOAD_FILE_LARGE_MAX_SIZE = ${UPLOAD_FILE_LARGE_MAX_SIZE};
+				var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
+				var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"/>';
+				var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';
+				
+				
+				if ( typeof CKEDITOR !== 'undefined' ) {
+					for ( instance in CKEDITOR.instances ) {
+						CKEDITOR.instances[instance].updateElement();
+					}
+				}
+
+				var formData = new FormData();
+				$.each($('#imageGalleryItemForm').serializeArray(), function(i, field) {
+					formData.append(field.name, field.value);
+				});
+				
+				// validate uploading file if we add it for the first time
+				if (!eval($("#has-file").val())) {
+					var fileSelect = document.getElementById('file');
+					// Get the selected files from the input.
+					var files = fileSelect.files;
+					
+					if (files.length == 0) {
+						alert(LABEL_ITEM_BLANK);
+						return;
+					}
+					var file = files[0];
+
+				    // Check the file type.
+					if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+						alert(LABEL_NOT_ALLOWED_FORMAT);
+						return;
+					} else if (file.size > UPLOAD_FILE_LARGE_MAX_SIZE) {
+						alert(LABEL_MAX_FILE_SIZE + ' ' + (UPLOAD_FILE_LARGE_MAX_SIZE/1024/1000) + ' MBs');
+						return;
+					}
+
+					// Add the file to the request.
+					formData.append('file', file, file.name);
+					$('#uploadButtons').hide();
+					$('#itemAttachmentArea_Busy').show();
+					
+				}
+
+				$.ajax({
+			    	type: 'POST',
+			    	url: $("#imageGalleryItemForm").attr('action'),
+			    	data: formData,
+			        processData: false,
+			        contentType: false,
+			    	success: function(data) {
+			    			self.parent.checkNew();
+			    	},
+			    	error: function(jqXHR, textStatus, errorMessage) {
+								$('#uploadButtons').show();
+								$('#itemAttachmentArea_Busy').hide();
+			        	alert(errorMessage);
+			    	}
+				});
+			} 		
+				
+		</script>	
 </lams:head>
 	
 <body class="stripes">
+	<html:form action="/monitoring/saveNewImage" method="post" styleId="imageGalleryItemForm" enctype="multipart/form-data">
+	<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+	<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
 
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<div class="panel-title">
 				<fmt:message key="label.authoring.basic.add.image" />
+				<a href="<html:rewrite page='/monitoring/initMultipleImages.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
+					class="thickbox btn btn-default pull-right btn-xs">  
+						<fmt:message key="label.authoring.basic.upload.multiple.images" />
+				</a>				
+				
 			</div>
 		</div>
 			
 		<div class="panel-body">
 			<%@ include file="/common/messages.jsp"%>
 			
-			<html:form action="/monitoring/saveNewImage" method="post" styleId="imageGalleryItemForm" enctype="multipart/form-data">
-				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-				<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
 				<html:hidden property="sessionMapID" />
 	
 				<div class="form-group">
 				    <label for="file-title">
 				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
 				    </label>
-				    <html:text property="title" styleClass="form-control" styleId="file-title" tabindex="1"/>
+				    <html:text property="title" styleClass="form-control" styleId="imageTitle" tabindex="1"/>
 				</div>
 		
 				<div class="form-group">
 					<label for="description">
 						<fmt:message key="label.authoring.basic.resource.description.input" />
 					</label>
-					<lams:STRUTS-textarea rows="5" styleClass="text-area form-control" property="description" />
+					<lams:STRUTS-textarea rows="3" styleClass="text-area form-control" tabindex="2" property="description" />
 				</div>
 			
-				<div class="form-group">
-				    <label for="file">
-				    	<fmt:message key="label.authoring.basic.resource.file.input"/>
-				    </label>
-					<input type="file" name="file" />
+				<div class="input-group">
+				    <span class="input-group-btn">
+							<button id="fileButtonBrowse" type="button" tabindex="3" class="btn btn-sm btn-default">
+							<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+						</button>
+					</span>
+					<input type="file" id="file" name="file" multiple style="display:none"> 
+					<input type="text" id="fileInputName" style="display:none" disabled="disabled" placeholder="File not selected" class="form-control input-sm">
 				</div>
+						
+				<script type="text/javascript">
+					// Fake file upload
+					document.getElementById('fileButtonBrowse').addEventListener('click', function() {
+						document.getElementById('file').click();
+					});
+					
+					document.getElementById('file').addEventListener('change', function() {
+						$('#fileInputName').show();
+						document.getElementById('fileInputName').value = this.value.replace(/^.*\\/, "");
+						
+					});
+				</script>  
 				
-				<a href="<html:rewrite page='/monitoring/initMultipleImages.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
-					class="thickbox btn btn-default btn-xs">  
-						<fmt:message key="label.authoring.basic.upload.multiple.images" />
-				</a>				
 			</html:form>
+			
+			<div class="panel-body text-center" style="display:none" id="itemAttachmentArea_Busy">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary"></i>
+			</div>
+			
 	
-			<div class="voffset10 pull-right">
-				<a href="#nogo" onclick="document.imageGalleryItemForm.submit();" class="btn btn-default btn-sm button-add-item">
-					<fmt:message key="label.authoring.basic.add.image" /> 
-				</a>
-				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
+			<div id="uploadButtons" class="voffset10 pull-right">
+				<a href="#nogo" tabindex="4" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
+				<a href="#nogo"  tabindex="5" onclick="javascript:submitImage();" class="btn btn-default btn-sm button-add-item">
+					<fmt:message key="label.authoring.basic.add.image" /> 
+				</a>
 			</div>
 		
 		</div>
Index: lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp
===================================================================
diff -u -r61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc -rf8b98e45847fcee40188af4c9db5d13e1bd61e25
--- lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 61ebeba7cc58c61cfb547ecfa0d61cd091bf08dc)
+++ lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
@@ -1,12 +1,95 @@
-<!DOCTYPE html>	
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 <%@ include file="/common/taglibs.jsp"%>
+<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+<c:set var="UPLOAD_FILE_LARGE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_LARGE_MAX_SIZE)%></c:set>
 
+<!DOCTYPE html>	
 <lams:html>
 <lams:head>
 	<title>
 		<fmt:message key="label.learning.title" />
 	</title>
 	<%@ include file="/common/header.jsp"%>
+		<script type="text/javascript">
+			
+			function submitMultipleImages(){
+				
+				var UPLOAD_FILE_LARGE_MAX_SIZE = ${UPLOAD_FILE_LARGE_MAX_SIZE};
+				var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
+				var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"/>';
+				var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';	
+				
+				var formData = new FormData();
+				formData.append('sessionMapID', $("#sessionMapID").val());
+				
+				// Get selected files from the inputs
+				var validateFiles = [];
+				if ($('#file1').val()) { 
+					var file = document.getElementById('file1').files[0];
+					validateFiles.push(file);
+					formData.append('file1', file, file.name);
+				}
+				if ($('#file2').val()) { 
+					var file = document.getElementById('file2').files[0];
+					validateFiles.push(file);
+					formData.append('file2', file, file.name);
+				}
+				if ($('#file3').val()) { 
+					var file = document.getElementById('file3').files[0];
+					validateFiles.push(file);
+					formData.append('file3', file, file.name);
+				}
+				if ($('#file4').val()) {
+					var file = document.getElementById('file4').files[0];
+					validateFiles.push(file);
+					formData.append('file4', file, file.name);
+				}
+				if ($('#file5').val()) { 
+					var file = document.getElementById('file5').files[0];
+					validateFiles.push(file);
+					formData.append('file5', file, file.name);
+				}
+					
+				// validate files 
+				if (validateFiles.length == 0) {
+					alert(LABEL_ITEM_BLANK);
+					return;
+				}
+				for (var i = 0; i < validateFiles.length; i++) {
+					  var file = validateFiles[i];
+			
+					  // Check the file type.
+					  if (file.size > ${UPLOAD_FILE_LARGE_MAX_SIZE}) {
+						  alert(LABEL_MAX_FILE_SIZE + ' ' + (UPLOAD_FILE_LARGE_MAX_SIZE/1024/1000) + ' MBs');
+						  return;
+					  } else if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+						  alert(LABEL_NOT_ALLOWED_FORMAT);
+						  return;
+					  }
+			
+					  // Add the file to the request.
+				}
+				
+				$('#uploadButtons').hide();
+				$('#itemAttachmentArea_Busy').show();
+			
+			
+				$.ajax({
+			    	type: 'POST',
+			    	url: $("#multipleImagesForm").attr('action'),
+			    	data: formData,
+			        processData: false,
+			        contentType: false,
+			    	success: function(data) {
+			    		self.parent.checkNew();
+			    	},
+			    	error: function(jqXHR, textStatus, errorMessage) {
+			        	alert(errorMessage);
+			    	}
+				});
+			} 
+		</script>		
 </lams:head>
 	
 <body class="stripes">
@@ -15,6 +98,10 @@
 		<div class="panel-heading">
 			<div class="panel-title">
 				<fmt:message key="label.authoring.basic.add.multiple.images" />
+				<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
+						class="thickbox pull-right btn btn-default btn-xs">  
+					<fmt:message key="label.authoring.basic.upload.single.image" />
+				</a>
 			</div>
 		</div>
 			
@@ -23,45 +110,138 @@
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/monitoring/saveMultipleImages" method="post" styleId="multipleImagesForm" enctype="multipart/form-data">
-				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-				<html:hidden property="sessionMapID" />
+				<html:hidden styleId="sessionMapID" property="sessionMapID" />
 	
 				<div class="form-group">
 					<label>
 						<fmt:message key="label.authoring.basic.resource.files.input" />
 					</label>
 					
 					<div>
-						<input type="file" name="file1" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file2" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file3" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file4" />
-					</div>
-					<div class="voffset5">
-						<input type="file" name="file5" />
-					</div>
-				</div>
+						<div class="input-group">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse1" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file1" name="file1" style="display:none"> 
+							<input type="text" id="fileInputName1" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse1').addEventListener('click', function() {
+								document.getElementById('file1').click();
+							});
+							
+							document.getElementById('file1').addEventListener('change', function() {
+								$('#fileInputName1').show();
+								document.getElementById('fileInputName1').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
 				
-				<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&modal=true" 
-						class="thickbox btn btn-default btn-xs">  
-					<fmt:message key="label.authoring.basic.upload.single.image" />
-				</a>
-				
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse2" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file2" name="file2" style="display:none"> 
+							<input type="text" id="fileInputName2" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse2').addEventListener('click', function() {
+								document.getElementById('file2').click();
+							});
+							
+							document.getElementById('file2').addEventListener('change', function() {
+								$('#fileInputName2').show();
+								document.getElementById('fileInputName2').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+									
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse3" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file3" name="file3" style="display:none"> 
+							<input type="text" id="fileInputName3" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse3').addEventListener('click', function() {
+								document.getElementById('file3').click();
+							});
+							
+							document.getElementById('file3').addEventListener('change', function() {
+								$('#fileInputName3').show();
+								document.getElementById('fileInputName3').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+						
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse4" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file4" name="file4" style="display:none"> 
+							<input type="text" id="fileInputName4" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse4').addEventListener('click', function() {
+								document.getElementById('file4').click();
+							});
+							
+							document.getElementById('file4').addEventListener('change', function() {
+								$('#fileInputName4').show();
+								document.getElementById('fileInputName4').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>    
+						
+						<div class="input-group voffset5">
+						    <span class="input-group-btn">
+									<button id="fileButtonBrowse5" type="button" class="btn btn-sm btn-default">
+									<i class="fa fa-upload"></i> <fmt:message key="label.authoring.basic.resource.file.input"/>
+								</button>
+							</span>
+							<input type="file" id="file5" name="file5" style="display:none"> 
+							<input type="text" id="fileInputName5" style="display:none" disabled="disabled" class="form-control input-sm">
+						</div>
+								
+						<script type="text/javascript">
+							document.getElementById('fileButtonBrowse5').addEventListener('click', function() {
+								document.getElementById('file5').click();
+							});
+							
+							document.getElementById('file5').addEventListener('change', function() {
+								$('#fileInputName5').show();
+								document.getElementById('fileInputName5').value = this.value.replace(/^.*\\/, "");
+								
+							});
+						</script>
+				</div>
+								
 			</html:form>
 
-			<div class="voffset10 pull-right">
-				<a href="#nogo" onclick="javascript:document.multipleImagesForm.submit();" class="btn btn-default button-add-item">
-					<fmt:message key="label.authoring.basic.add.images" /> 
-				</a>
+			<div class="panel-body text-center" style="display:none" id="itemAttachmentArea_Busy">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary"></i>
+			</div>
+
+			<div id="uploadButtons" class="voffset10 pull-right">
 				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
+				<a href="#nogo" onclick="javascript:submitMultipleImages();" class="btn btn-default button-add-item">
+					<fmt:message key="label.authoring.basic.add.images" /> 
+				</a>
 			</div>
 		
 		</div>