Viele neue Features

backend/templates/upload.html

@@ -5,9 +5,73 @@
   <form method="post" enctype="multipart/form-data" class="form-grid">
     <label>
       {{ t('file') }}
-      <input type="file" name="photo" accept=".jpg,.jpeg,.png" required />
+      <input id="photo-input" type="file" name="photo" accept="image/jpeg,image/png,image/jpg,image/heic,image/heif,.heic,.heif" multiple />
     </label>
+    <p class="upload-hint">{{ t('upload_multi_hint') }}</p>
+    <div id="extra-file-inputs"></div>
+    <button id="add-file-input" class="btn btn-ghost" type="button">{{ t('add_more_files') }}</button>
+    <p id="upload-selected-count" class="upload-count"></p>
+    <ul id="upload-file-list" class="upload-file-list"></ul>
     <button class="btn" type="submit">{{ t('upload_submit') }}</button>
   </form>
 </section>
+
+<script>
+  (() => {
+    const addBtn = document.getElementById("add-file-input");
+    const extraInputs = document.getElementById("extra-file-inputs");
+    const countEl = document.getElementById("upload-selected-count");
+    const listEl = document.getElementById("upload-file-list");
+    const countTpl = {{ t('upload_selected_count')|tojson }};
+
+    const allInputs = () => Array.from(document.querySelectorAll('input[name="photo"]'));
+
+    const createExtraInput = () => {
+      const wrapper = document.createElement("label");
+      wrapper.className = "extra-file-input";
+      wrapper.textContent = {{ t('file')|tojson }};
+
+      const input = document.createElement("input");
+      input.type = "file";
+      input.name = "photo";
+      input.accept = "image/jpeg,image/png,image/jpg,image/heic,image/heif,.heic,.heif";
+      input.required = false;
+      input.addEventListener("change", renderSelection);
+
+      wrapper.appendChild(input);
+      extraInputs.appendChild(wrapper);
+    };
+
+    const renderSelection = () => {
+      const names = [];
+      allInputs().forEach((input) => {
+        Array.from(input.files || []).forEach((file) => names.push(file.name));
+      });
+
+      if (!names.length) {
+        countEl.textContent = "";
+        listEl.innerHTML = "";
+        return;
+      }
+
+      countEl.textContent = countTpl.replace("{count}", String(names.length));
+      listEl.innerHTML = "";
+      names.slice(0, 20).forEach((name) => {
+        const item = document.createElement("li");
+        item.textContent = name;
+        listEl.appendChild(item);
+      });
+      if (names.length > 20) {
+        const more = document.createElement("li");
+        more.textContent = `+ ${names.length - 20} weitere`;
+        listEl.appendChild(more);
+      }
+    };
+
+    allInputs().forEach((input) => input.addEventListener("change", renderSelection));
+    addBtn.addEventListener("click", () => {
+      createExtraInput();
+    });
+  })();
+</script>
 {% endblock %}