Sequential file upload

index.php

@@ -30,9 +30,35 @@ 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%;
         }
     </style>
     </head>
@@ -70,7 +96,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 +106,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 +120,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);
@@ -127,4 +215,4 @@ try {
 }
 ?>
 Erfolg! <a href=".">Zurück</a>
-</body></html>
+</body></html>