Hallo,
ich nutze die Formularelemente für File- und Imageupload. Die beiden haben eine - wie ich finde - tückische und ärgerliche Lücke für Benutzer. Ist erstmal eine Datei ausgewählt, kann man diese nur dadurch entfernen, dass man das ganze Formular neu lädt und somit auch andere Formulareelemente wieder neu aufüllen muss.
In meiner Einfalt habe ich gedacht, dass das mit ein wenig js zu umgehen sein sollte, habe aber nicht alle Schwierigkeiten bedacht. Mein js
document.addEventListener('DOMContentLoaded', function () {
const fileInputs = document.querySelectorAll('.fileuploadclass');
fileInputs.forEach(function (fileInput) {
const container = fileInput.closest('.fileupload-wrapper') || fileInput.parentElement;
const preview = container.querySelector('.fileupload-preview');
const clearButton = container.querySelector('.fileupload-clear');
function updateUI() {
if (fileInput.files.length > 0) {
// Vorschau anzeigen
preview.textContent = fileInput.files[0].name;
preview.classList.remove('d-none');
// Button anzeigen
clearButton.classList.remove('d-none');
} else {
// Vorschau verstecken
preview.textContent = '';
preview.classList.add('d-none');
// Button verstecken
clearButton.classList.add('d-none');
}
}
fileInput.addEventListener('change', updateUI);
if (clearButton) {
clearButton.addEventListener('click', function () {
fileInput.value = ''; // Auswahl zurücksetzen
updateUI();
});
}
// Initialzustand prüfen (z. B. wenn eine Datei vorher geladen war)
updateUI();
});
});
Leider klappt das nur so lange gut, bis ich ein mehrseitiges Formular oder eine Summery-Page habe. Navigiere ich von der Seite weg und dann wieder hin, ist die Datei nicht mehr zu löschen und es wird gar nicht angezeigt, dass bereits eine ausgewählt wurde.
Eine Ext., die das Upload-Problem löst, habe ich nicht gefunden. Vielleicht hat ja jemend von euch einen Tipp, wie man das hinbekommt.
Schon mal Dank für gute Tipps