Re-added php 7.4 compatibility

composer.json

@@ -1,7 +1,13 @@
 {
   "require": {
-    "monolog/monolog": "^2.3"
+    "monolog/monolog": "^2.3",
+    "php": "^7.2 || ^8.0"
   },
+  "config": {
+      "platform": {
+        "php": "7.4.1"
+      }
+    },
   "autoload": {
     "psr-4": {"PhotoPrismUpload\\": "src"}
   }

composer.lock

@@ -4,28 +4,28 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a2eae41321c2d6bf3b57063bb8fe8c3b",
+    "content-hash": "76e9fca30f4b93057e0d8f62a47f2010",
     "packages": [
         {
             "name": "monolog/monolog",
-            "version": "2.3.2",
+            "version": "2.3.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Seldaek/monolog.git",
-                "reference": "71312564759a7db5b789296369c1a264efc43aad"
+                "reference": "fd4380d6fc37626e2f799f29d91195040137eba9"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/71312564759a7db5b789296369c1a264efc43aad",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/fd4380d6fc37626e2f799f29d91195040137eba9",
-                "reference": "71312564759a7db5b789296369c1a264efc43aad",
+                "reference": "fd4380d6fc37626e2f799f29d91195040137eba9",
                 "shasum": ""
             },
             "require": {
                 "php": ">=7.2",
-                "psr/log": "^1.0.1"
+                "psr/log": "^1.0.1 || ^2.0 || ^3.0"
             },
             "provide": {
-                "psr/log-implementation": "1.0.0"
+                "psr/log-implementation": "1.0.0 || 2.0.0 || 3.0.0"
             },
             "require-dev": {
                 "aws/aws-sdk-php": "^2.4.9 || ^3.0",
@@ -33,14 +33,14 @@
                 "elasticsearch/elasticsearch": "^7",
                 "graylog2/gelf-php": "^1.4.2",
                 "mongodb/mongodb": "^1.8",
-                "php-amqplib/php-amqplib": "~2.4",
+                "php-amqplib/php-amqplib": "~2.4 || ^3",
                 "php-console/php-console": "^3.1.3",
                 "phpspec/prophecy": "^1.6.1",
                 "phpstan/phpstan": "^0.12.91",
                 "phpunit/phpunit": "^8.5",
                 "predis/predis": "^1.1",
                 "rollbar/rollbar": "^1.3",
-                "ruflin/elastica": ">=0.90 <7.0.1",
+                "ruflin/elastica": ">=0.90@dev",
                 "swiftmailer/swiftmailer": "^5.3|^6.0"
             },
             "suggest": {
@@ -48,8 +48,11 @@
                 "doctrine/couchdb": "Allow sending log messages to a CouchDB server",
                 "elasticsearch/elasticsearch": "Allow sending log messages to an Elasticsearch server via official client",
                 "ext-amqp": "Allow sending log messages to an AMQP server (1.0+ required)",
+                "ext-curl": "Required to send log messages using the IFTTTHandler, the LogglyHandler, the SendGridHandler, the SlackWebhookHandler or the TelegramBotHandler",
                 "ext-mbstring": "Allow to work properly with unicode symbols",
                 "ext-mongodb": "Allow sending log messages to a MongoDB server (via driver)",
+                "ext-openssl": "Required to send log messages using SSL",
+                "ext-sockets": "Allow sending log messages to a Syslog server (via UDP driver)",
                 "graylog2/gelf-php": "Allow sending log messages to a GrayLog2 server",
                 "mongodb/mongodb": "Allow sending log messages to a MongoDB server (via library)",
                 "php-amqplib/php-amqplib": "Allow sending log messages to an AMQP server using php-amqplib",
@@ -88,7 +91,7 @@
             ],
             "support": {
                 "issues": "https://github.com/Seldaek/monolog/issues",
-                "source": "https://github.com/Seldaek/monolog/tree/2.3.2"
+                "source": "https://github.com/Seldaek/monolog/tree/2.3.5"
             },
             "funding": [
                 {
@@ -100,7 +103,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2021-07-23T07:42:52+00:00"
+            "time": "2021-10-01T21:08:31+00:00"
         },
         {
             "name": "psr/log",
@@ -159,7 +162,12 @@
     "stability-flags": [],
     "prefer-stable": false,
     "prefer-lowest": false,
-    "platform": [],
+    "platform": {
+        "php": "^7.2 || ^8.0"
+    },
     "platform-dev": [],
-    "plugin-api-version": "2.0.0"
+    "platform-overrides": {
+        "php": "7.4.1"
+    },
+    "plugin-api-version": "2.1.0"
 }

index.php

@@ -3,11 +3,36 @@ session_start();
 require __DIR__ . '/vendor/autoload.php';
 
 use PhotoPrismUpload\API\PhotoPrism;
-
+$footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>';
 ?>
 <html>
     <head>
+        <meta charset="UTF-8">
+        <meta name="color-scheme" content="dark light">
+        <title>Photoprism Upload</title>
+        <meta name="description" content="Eine Seite um Photos zur Photoprism Instanz hochzuladen">
+        <meta name="author" content="Max Nuding">
+        <meta http-equiv="robots" content="noindex,nofollow">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv=”content-language” content=”de-de”/>
     <style>
+        ::root {
+            background-color: white;
+            color: black;
+            color-scheme: light dark;
+        }
+        @media screen and (prefers-color-scheme: dark) {
+            :root {
+                background-color: rgb(54, 54, 54);
+                color: white;
+            }
+            a {
+                color: rgb(105, 105, 242);
+            }
+            a:visited {
+                color: rgb(152, 95, 215);
+            }
+        }
         .form-wrapper {
             display: grid;
             grid-template-rows: auto auto auto;
@@ -30,9 +55,37 @@ use PhotoPrismUpload\API\PhotoPrism;
             display: inherit;
         }
         input[type=submit] {
-            grid-column: 1/3;
+            grid-column: 2;
             grid-row: 3;
-            justify-self: center;
+            justify-self: right;
+        }
+        #error, #fileProgress, #totalProgress, label[for="fileProgress"], label[for="totalProgress"] {
+            display:none;
+            grid-column: 1;
+        }
+        #uploadForm {
+            grid-row: 1;
+            grid-column: 1;
+        }
+        #error {
+            grid-row: 2;
+        }
+        label[for="fileProgress"] {
+            grid-row: 3;
+        }
+        #fileProgress {
+            grid-row: 4;
+            width: 100%;
+        }
+        label[for="totalProgress"]{
+            grid-row: 5;
+        }
+        #totalProgress {
+            grid-row: 6;
+            width: 100%;
+        }
+        footer {
+            margin: 8px;
         }
     </style>
     </head>
@@ -70,7 +123,7 @@ if (!isset($_POST['submit'])) {
             const isInvalid = window.tooLarge || window.tooManyFiles;
             console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
             if (isInvalid) {
-                const errorDiv = document.getElementById('error');m
+                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. ' : '';
@@ -80,7 +133,8 @@ if (!isset($_POST['submit'])) {
         }
     </script>
     <div class="form-wrapper">
-        <form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();">
+        <!--<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>
@@ -93,23 +147,84 @@ if (!isset($_POST['submit'])) {
             <input multiple type="file" name="files[]" id="input" required/>
             <input type="submit" name="submit" value="Upload" />
         </form>
-        <div id="error" style="display:none"></div>
+        <div id="error"></div>
+        <label for="fileProgress">Datei:</label>
+        <progress id="fileProgress"></progress>
+        <label for="totalProgress">Gesamt:</label>
+        <progress max="0" value="0" id="totalProgress"></progress>
     </div>
     <script>
-        const input = document.getElementById('input')
+        const form = document.getElementById('uploadForm');
+        const submitButton = form.querySelector('input[type=submit]');
+        const albumInput = form.querySelector('select[name=album]');
+        const input = document.getElementById('input');
+        const fileProgress = document.getElementById('fileProgress');
+        const totalProgress = document.getElementById('totalProgress');
+        const fileProgressLabel = document.querySelector('label[for=fileProgress]');
+        const totalProgressLabel = document.querySelector('label[for=totalProgress]');
+        const errorDiv = document.getElementById('error');
 
+        async function postData(url, data = {}, method = 'POST') {
+            const response = await fetch(url, {
+                method: method,
+                body: data
+            });
+            return response;
+        }
+
+        form.addEventListener('submit', async function(event) {
+            event.preventDefault();
+            errorDiv.innerText = '';
+
+            fileProgressLabel.style.display = 'inherit';
+            totalProgressLabel.style.display = 'inherit';
+            fileProgress.style.display = 'inherit';
+            totalProgress.style.display = 'inherit';
+
+            let idx = 0;
+            for (file of fileList) {
+                console.log('Starting upload', file);
+
+                fileProgressLabel.innerText = `Datei: ${file.name}`
+                totalProgressLabel.innerText = `Gesamt: ${idx} von ${fileList.length} fertig`;
+                totalProgress.value = idx++;
+
+                let formData = new FormData();
+                formData.set(input.name, file);
+                formData.set(submitButton.name, submitButton.value);
+                formData.set(albumInput.name, albumInput.value);
+                try {
+                    let resp = await postData(form.action, formData, form.method);
+                } catch(e) {
+                    console.error('Error uploading file', e);
+                    errorDiv.innerHTML += `Fehler beim Upload der Datei ${file.name}: ${e}<br />`;
+                    errorDiv.style.display = 'block';
+                }
+            }
+            totalProgressLabel.innerText = `Gesamt: ${idx} von ${fileList.length} fertig`;
+            totalProgress.value = idx++;
+            fileProgress.max = 1;
+            fileProgress.value = 1;
+        });
+
+
+        let fileList = [];
         input.addEventListener('change', (event) => {
             const errorDiv = document.getElementById('error');
+            const totalProgress = document.getElementById('totalProgress');
             errorDiv.innerText = '';
             errorDiv.style.display = 'none';
 
             const target = event.target;
             let totalSize = 0;
+            fileList = [];
             if (target.files) {
                 for (file of target.files) {
                     totalSize += file.size;
+                    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);
@@ -118,7 +233,7 @@ if (!isset($_POST['submit'])) {
         });
     </script>
     <?php
-    die('</body></html>');
+    die($footer.'</body></html>');
 }
 try {
     $api->uploadPhotos($_POST['album']);