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.3 -r1.4.2.4
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	12 May 2016 09:54:34 -0000	1.4.2.3
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	13 Nov 2016 10:08:45 -0000	1.4.2.4
@@ -40,7 +40,7 @@
 	
 	// validate uploading file if we add it for the first time
 	if (!eval($("#has-file").val())) {
-		var fileSelect = document.getElementById('file-select');
+		var fileSelect = document.getElementById('fileSelector');
 		// Get the selected files from the input.
 		var files = fileSelect.files;
 		
@@ -64,6 +64,10 @@
 
 		// Add the file to the request.
 		formData.append('file', file, file.name);
+		$('#uploadButtons').hide();
+		$('#itemAttachmentArea_Busy').show();
+		
+		
 	}
 
 	$.ajax({
@@ -135,7 +139,11 @@
 
 		  // Add the file to the request.
 	}
+	
+	$('#uploadButtons').hide();
+	$('#itemAttachmentArea_Busy').show();
 
+
 	$.ajax({
     	type: 'POST',
     	url: saveMultipleImagesUrl,
Index: lams_tool_images/web/pages/authoring/basic.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/authoring/basic.jsp,v
diff -u -r1.11.2.3 -r1.11.2.4
--- lams_tool_images/web/pages/authoring/basic.jsp	12 May 2016 09:54:34 -0000	1.11.2.3
+++ lams_tool_images/web/pages/authoring/basic.jsp	13 Nov 2016 10:08:45 -0000	1.11.2.4
@@ -101,7 +101,7 @@
     	<fmt:message key="label.authoring.basic.instruction"/>
     </label>
 	<lams:CKEditor id="imageGallery.instructions" value="${formBean.imageGallery.instructions}"
-			contentFolderID="${formBean.contentFolderID}" height="400">
+			contentFolderID="${formBean.contentFolderID}">
 	</lams:CKEditor>
 </div>
 
@@ -113,7 +113,7 @@
 <c:url var="showMessageURL" value='/authoring/newImageInit.do'>
 	<c:param name="sessionMapID" value="${formBean.sessionMapID}" />
 </c:url>
-<html:link href="#" styleClass="btn btn-default btn-sm" onclick="javascript:showMessage('${showMessageURL}')">
+<html:link href="#nogo" styleClass="btn btn-default btn-sm" onclick="javascript:showMessage('${showMessageURL}')">
 	<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.image" />
 </html:link>
 <p>
Index: lams_tool_images/web/pages/authoring/parts/addimage.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_images/web/pages/authoring/parts/addimage.jsp,v
diff -u -r1.3.2.8 -r1.3.2.9
--- lams_tool_images/web/pages/authoring/parts/addimage.jsp	13 Sep 2016 09:22:32 -0000	1.3.2.8
+++ lams_tool_images/web/pages/authoring/parts/addimage.jsp	13 Nov 2016 10:08:45 -0000	1.3.2.9
@@ -1,26 +1,36 @@
 <%@ include file="/common/taglibs.jsp"%>
+<html:form action="/authoring/saveOrUpdateImage" 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" />
+			<div class="pull-right">
+				<c:if test="${empty formBean.imageIndex}">
+					<a href="javascript:showMessage('<html:rewrite page="/authoring/initMultipleImages.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+							class="btn btn-default btn-xs">
+						<fmt:message key="label.authoring.basic.upload.multiple.images" />
+					</a>
+				</c:if>		
+			</div>
 		</div>
 	</div>
 		
 	<div class="panel-body">
 
 		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateImage" 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" />
 			<html:hidden property="imageIndex" />
 	
 			<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 input-sm" styleId="file-title" tabindex="1"/>
 			</div>
 		
 			<div class="form-group">
@@ -34,30 +44,25 @@
 			</div>
 				
 			<div class="form-group">
-			    <label for="itemAttachmentArea">
-			    	<fmt:message key="label.authoring.basic.resource.file.input"/>
-			    </label>
 				    
 				<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 				<div id="itemAttachmentArea">
 					<%@ include file="/pages/authoring/parts/imagefile.jsp"%>
 				</div>
 			</div>
-				
-			<c:if test="${empty formBean.imageIndex}">
-				<a href="javascript:showMessage('<html:rewrite page="/authoring/initMultipleImages.do?sessionMapID=${formBean.sessionMapID}"/>');" 
-						class="btn btn-default btn-xs">
-					<fmt:message key="label.authoring.basic.upload.multiple.images" />
-				</a>
-			</c:if>		
-	
+					
 		</html:form>
 	
-		<div class="voffset10 pull-right">
+		<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:cancelImageGalleryItem()" class="btn btn-sm btn-default loffset5">
 				<fmt:message key="label.cancel" /> 
 			</a>
-			<a href="#nogo" onclick="javascript:submitImageGalleryItem()" class="btn btn-sm btn-default button-add-item">
+			<a href="#nogo" id="addImageBtn" onclick="javascript:submitImageGalleryItem()" class="btn btn-sm btn-default button-add-item">
 				<fmt:message key="label.authoring.basic.add.image" /> 
 			</a>
 			
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.5 -r1.1.10.6
--- lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	13 Sep 2016 09:22:39 -0000	1.1.10.5
+++ lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	13 Nov 2016 10:08:45 -0000	1.1.10.6
@@ -4,7 +4,12 @@
 	<div class="panel-heading">
 		<div class="panel-title">
 			<fmt:message key="label.authoring.basic.add.multiple.images" />
-		</div>
+			<a href="javascript:showMessage('<html:rewrite page="/authoring/newImageInit.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+					class="btn btn-default btn-xs pull-right">
+				<fmt:message key="label.authoring.basic.upload.single.image" />
+			</a>			
+			
+		</div>		
 	</div>
 		
 	<div class="panel-body">
@@ -18,32 +23,127 @@
 				<label>
 					<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>
+						
+				<script type="text/javascript">
+					document.getElementById('fileButtonBrowse1').addEventListener('click', function() {
+						document.getElementById('file1').click();
+					});
 					
-				<div>
-					<input type="file" name="file1" id="file1"/>
+					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>
-				<div class="voffset5">
-					<input type="file" name="file2" id="file2"/>
+						
+				<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>
-				<div class="voffset5">
-					<input type="file" name="file3" id="file3"/>
+						
+				<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>
-				<div class="voffset5">
-					<input type="file" name="file4" id="file4"/>
+						
+				<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>
-				<div class="voffset5">
-					<input type="file" name="file5" id="file5"/>
-				</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="javascript:showMessage('<html:rewrite page="/authoring/newImageInit.do?sessionMapID=${formBean.sessionMapID}"/>');" 
-					class="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">
+		<div id="uploadButtons" class="voffset10 pull-right">
 		    <a href="#nogo" onclick="javascript:cancelImageGalleryItem()" class="btn btn-sm btn-default loffset5">
 				<fmt:message key="label.cancel" /> 
 			</a>
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.2 -r1.1.10.3
--- lams_tool_images/web/pages/authoring/parts/imagefile.jsp	20 Oct 2016 22:06:28 -0000	1.1.10.2
+++ lams_tool_images/web/pages/authoring/parts/imagefile.jsp	13 Nov 2016 10:08:45 -0000	1.1.10.3
@@ -1,7 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}"	scope="request" />
 <input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" id="has-file"/>
-
 <c:choose>
 	<c:when test="${itemAttachment.hasFile}">
 		<table border="0" style="align:left; width:400px">
@@ -33,6 +32,28 @@
 	</c:when>
 	
 	<c:otherwise>
-		<input type="file" name="file" id="file-select"/>
+		<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" 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('fileSelector').click();
+			});
+			
+			document.getElementById('fileSelector').addEventListener('change', function() {
+				$('#fileInputName').show();
+				document.getElementById('fileInputName').value = this.value.replace(/^.*\\/, "");
+				
+			});
+		</script>    
+    
 	</c:otherwise>
 </c:choose>