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?

Noch keine Stimmen abgegeben
Noch keine Kommentare
  • 9 Okt. 2019

    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)

    Noch keine Stimmen abgegeben
    Noch keine Kommentare