Index: lams_admin/web/import/importGroups.jsp
===================================================================
diff -u -r37bb2ae017713b44cdfd6a55cfceca28c3efab02 -r80371e446858031dcb9d7fa4456a79e8ab71693c
--- lams_admin/web/import/importGroups.jsp	(.../importGroups.jsp)	(revision 37bb2ae017713b44cdfd6a55cfceca28c3efab02)
+++ lams_admin/web/import/importGroups.jsp	(.../importGroups.jsp)	(revision 80371e446858031dcb9d7fa4456a79e8ab71693c)
@@ -7,11 +7,9 @@
 <%@ page import="org.lamsfoundation.lams.usermanagement.OrganisationType" %>
 <%@ 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_LARGE_MAX_SIZE)%></c:set> 
-<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="EXE_FILE_TYPES"><%=Configuration.get(ConfigurationKeys.EXE_EXTENSIONS)%></c:set> 
+<c:set var="language"><lams:user property="localeLanguage"/></c:set>
 <c:set var="classTypeId"><%= OrganisationType.CLASS_TYPE %></c:set>
 <c:set var="courseTypeId"><%= OrganisationType.COURSE_TYPE %></c:set>
 <c:set var="lams"><lams:LAMSURL/></c:set>
@@ -21,33 +19,92 @@
 	<c:set var="title"><fmt:message key="sysadmin.import.groups.title"/></c:set>
 	<title>${title}</title>
 	<link rel="shortcut icon" href="<lams:LAMSURL/>/favicon.ico" type="image/x-icon" />
+	<link href="<lams:LAMSURL/>css/uppy.min.css" rel="stylesheet" type="text/css" />
 
 	<lams:css/>
 	<link rel="stylesheet" href="<lams:LAMSURL/>admin/css/admin.css" type="text/css" media="screen">
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">
 	
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/upload.js"></script> 
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/uppy.min.js"></script>
+	<c:choose>
+		<c:when test="${language eq 'es'}">
+			<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/es_ES.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'fr'}">
+			<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/fr_FR.min.js"></script>
+		</c:when>
+		<c:when test="${language eq 'el'}">
+			<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/uppy/el_GR.min.js"></script>
+		</c:when>
+	</c:choose>
+	
 	<script type="text/JavaScript">
+	var LAMS_URL = '<lams:LAMSURL/>',
+		UPLOAD_FILE_MAX_SIZE = '<c:out value="${UPLOAD_FILE_MAX_SIZE}"/>';
+	
+		$(document).ready(function() {
+			initFileUpload('${importForm.tmpFileUploadId}', '${language}');
+		});
 		
-		function verifyAndSubmit() {
-			if ( "undefined" === typeof bCancel || ! bCancel ) {
-				var fileSelect = document.getElementById('file');
-				var files = fileSelect.files;
-					if (files.length == 0) {
-					clearFileError();
-					showFileError('<fmt:message key="button.select.importfile"/>');
-					return false;
-				} else {
-					var file = files[0];
-					if ( ! validateShowErrorSpreadsheetType(file, '<fmt:message key="error.attachment.not.xls"/>', false)
-							 || ! validateShowErrorFileSize(file, '${UPLOAD_FILE_MAX_SIZE}', '<fmt:message key="errors.maxfilesize"/>') ) {
-						return false;
-					}
-				}
-			document.getElementById('fileUpload_Busy').style.display = '';
-			}
+		/**
+		 * Initialise Uppy as the file upload widget
+		 */
+		function initFileUpload(tmpFileUploadId, language) {
+			  var uppyProperties = {
+				  // upload immediately 
+				  autoProceed: true,
+				  allowMultipleUploads: true,
+				  debug: false,
+				  restrictions: {
+					// taken from LAMS configuration
+				    maxFileSize: +UPLOAD_FILE_MAX_SIZE,
+				    maxNumberOfFiles: 1,
+				    allowedFileTypes : ['.xls']
+				  },
+				  meta: {
+					  // all uploaded files go to this subdir in LAMS tmp dir
+					  // its format is: upload_<userId>_<timestamp>
+					  'tmpFileUploadId' : tmpFileUploadId,
+					  'largeFilesAllowed' : true
+				  }
+			  };
+			  
+			  switch(language) {
+			  	case 'es' : uppyProperties.locale = Uppy.locales.es_ES; break; 
+				case 'fr' : uppyProperties.locale = Uppy.locales.fr_FR; break; 
+				case 'el' : uppyProperties.locale = Uppy.locales.el_GR; break; 
+			  }
+			  
+			  
+			  // global variable
+			  uppy = Uppy.Core(uppyProperties);
+			  // upload using Ajax
+			  uppy.use(Uppy.XHRUpload, {
+				  endpoint: LAMS_URL + 'tmpFileUpload',
+				  fieldName : 'file',
+				  // files are uploaded one by one
+				  limit : 1
+			  });
+			  
+			  uppy.use(Uppy.DragDrop, {
+				  target: '#file-upload-area',
+				  inline: true,
+				  height: 150,
+				  width: '100%'
+				});
+			  
+			  uppy.use(Uppy.StatusBar, {
+				  target: '#file-upload-area',
+				  hideAfterFinish: false,
+				  hideUploadButton: true,
+				  hideRetryButton: true,
+				  hidePauseResumeButton: true,
+				  hideCancelButton: true
+				});
 		}
+		
 	 </script>
 </lams:head>
     
@@ -114,13 +171,13 @@
 	</p>
 	<p><fmt:message key="msg.import.conclusion"/></p>
 	
-	<form:form action="importgroups.do" modelAttribute="importForm" id="importForm" method="post" enctype="multipart/form-data" onsubmit="return verifyAndSubmit();">
+	<form:form action="importgroups.do" modelAttribute="importForm" id="importForm" method="post">
 		<form:hidden path="orgId" />
+		<form:hidden path="tmpFileUploadId" />
+				
+		<div id="file-upload-area" class="voffset20"></div>
 		
-		<lams:FileUpload fileFieldname="file" fileInputMessageKey="label.excel.spreadsheet" maxFileSize="${UPLOAD_FILE_MAX_SIZE_AS_USER_STRING}"/> 
-			<lams:WaitingSpinner id="fileUpload_Busy"/> 
-		
-		<div class="pull-right">
+		<div class="pull-right voffset20">
 		<a href="<lams:LAMSURL/>admin/sysadminstart.do" class="btn btn-default"><fmt:message key="admin.cancel"/></a>
 		<input type="submit" id="importButton" class="btn btn-primary loffset5" value="<fmt:message key="label.import"/>" /> &nbsp; 	
 		</div>