Resolved #3 Added link to selected album

.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,12 +36,12 @@ $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;
             grid-row: 1;
+            align-self: center;
         }
         #album {
             grid-column: 2;
@@ -69,6 +69,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;
@@ -84,6 +85,9 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
             grid-row: 6;
             width: 100%;
         }
+        #viewAlbum {
+            #grid-row: 7;
+        }
         footer {
             margin: 8px;
         }
@@ -98,52 +102,49 @@ $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);
+    $album_url = null;
     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">
             <label for="album">Zu Album hinzufügen</label>
             <select name="album" id="album">
-                <option value="">---</option>
+                <option value="" data-url="/">---</option>
                 <?php foreach ($albums as $album) {
-                    echo '<option value="' . $album->uid . '">' . $album->title . '</option>\n';
-                } ?>
+                    $selected = $album->token === $token ? ' selected' : '';
+                    if ($album->token === $token) {
+                        $album_url = $album->getUrlPath();
+                    }
+                    echo '<option value="'
+                        . $album->uid
+                        . '"'
+                        . $selected
+                        . 'data-url='
+                        . ($album->getUrlPath() ?? '/')
+                        . '>'
+                        . $album->title
+                        . '</option>\n';
+                }
+                $album_url ??= '/';
+                $album_url = "https://photos.phlaym.net{$album_url}";
+                ?>
             </select>
-            <!--<label></label>
-            <input type="text" />!-->
             <input multiple type="file" name="files[]" id="input" required/>
             <input type="submit" name="submit" value="Upload" />
         </form>
@@ -152,8 +153,11 @@ if (!isset($_POST['submit'])) {
         <progress id="fileProgress"></progress>
         <label for="totalProgress">Gesamt:</label>
         <progress max="0" value="0" id="totalProgress"></progress>
+        <a href="<?=$album_url;?>" target="_blank" id="viewAlbum">Album ansehen</a>
     </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]');
@@ -163,6 +167,7 @@ if (!isset($_POST['submit'])) {
         const fileProgressLabel = document.querySelector('label[for=fileProgress]');
         const totalProgressLabel = document.querySelector('label[for=totalProgress]');
         const errorDiv = document.getElementById('error');
+        const albumAnchor = document.getElementById('viewAlbum');
 
         async function postData(url, data = {}, method = 'POST') {
             const response = await fetch(url, {
@@ -172,8 +177,18 @@ if (!isset($_POST['submit'])) {
             return response;
         }
 
+        albumInput.addEventListener('change', (event) => {
+            console.log(event);
+            albumAnchor.href = `https://photos.phlaym.net${albumInput.selectedOptions[0].dataset.url}`;
+        });
+
         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 +225,52 @@ 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
@@ -238,7 +279,7 @@ if (!isset($_POST['submit'])) {
 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>

src/API/PhotoPrism.php

@@ -4,11 +4,27 @@ namespace PhotoPrismUpload\API;
 
 use Monolog\Logger;
 use Monolog\Handler\RotatingFileHandler;
+use Monolog\Handler\HandlerInterface;
 use Psr\Log\LoggerInterface;
 use PhotoPrismUpload\Exceptions\NetworkException;
 use PhotoPrismUpload\Exceptions\AuthenticationException;
 use PhotoPrismUpload\Entities\Album;
 
+class LoggerFactory
+{
+    private static $handlers = [];
+
+    public static function addHandler(HandlerInterface $handler) {
+        self::$handlers[] = $handler;
+    }
+    public static function create(string $name) {
+        $l = new Logger($name);
+        $l->setHandlers(self::$handlers);
+        $l->info('Initialized');
+        return $l;
+    }
+}
+
 class PhotoPrism
 {
     protected string $base_url = 'https://photos.phlaym.net';
@@ -23,12 +39,11 @@ class PhotoPrism
     ) {
         $this->api_url = $this->base_url.'/api/v1';
         $this->config = $config;
-        $this->logger = new Logger('PhotoPrismUpload');
         if (empty($log_path)) {
             $log_path = __DIR__.'/logs/log.log';
         }
-        $handler = new RotatingFileHandler($log_path, 5, Logger::DEBUG, true);
-        $this->logger->pushHandler($handler);
+        LoggerFactory::addHandler(new RotatingFileHandler($log_path, 5, Logger::DEBUG, true));
+        $this->logger = LoggerFactory::create('PhotoPrismUpload');
         if (isset($_SESSION['pp_sessionid'])) {
             $this->session_id = $_SESSION['pp_sessionid'];
         }

src/Entities/Album.php

@@ -2,6 +2,7 @@
 namespace PhotoPrismUpload\Entities;
 
 use Monolog\Logger;
+use PhotoPrismUpload\API\LoggerFactory;
 
 class Album
 {
@@ -16,5 +17,13 @@ class Album
         $this->uid = $response['UID'];
         $this->slug = $response['Slug'];
         $this->title = $response['Title'];
+        $this->logger = LoggerFactory::create('PhotoPrismUpload.Album');
+    }
+
+    public function getUrlPath(): ?string {
+        if (empty($this->token)) {
+            return null;
+        }
+        return "/s/{$this->token}/{$this->slug}";
     }
 }