Index: lams_tool_images/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -rd2624c4473743b70bb5681fcb359a5008b609878 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision d2624c4473743b70bb5681fcb359a5008b609878)
+++ lams_tool_images/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rd2624c4473743b70bb5681fcb359a5008b609878 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision d2624c4473743b70bb5681fcb359a5008b609878)
+++ lams_tool_images/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rf8b98e45847fcee40188af4c9db5d13e1bd61e25 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	(.../LearningAction.java)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/LearningAction.java	(.../LearningAction.java)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rb5ab72c783a98abeb08431bafb067ad4b9edf1df -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision b5ab72c783a98abeb08431bafb067ad4b9edf1df)
+++ lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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">
Index: lams_tool_images/web/WEB-INF/tags/FileUpload.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/FileUpload.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/FileUpload.tag	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -0,0 +1,84 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+
+<%-- Usually fileFieldname and fileFieldId are the same, but DACO needs them to be different.
+ If they can be the same, set  fileFieldname and  fileFieldId will be set to the same. 
+ If you need them different, then define both. 
+ If you define neither, fileFieldname = fileFieldId = "fileSelector" --%>
+<%@ attribute name="fileFieldname" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileFieldId" required="false" rtexprvalue="true"%>
+
+<%@ attribute name="fileInputNameFieldname" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileInputMessageKey" required="false" rtexprvalue="true"%>
+
+<%-- Set uploadInfoMessageKey to '-' to NOT show the "not exe and max file size" type message. Leave it blank for the default key  label.upload.info --%>
+<%@ attribute name="uploadInfoMessageKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="maxFileSize" required="true" rtexprvalue="true"%> 
+<%@ attribute name="tabindex" required="false" rtexprvalue="true"%>
+
+<%-- Only set if you have more than one file field on the screen (such as DACO) --%>			
+<%@ attribute name="errorMsgDiv" required="false" rtexprvalue="true"%>
+<%@ attribute name="fileButtonBrowse" required="false" rtexprvalue="true"%>
+
+			
+<c:if test="${empty fileFieldname}">
+	<c:set var="fileFieldname" value="fileSelector" />
+</c:if>
+
+<c:if test="${empty fileFieldId}">
+	<c:set var="fileFieldId" value="${fileFieldname}" />
+</c:if>
+
+<c:if test="${empty fileInputNameFieldname}">
+	<c:set var="fileInputNameFieldname" value="fileInputName" />
+</c:if>
+
+<c:if test="${empty fileInputMessageKey}">
+	<c:set var="fileInputMessageKey" value="label.authoring.basic.resource.file.input" />
+</c:if>
+
+<c:if test="${empty uploadInfoMessageKey}">
+	<c:set var="uploadInfoMessageKey" value="label.upload.info" />
+</c:if>
+
+<c:if test="${not empty tabindex}">
+	<c:set var="tabindexString" value="tabindex='${tabindex}'" />
+</c:if>
+
+<c:if test="${empty errorMsgDiv}">
+	<c:set var="errorMsgDiv" value="file-error-msg" />
+</c:if>
+
+<c:if test="${empty fileButtonBrowse}">
+	<c:set var="fileButtonBrowse" value="fileButtonBrowse" />
+</c:if>
+
+
+<div class="input-group" id="addfile">
+	<span class="input-group-btn" style="font-size:inherit"> <%-- font-size:inherit needed for Share Resources authoring or the button is too small --%>
+		<button id="${fileButtonBrowse}" ${tabindexString} type="button" class="btn btn-default">
+			<i class="fa fa-upload"></i> <fmt:message key="${fileInputMessageKey}"/>
+		</button>
+	</span>
+	<input type="file" id="${fileFieldId}" name="${fileFieldname}" style="display:none" class="fileUpload"> 
+	<input type="text" id="${fileInputNameFieldname}" style="display:none" disabled="disabled" placeholder="File not selected" class="form-control file-input-name">
+</div>
+<c:if test="${uploadInfoMessageKey ne '-'}">
+<p class="help-block"><fmt:message key="${uploadInfoMessageKey}"><fmt:param>${maxFileSize}</fmt:param></fmt:message></p>					
+</c:if>
+<div id="${errorMsgDiv}" class="text-danger" style="display:none"></div>			
+
+<script type="text/javascript">
+	// Fake file upload
+	document.getElementById('${fileButtonBrowse}').addEventListener('click', function() {
+		document.getElementById('${fileFieldId}').click();
+	});
+	
+	document.getElementById('${fileFieldId}').addEventListener('change', function() {
+		$('#${fileInputNameFieldname}').show();
+		document.getElementById('${fileInputNameFieldname}').value = this.value.replace(/^.*\\/, "");
+	});
+</script>  
+
Index: lams_tool_images/web/WEB-INF/tags/WaitingSpinner.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/WaitingSpinner.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/WaitingSpinner.tag	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -0,0 +1,17 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="id" required="false" rtexprvalue="true"%>
+<%@ attribute name="showInline" required="false" rtexprvalue="true"%>
+			
+<c:if test="${not empty id}">
+	<c:set var="idString">id="${id}"</c:set>
+</c:if>
+
+<c:choose>
+<c:when test="${showInline}">
+<i class="fa fa-refresh fa-spin fa-fw text-primary" style="display:none" ${idString} /></i>
+</c:when>
+<c:otherwise>
+<div class="text-center" style="display:none" ${idString} ><i class="fa fa-refresh fa-spin fa-2x fa-fw text-primary" /></i></div>
+</c:otherwise>
+</c:choose>
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r1f99d03199a3995cfffe0cb1536c08f0220e88b0 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 1f99d03199a3995cfffe0cb1536c08f0220e88b0)
+++ lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rf8b98e45847fcee40188af4c9db5d13e1bd61e25 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -r60ab803bf843562083cfb66764ddfcb3b0a83841 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
+++ lams_tool_images/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -re8638cf925c1df25b5024af7d5b9c1ae2a737d90 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision e8638cf925c1df25b5024af7d5b9c1ae2a737d90)
+++ lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rf8b98e45847fcee40188af4c9db5d13e1bd61e25 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
+++ lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rf8b98e45847fcee40188af4c9db5d13e1bd61e25 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
+++ lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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
===================================================================
diff -u -rf8b98e45847fcee40188af4c9db5d13e1bd61e25 -r67dcb9996bea686f86b32184b900f6aa36fd11f0
--- lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision f8b98e45847fcee40188af4c9db5d13e1bd61e25)
+++ lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 67dcb9996bea686f86b32184b900f6aa36fd11f0)
@@ -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>