resolved #2 implemented automatic album selection

.nova/Configuration.json

@@ -1,4 +1,6 @@
 {
   "workspace.art_style" : 0,
-  "workspace.name" : "PhotoPrismUpload"
+  "workspace.name" : "PhotoPrismUpload",
+  "workspace.preview_type" : "custom",
+  "workspace.preview_url" : "http:\/\/phlaym.net\/photoupload\/?token=1g29eaapq6"
 }

config.php.sample

@@ -3,5 +3,7 @@
 return [
   'username' => '',
   'password' => ''
-  'noAlbumToken' => ''
+  'noAlbumToken' => '',
+  'fileUploadLimitMb' => 1024,
+  'maximumNumberOfFilesPerUpload' => 200
 ];

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;
+            grid-auto-columns: minmax(auto, 300px) auto;
-            max-width: 300px;
         }
         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;
@@ -98,40 +98,24 @@ $albums = [];
 try {
     $api->login();
 } catch (\Exception $e) {
-    die('Fehler: ' . $e->getMessage().'</body></html>');
+    die('Fehler: ' . $e->getMessage().$footer.'</body></html>');
 }
 
 if (!isset($_POST['submit'])) {
     if (!isset($_GET['token'])) {
-        die('Sorry, kein Zugriff</body></html>');
+        die('Sorry, kein Zugriff' . $footer . '</body></html>');
     }
     $token = $_GET['token'];
     $tokens = explode(',', $token);
     try {
         $albums = $api->getAlbumsByTokens($tokens);
     } catch (\Exception $e) {
-        die('Fehler: ' . $e->getMessage().'</body></html>');
+        die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
     }
     if (empty($albums) && (empty($config['noAlbumToken']) || !in_array($config['noAlbumToken'], $tokens))) {
-        die('Falscher Token</body></html>');
+        die('Falscher Token' . $footer . '</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">
@@ -139,7 +123,8 @@ if (!isset($_POST['submit'])) {
             <select name="album" id="album">
                 <option value="">---</option>
                 <?php foreach ($albums as $album) {
-                    echo '<option value="' . $album->uid . '">' . $album->title . '</option>\n';
+                    $selected = $album->token === $token ? ' selected' : '';
+                    echo '<option value="' . $album->uid . '"' . $selected . '>' . $album->title . '</option>\n';
                 } ?>
             </select>
             <!--<label></label>
@@ -154,6 +139,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 +161,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,35 +202,55 @@ 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;
+            window.tooManyFiles = fileList.length > maxAmountOfFiles;
-            console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
+            if (window.tooManyFiles) {
-            window.tooManyFiles = target.files.length > 200;
+                errorDiv.style.display = 'block';
-            console.log('Total files:', target.files.length, 'too many: ', window.tooManyFiles);
+                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
-    die($footer.'</body></html>');
+    die($footer . '</body></html>');
 }
 try {
     $api->uploadPhotos($_POST['album']);
 } catch (\Exception $e) {
-    die('Fehler: ' . $e->getMessage().'</body></html>');
+    die('Fehler: ' . $footer . $e->getMessage() .'</body></html>');
 }
 ?>
 Erfolg! <a href=".">Zurück</a>