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:
@@ -154,8 +154,10 @@
|
|||||||
placeholder="{{ slots[i][1] }}">{{ contacts[i] if contacts else '' }}</textarea>
|
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>
|
<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 }}"
|
<input type="file" class="form-control logo-datei" id="logo_file_{{ i + 1 }}"
|
||||||
name="logo_file_{{ i + 1 }}" accept="image/*">
|
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">
|
<div class="form-check mt-1">
|
||||||
<input class="form-check-input" type="checkbox"
|
<input class="form-check-input" type="checkbox"
|
||||||
id="logo_keep_bg_{{ i + 1 }}" name="logo_keep_bg_{{ i + 1 }}">
|
id="logo_keep_bg_{{ i + 1 }}" name="logo_keep_bg_{{ i + 1 }}">
|
||||||
@@ -247,5 +249,23 @@
|
|||||||
{% include "_footer.html" %}
|
{% include "_footer.html" %}
|
||||||
</div> <!-- /page -->
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user