Gleiche Datei kann nicht zweimal hochgeladen werden

Ich habe eine Applikation mit Angular 7 und SpringBoot mit einer Komponente um Dateien hochzuladen. Das Hochladen funktioniert auch ohne Probleme, allerdings bin ich nicht in der Lage eine Datei wiederholt hochzuladen.

Die UI besteht aus einem Input "file", das mit display:none ausgeblendet ist:

<input type="file" #fileUpload style="display: none" (change)="onFileAdded()" accept=".png"/>
<button class="btn" (click)="fileUpload.nativeElement.click()">Bild hochladen</button>

In der Komponente wird der onFileAdded Handler beim erneuten Hochladen der gleichen Datei nicht aufgerufen:

@ViewChild('fileUpload', { static: false }) fileInput: ElementRef;
    // ... 

onFileAdded() {
    const file: File = this.fileInput.nativeElement.files[0];
    console.log(file);
    // ... Wird nicht aufgerufen beim zweiten Mal
}

Das Hochladen funktioniert auch, wenn man eine andere Datei hochladen möchte. Woran kann das liegen und wie kann ich das beheben?

Alle Kommentare
matthias Okt 9 (22:44)

Da die gleiche Datei hochgeladen wird, spring der Change-Listener onFileAdded nicht an (ist ja keine Änderung mehr). Damit das wieder funktioniert, muss man das Feld einfach "reseten" mit:

onFileAdded() {
    const file: File = this.fileInput.nativeElement.files[0];
    // ... Jetzt die Datei hochladen...
    this.fileInput.nativeElement.value = '';
}

Oder mit plain JavaScript:

document.getElementById("FELD_ID").value = "";

(das ist natürlich für Angular nicht der beste Weg)

0 0 0
Noch keine Stimmen abgegeben
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.