Client-side check for uploaded file size against serverside configure…

…d maximum (#1260)
GCRC · Feb 12, 2025 · 17273bb · 17273bb
1 parent 79bc8db
commit 17273bb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/nunaliit2-js/src/main/js/nunaliit2/n2.upload.js b/nunaliit2-js/src/main/js/nunaliit2/n2.upload.js
@@ -208,10 +208,33 @@ var Upload = $n2.Class({
 				$form.prepend( $('<input class="n2UploadProgressId" type="hidden" name="progressId" value="'+progressKey+'"/>') );
 			};
 
-			var formData = new FormData($form[0]);
-			if(opts.uploadFile !== null) {
+			const formData = new FormData($form[0]);
+			if (opts.uploadFile !== null) {
 				formData.append('media', uploadFile);
 			}
+			for (let [name, value] of formData.entries()) {
+				if (name === 'media') {
+					const filesize = value?.size
+					const serverMaxSize = _this?.welcomeMessage?.maxSize
+					if (!isNaN(filesize) && !isNaN(serverMaxSize)) {
+						// 500 is a guess for the remainder of the request contents
+						// Because the server actually checks for entire request size (not just file size) in reality
+						if ((filesize + 500) >= serverMaxSize) {
+							const filesizeWarningDivID = "filesizeWarning"
+							if ($('#' + filesizeWarningDivID).length === 0) {
+								const filesizeWarningDiv = $(
+									'<div id="' + filesizeWarningDivID + '" style="color: red;">' 
+									+ _loc('Maximum file size allowed') + ': '
+									+  Math.floor((serverMaxSize / 1000000) / 10) * 10
+									+ 'MB'
+									+ '</div>');
+								$form.before(filesizeWarningDiv);
+							}
+							return
+						}
+					}
+				}
+			}
 
 			$.ajax({
 				type: 'POST'

diff --git a/nunaliit2-js/src/main/js/nunaliit2/nunaliit2.fr.js b/nunaliit2-js/src/main/js/nunaliit2/nunaliit2.fr.js
@@ -685,6 +685,7 @@ $n2.l10n.addLocalizedStrings('fr',{
 	,"Record Audio": "Enregistrer l'audio"
 	,"Record Video": "Enregistrer une vidéo"
 	,"Skip to content": "Omettre la navigation"
+	,"Maximum file size allowed": "Taille maximale du fichier autorisée"
 });
 
 if( $ && $.datepicker ) {