From 966e511140dfdd6fd4cad511732d20a34c1a2d7d Mon Sep 17 00:00:00 2001
From: Max Nuding <max.nuding@icloud.com>
Date: Sat, 27 Nov 2021 08:01:15 +0100
Subject: [PATCH] Fixed validation

---
 config.php.sample |  4 +++-
 index.php         | 61 ++++++++++++++++++++++++++++-------------------
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/config.php.sample b/config.php.sample
index 3dbc5e4..3987f94 100644
--- a/config.php.sample
+++ b/config.php.sample
@@ -3,5 +3,7 @@
 return [
   'username' => '',
   'password' => ''
-  'noAlbumToken' => ''
+  'noAlbumToken' => '',
+  'fileUploadLimitMb' => 1024,
+  'maximumNumberOfFilesPerUpload' => 200
 ];
diff --git a/index.php b/index.php
index 231580e..213d6ab 100644
--- a/index.php
+++ b/index.php
@@ -36,8 +36,7 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
         .form-wrapper {
             display: grid;
             grid-template-rows: auto auto auto;
-            grid-auto-columns: auto auto;
-            max-width: 300px;
+            grid-auto-columns: minmax(auto, 300px) auto;
         }
         label[for="album"] {
             grid-column: 1;
@@ -69,6 +68,7 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
         }
         #error {
             grid-row: 2;
+            grid-column: 1/3;
         }
         label[for="fileProgress"] {
             grid-row: 3;
@@ -116,22 +116,6 @@ if (!isset($_POST['submit'])) {
         die('Falscher Token</body></html>');
     }
     ?>
-    <script>
-        window.tooLarge = false;
-        window.tooManyFiles = false;
-        function validateForm() {
-            const isInvalid = window.tooLarge || window.tooManyFiles;
-            console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
-            if (isInvalid) {
-                const errorDiv = document.getElementById('error');
-                errorDiv.innerText = '';
-                errorDiv.innerText += window.tooLarge ? 'Zu groß, Upload muss weniger als 200MB sein. ' : '';
-                errorDiv.innerText += window.tooManyFiles ? 'Zu viele Dateien, maximal 200 erlaubt. ' : '';
-                errorDiv.style.display = 'block';
-            }
-            return !isInvalid;
-        }
-    </script>
     <div class="form-wrapper">
         <!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !-->
         <form method="POST" enctype="multipart/form-data" id="uploadForm">
@@ -154,6 +138,8 @@ if (!isset($_POST['submit'])) {
         <progress max="0" value="0" id="totalProgress"></progress>
     </div>
     <script>
+        window.tooLarge = false;
+        window.tooManyFiles = false;
         const form = document.getElementById('uploadForm');
         const submitButton = form.querySelector('input[type=submit]');
         const albumInput = form.querySelector('select[name=album]');
@@ -174,6 +160,11 @@ if (!isset($_POST['submit'])) {
 
         form.addEventListener('submit', async function(event) {
             event.preventDefault();
+            const isInvalid = window.tooLarge || window.tooManyFiles;
+            if (isInvalid) {
+               console.error('Aborting upload! Too many fiels or fiels too large');
+               return;
+            }
             errorDiv.innerText = '';
 
             fileProgressLabel.style.display = 'inherit';
@@ -210,26 +201,46 @@ if (!isset($_POST['submit'])) {
 
         let fileList = [];
         input.addEventListener('change', (event) => {
+            const maxFileSize = <?=$config['fileUploadLimitMb'];?>;
+            const maxAmountOfFiles = <?=$config['maximumNumberOfFilesPerUpload'];?>;
             const errorDiv = document.getElementById('error');
             const totalProgress = document.getElementById('totalProgress');
+
             errorDiv.innerText = '';
             errorDiv.style.display = 'none';
+            submitButton.disabled = false;
 
             const target = event.target;
-            let totalSize = 0;
             fileList = [];
+            const filesTooLarge = [];
             if (target.files) {
                 for (file of target.files) {
-                    totalSize += file.size;
+                    const sizeInMb = file.size / 1024 / 1024;
+                    if (sizeInMb >= maxFileSize) {
+                        filesTooLarge.push(file.name);
+                        console.warn('File', file.name, 'is', sizeInMb, 'MB big, which is over the limit of', maxFileSize);
+                    }
                     fileList.push(file);
                 }
             }
             totalProgress.max = fileList.length;
-            const sizeInMb = totalSize / 1000 / 1000;
-            window.tooLarge = sizeInMb >= 200;
-            console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
-            window.tooManyFiles = target.files.length > 200;
-            console.log('Total files:', target.files.length, 'too many: ', window.tooManyFiles);
+
+            window.tooManyFiles = fileList.length > maxAmountOfFiles;
+            if (window.tooManyFiles) {
+                errorDiv.style.display = 'block';
+                errorDiv.innerHTML += `Das sind zu viele Dateien, du darfst max. ${maxAmountOfFiles} Dateien gleichzeitig hochladen. `;
+                submitButton.disabled = true;
+                console.warn('Total files:', target.files.length, '. Too many!');
+            }
+
+            window.tooLarge = filesTooLarge.length > 0;
+            if (window.tooLarge) {
+                const names = filesTooLarge.join(', ')
+                errorDiv.style.display = 'block';
+                const pluralizedMessage = filesTooLarge.length > 1 ? 'Die folgenden Dateien sind' : 'Die folgende Datei ist';
+                errorDiv.innerHTML += `${pluralizedMessage} zu groß: ${names}. Jede Datei darf max. ${maxFileSize} MB groß sein.`;
+                submitButton.disabled = true;
+            }
         });
     </script>
     <?php