Index: lams_tool_images/conf/language/lams/ApplicationResources.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/conf/language/lams/ApplicationResources.properties,v
diff -u -r1.23.2.11 -r1.23.2.12
--- lams_tool_images/conf/language/lams/ApplicationResources.properties	4 Dec 2016 01:56:16 -0000	1.23.2.11
+++ lams_tool_images/conf/language/lams/ApplicationResources.properties	28 Feb 2017 12:33:43 -0000	1.23.2.12
@@ -166,7 +166,8 @@
 label.posted.by  ={0} on {1}
 label.image.options  =Image options
 label.activity.completion  =End of activity
-errors.maxfilesize  =Image exceeds maximum file size
+errors.maxfilesize  =Image exceeds maximum file size {0}
+label.upload.info  =Uploaded file must not exceed size of {0}
 label.rating.criterias  =Rating criterias
 label.add.criteria  =Add criteria
 label.number.of.votes  ={0} / {1} votes
Index: lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties,v
diff -u -r1.32.2.9 -r1.32.2.10
--- lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties	4 Dec 2016 01:56:16 -0000	1.32.2.9
+++ lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties	28 Feb 2017 12:33:43 -0000	1.32.2.10
@@ -166,7 +166,8 @@
 label.posted.by  ={0} on {1}
 label.image.options  =Image options
 label.activity.completion  =End of activity
-errors.maxfilesize  =Image exceeds maximum file size
+errors.maxfilesize  =Image exceeds maximum file size {0}
+label.upload.info  =Uploaded file must not exceed size of {0}
 label.rating.criterias  =Rating criterias
 label.add.criteria  =Add criteria
 label.number.of.votes  ={0} / {1} votes
Index: lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java,v
diff -u -r1.27.2.9 -r1.27.2.10
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	17 Nov 2016 16:36:08 -0000	1.27.2.9
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	28 Feb 2017 12:33:43 -0000	1.27.2.10
@@ -761,7 +761,7 @@
 	ActionErrors errors = new ActionErrors();
 
 	// validate file size
-	FileValidatorUtil.validateFileSize(itemForm.getFile(), true, errors);
+	FileValidatorUtil.validateFileSize(itemForm.getFile(), false, errors);
 	// for edit validate: file already exist
 	if (itemForm.getFile() == null || StringUtils.isEmpty(itemForm.getFile().getFileName())) {
 	    errors.add(ActionMessages.GLOBAL_MESSAGE, new ActionMessage(ImageGalleryConstants.ERROR_MSG_FILE_BLANK));
@@ -792,7 +792,7 @@
 
 	// validate files size
 	for (FormFile file : fileList) {
-	    FileValidatorUtil.validateFileSize(file, true, errors);
+	    FileValidatorUtil.validateFileSize(file, false, errors);
 
 	    // check for allowed format : gif, png, jpg
 	    String contentType = file.getContentType();
Index: lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag,v
diff -u -r1.11.2.2 -r1.11.2.3
--- lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	13 Dec 2016 04:22:15 -0000	1.11.2.2
+++ lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	28 Feb 2017 12:33:43 -0000	1.11.2.3
@@ -123,7 +123,7 @@
     }  				
 </script>	
 <div id="saveCancelButtons" >
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleId="saveButton" styleClass="btn btn-primary pull-right">
+		<html:link href="javascript:doSubmit_Form_Only();" styleId="saveButton" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
 		<html:link href="javascript:;" property="cancel" styleId="cancelButton" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_images/web/WEB-INF/tags/FileUpload.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_images/web/WEB-INF/tags/WaitingSpinner.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_images/web/WEB-INF/tlds/lams/lams.tld
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/WEB-INF/tlds/lams/lams.tld,v
diff -u -r1.6.2.8 -r1.6.2.9
--- lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	25 Nov 2016 17:09:27 -0000	1.6.2.8
+++ lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	28 Feb 2017 12:33:43 -0000	1.6.2.9
@@ -529,5 +529,13 @@
        <name>CommentsAuthor</name>
        <path>/WEB-INF/tags/CommentsAuthor.tag</path>
    	</tag-file>
+   	<tag-file>
+       <name>FileUpload</name>
+       <path>/WEB-INF/tags/FileUpload.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>WaitingSpinner</name>
+       <path>/WEB-INF/tags/WaitingSpinner.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_images/web/includes/javascript/imageGalleryitem.js
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/includes/javascript/imageGalleryitem.js,v
diff -u -r1.4.2.6 -r1.4.2.7
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	17 Nov 2016 16:36:08 -0000	1.4.2.6
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	28 Feb 2017 12:33:43 -0000	1.4.2.7
@@ -50,16 +50,10 @@
 		}
 		var file = files[0];
 
-	    // Check the file type.
-		if (file.name.length < 1) {
-			alert("file.name.length < 1");
+	    // Check the file type and file size
+		if ( ! validateShowErrorImageType(file, LABEL_NOT_ALLOWED_FORMAT ) || 
+				! validateShowErrorFileSize(file, UPLOAD_FILE_LARGE_MAX_SIZE, 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.
@@ -92,29 +86,35 @@
 	
 	// Get selected files from the inputs
 	var validateFiles = [];
+	var errorDivs = [];
 	if ($('#file1').val()) { 
 		var file = document.getElementById('file1').files[0];
 		validateFiles.push(file);
+		errorDivs.push('fileerror1');
 		formData.append('file1', file, file.name);
 	}
 	if ($('#file2').val()) { 
 		var file = document.getElementById('file2').files[0];
 		validateFiles.push(file);
+		errorDivs.push('fileerror2');
 		formData.append('file2', file, file.name);
 	}
 	if ($('#file3').val()) { 
 		var file = document.getElementById('file3').files[0];
 		validateFiles.push(file);
+		errorDivs.push('fileerror3');
 		formData.append('file3', file, file.name);
 	}
 	if ($('#file4').val()) {
 		var file = document.getElementById('file4').files[0];
 		validateFiles.push(file);
+		errorDivs.push('fileerror4');
 		formData.append('file4', file, file.name);
 	}
 	if ($('#file5').val()) { 
 		var file = document.getElementById('file5').files[0];
 		validateFiles.push(file);
+		errorDivs.push('fileerror5');
 		formData.append('file5', file, file.name);
 	}
 		
@@ -123,23 +123,19 @@
 		alert(LABEL_ITEM_BLANK);
 		return;
 	}
+	var valid = true;
 	for (var i = 0; i < validateFiles.length; i++) {
-		  var file = validateFiles[i];
-
-		  // Check the file type.
-		  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;
-		  }
-
-		  // Add the file to the request.
+	    // Check the file type and file size
+		var file = validateFiles[i];
+		var errorDivId = errorDivs[i];
+		if ( ! validateShowErrorImageType(file, LABEL_NOT_ALLOWED_FORMAT, false, errorDivId ) || 
+				! validateShowErrorFileSize(file, UPLOAD_FILE_LARGE_MAX_SIZE, LABEL_MAX_FILE_SIZE, false, errorDivId) ) {
+			valid=false;
+		}
 	}
+	if ( ! valid ) {
+		return;
+	}
 	
 	$('#uploadButtons').hide();
 	$('#itemAttachmentArea_Busy').show();
Index: lams_tool_images/web/pages/authoring/authoring.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/authoring/authoring.jsp,v
diff -u -r1.6.2.5 -r1.6.2.6
--- lams_tool_images/web/pages/authoring/authoring.jsp	12 May 2016 09:54:34 -0000	1.6.2.5
+++ lams_tool_images/web/pages/authoring/authoring.jsp	28 Feb 2017 12:33:43 -0000	1.6.2.6
@@ -3,15 +3,17 @@
 <%@ page import="org.lamsfoundation.lams.tool.imageGallery.ImageGalleryConstants"%>
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
 <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.author.title" /></title>
 
 	<%@ include file="/common/tabbedheader.jsp"%>
+	<script type="text/javascript" src="${lams}includes/javascript/upload.js"></script>
 	
-	<link href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet" type="text/css" >
+	<link href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet" type="text/css" >
 
 	<script type="text/javascript">
 		<%-- used for  imageGalleryitem.js --%>
Index: lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp,v
diff -u -r1.1.10.7 -r1.1.10.8
--- lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	14 Nov 2016 17:20:13 -0000	1.1.10.7
+++ lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	28 Feb 2017 12:33:43 -0000	1.1.10.8
@@ -1,4 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
+<c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_LARGE_MAX_SIZE))%></c:set>
+
 <html:form action="/authoring/saveMultipleImages" method="post" styleId="imageGalleryItemsForm" enctype="multipart/form-data">
 	<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 	
@@ -24,115 +29,30 @@
 					<fmt:message key="label.authoring.basic.resource.files.input"/>
 				</label>
 
-				<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 class="help-block">
+					<fmt:message key="label.upload.info">
+					<fmt:param>${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}</fmt:param>
+					</fmt:message>
 				</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>
+				<lams:FileUpload fileButtonBrowse="fileButtonBrowse1" fileFieldname="file1" errorMsgDiv="fileerror1" uploadInfoMessageKey="-"
+					fileInputNameFieldname="fileInputName1" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+	
+				<div class="voffset5"></div>
+				<lams:FileUpload fileButtonBrowse="fileButtonBrowse2" fileFieldname="file2" errorMsgDiv="fileerror2" uploadInfoMessageKey="-"
+					fileInputNameFieldname="fileInputName2" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+
+				<div class="voffset5"></div>
+				<lams:FileUpload fileButtonBrowse="fileButtonBrowse3" fileFieldname="file3" errorMsgDiv="fileerror3" uploadInfoMessageKey="-"
+					fileInputNameFieldname="fileInputName3" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+
+				<div class="voffset5"></div>
+				<lams:FileUpload fileButtonBrowse="fileButtonBrowse4" fileFieldname="file4" errorMsgDiv="fileerror4" uploadInfoMessageKey="-"
+					fileInputNameFieldname="fileInputName4" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+
+				<div class="voffset5"></div>
+				<lams:FileUpload fileButtonBrowse="fileButtonBrowse5" fileFieldname="file5" errorMsgDiv="fileerror5" uploadInfoMessageKey="-"
+					fileInputNameFieldname="fileInputName5" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
 									
 			</div>
 			
Index: lams_tool_images/web/pages/authoring/parts/imagefile.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/authoring/parts/imagefile.jsp,v
diff -u -r1.1.10.4 -r1.1.10.5
--- lams_tool_images/web/pages/authoring/parts/imagefile.jsp	17 Nov 2016 16:36:08 -0000	1.1.10.4
+++ lams_tool_images/web/pages/authoring/parts/imagefile.jsp	28 Feb 2017 12:33:43 -0000	1.1.10.5
@@ -1,4 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
+<c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_LARGE_MAX_SIZE))%></c:set>
+
 <c:set var="ctxPath" value="${pageContext.request.contextPath}"	scope="request" />
 <input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" id="has-file"/>
 <c:choose>
@@ -32,28 +37,6 @@
 	</c:when>
 	
 	<c:otherwise>
-		<div class="input-group">
-		    <span class="input-group-btn">
-					<button id="fileButtonBrowse" 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="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>
-				
-		<script type="text/javascript">
-			// Fake file upload
-			document.getElementById('fileButtonBrowse').addEventListener('click', function() {
-				document.getElementById('fileSelector').click();
-			});
-			
-			document.getElementById('fileSelector').addEventListener('change', function() {
-				$('#fileInputName').show();
-				document.getElementById('fileInputName').value = this.value.replace(/^.*\\/, "");
-				
-			});
-		</script>    
-    
+		<lams:FileUpload maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
 	</c:otherwise>
 </c:choose>
Index: lams_tool_images/web/pages/learning/parts/addimage.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/learning/parts/addimage.jsp,v
diff -u -r1.3.2.6 -r1.3.2.7
--- lams_tool_images/web/pages/learning/parts/addimage.jsp	17 Nov 2016 16:36:08 -0000	1.3.2.6
+++ lams_tool_images/web/pages/learning/parts/addimage.jsp	28 Feb 2017 12:33:43 -0000	1.3.2.7
@@ -1,7 +1,10 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
+<c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE))%></c:set>
+
 <!DOCTYPE html>
 
 <lams:html>
@@ -10,8 +13,11 @@
 			<fmt:message key="label.learning.title" />
 		</title>
 		<%@ include file="/common/header.jsp"%>
-					
+ 		<script type="text/javascript" src="${lams}includes/javascript/upload.js"></script>
+		
 		<script type="text/javascript">
+		
+
 			$(document).ready(function(){ 
 				document.getElementById("imageTitle").focus();
 				
@@ -21,7 +27,7 @@
 
 				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_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
 				var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';	
 				
 				if ( typeof CKEDITOR !== 'undefined' ) {
@@ -40,20 +46,15 @@
 					var fileSelect = document.getElementById('file');
 					// Get the selected files from the input.
 					var files = fileSelect.files;
-					
 					if (files.length == 0) {
-						alert(LABEL_ITEM_BLANK);
+						clearFileError();
+						showFileError(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);
+					var file = files[0];
+					if ( ! validateShowErrorImageType(file, LABEL_NOT_ALLOWED_FORMAT, false) || ! validateShowErrorFileSize(file, UPLOAD_FILE_MAX_SIZE, LABEL_MAX_FILE_SIZE, false) ) {
 						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.
@@ -63,21 +64,21 @@
 					
 				}
 
-				$.ajax({
+ 				$.ajax({
 			    	type: 'POST',
 			    	url: $("#imageGalleryItemForm").attr('action'),
 			    	data: formData,
 			        processData: false,
 			        contentType: false,
 			    	success: function(data) {
-			   				self.parent.checkNew();
+			   			self.parent.checkNew();
 			    	},
 			    	error: function(jqXHR, textStatus, errorMessage) {
-								$('#uploadButtons').show();
-								$('#itemAttachmentArea_Busy').hide();
+						$('#uploadButtons').show();
+						$('#itemAttachmentArea_Busy').hide();
 			        	alert(errorMessage);
 			    	}
-				});
+				}); 
 			} 		
 				
 		</script>
@@ -117,28 +118,7 @@
 					<lams:STRUTS-textarea rows="5" tabindex="2" styleClass="text-area form-control" property="description" />
 				</div>
 	
-				<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>
-						
-				<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>  
+				<lams:FileUpload fileFieldname="file" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}" tabindex="3"/>
 										
 			</html:form>
 
Index: lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp,v
diff -u -r1.1.10.6 -r1.1.10.7
--- lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	17 Nov 2016 16:36:08 -0000	1.1.10.6
+++ lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	28 Feb 2017 12:33:43 -0000	1.1.10.7
@@ -1,50 +1,61 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<%@ page import="org.lamsfoundation.lams.util.FileValidatorUtil" %>
 <c:set var="UPLOAD_FILE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_MAX_SIZE)%></c:set>
+<c:set var="UPLOAD_FILE_MAX_SIZE_AS_USER_STRING"><%=FileValidatorUtil.formatSize(Configuration.getAsInt(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" src="${lams}includes/javascript/upload.js"></script>
+		
 		<script type="text/javascript">
 			
 			function submitMultipleImages(){
 				
+				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_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"><param>{0}</param></fmt:message>';
 				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 = [];
+				var errorDivs = [];
 				if ($('#file1').val()) { 
 					var file = document.getElementById('file1').files[0];
 					validateFiles.push(file);
+					errorDivs.push('fileerror1');
 					formData.append('file1', file, file.name);
 				}
 				if ($('#file2').val()) { 
 					var file = document.getElementById('file2').files[0];
 					validateFiles.push(file);
+					errorDivs.push('fileerror2');
 					formData.append('file2', file, file.name);
 				}
 				if ($('#file3').val()) { 
 					var file = document.getElementById('file3').files[0];
 					validateFiles.push(file);
+					errorDivs.push('fileerror3');
 					formData.append('file3', file, file.name);
 				}
 				if ($('#file4').val()) {
 					var file = document.getElementById('file4').files[0];
 					validateFiles.push(file);
+					errorDivs.push('fileerror4');
 					formData.append('file4', file, file.name);
 				}
 				if ($('#file5').val()) { 
 					var file = document.getElementById('file5').files[0];
 					validateFiles.push(file);
+					errorDivs.push('fileerror5');
 					formData.append('file5', file, file.name);
 				}
 					
@@ -53,20 +64,19 @@
 					alert(LABEL_ITEM_BLANK);
 					return;
 				}
+				var valid = true;
 				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.
+				    // Check the file type and file size
+					var file = validateFiles[i];
+					var errorDivId = errorDivs[i];
+					if ( ! validateShowErrorImageType(file, LABEL_NOT_ALLOWED_FORMAT, false, errorDivId ) || 
+							! validateShowErrorFileSize(file, UPLOAD_FILE_MAX_SIZE, LABEL_MAX_FILE_SIZE, false, errorDivId) ) {
+						valid=false;
+					}
 				}
+				if ( ! valid ) {
+					return;
+				}
 				
 				$('#uploadButtons').hide();
 				$('#itemAttachmentArea_Busy').show();
@@ -113,117 +123,32 @@
 					<label>
 						<fmt:message key="label.authoring.basic.resource.files.input" />
 					</label>
+
+					<div class="help-block">
+						<fmt:message key="label.upload.info">
+						<fmt:param>${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}</fmt:param>
+						</fmt:message>
+					</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>    
-				
-						<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>
+					<lams:FileUpload fileButtonBrowse="fileButtonBrowse1" fileFieldname="file1" errorMsgDiv="fileerror1" uploadInfoMessageKey="-"
+						fileInputNameFieldname="fileInputName1" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+		
+					<div class="voffset5"></div>
+					<lams:FileUpload fileButtonBrowse="fileButtonBrowse2" fileFieldname="file2" errorMsgDiv="fileerror2" uploadInfoMessageKey="-"
+						fileInputNameFieldname="fileInputName2" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+	
+					<div class="voffset5"></div>
+					<lams:FileUpload fileButtonBrowse="fileButtonBrowse3" fileFieldname="file3" errorMsgDiv="fileerror3" uploadInfoMessageKey="-"
+						fileInputNameFieldname="fileInputName3" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+	
+					<div class="voffset5"></div>
+					<lams:FileUpload fileButtonBrowse="fileButtonBrowse4" fileFieldname="file4" errorMsgDiv="fileerror4" uploadInfoMessageKey="-"
+						fileInputNameFieldname="fileInputName4" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+	
+					<div class="voffset5"></div>
+					<lams:FileUpload fileButtonBrowse="fileButtonBrowse5" fileFieldname="file5" errorMsgDiv="fileerror5" uploadInfoMessageKey="-"
+						fileInputNameFieldname="fileInputName5" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/>
+
 				</div>
 				
 			</html:form>