feat: gewaehlte Logo-Datei im Formular anzeigen

Ein Neuladen der Willkommensseite - etwa beim Wechsel des Standorts -
leert alle <input type="file">. Die zuvor gewaehlte Datei ist damit weg,
ohne dass es auffaellt, und das Absenden erzeugt eine Willkommensseite
ohne das hochgeladene Logo.

Unter jedem Datei-Feld steht jetzt "Keine Datei gewählt" bzw. nach der
Auswahl Name und Groesse der Datei. Damit ist vor dem Absenden
erkennbar, ob wirklich etwas angehaengt ist.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
2026-09-02 16:01:35 +02:00
parent 556ccb211a
commit 7f9a1632b3

View File

@@ -154,8 +154,10 @@
placeholder="{{ slots[i][1] }}">{{ contacts[i] if contacts else '' }}</textarea>
<label class="form-label mt-2" for="logo_file_{{ i + 1 }}">Logo hochladen (optional)</label>
<input type="file" class="form-control" id="logo_file_{{ i + 1 }}"
name="logo_file_{{ i + 1 }}" accept="image/*">
<input type="file" class="form-control logo-datei" id="logo_file_{{ i + 1 }}"
name="logo_file_{{ i + 1 }}" accept="image/*"
data-status="logo_status_{{ i + 1 }}">
<div class="form-hint" id="logo_status_{{ i + 1 }}">Keine Datei gewählt</div>
<div class="form-check mt-1">
<input class="form-check-input" type="checkbox"
id="logo_keep_bg_{{ i + 1 }}" name="logo_keep_bg_{{ i + 1 }}">
@@ -247,5 +249,23 @@
{% include "_footer.html" %}
</div> <!-- /page -->
<script>
/* Gewaehlte Logo-Datei sichtbar machen. Ein Neuladen der Seite - etwa beim
Wechsel des Standorts - leert Datei-Felder, ohne dass man es bemerkt. */
document.querySelectorAll(".logo-datei").forEach(function (feld) {
var status = document.getElementById(feld.dataset.status);
feld.addEventListener("change", function () {
if (feld.files && feld.files.length) {
var kb = Math.round(feld.files[0].size / 1024);
status.textContent = "Gewählt: " + feld.files[0].name + " (" + kb + " KB)";
status.className = "form-hint text-success";
} else {
status.textContent = "Keine Datei gewählt";
status.className = "form-hint";
}
});
});
</script>
</body>
</html>