Zuletzt aktualisiert: 11. September

Datei-Uploads in Angular: ein umfassender Leitfaden

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande ·

Datei-Uploads sind in vielen Webanwendungen eine zentrale Funktion, denn sie ermöglichen es Nutzern, Dokumente, Bilder und andere Medien zu teilen. In diesem umfassenden Leitfaden betrachten wir robuste Datei-Upload-Funktionalität in Angular-Anwendungen – von einfachen Umsetzungen bis zu fortgeschrittenen Techniken und bewährten Verfahren. Das einfache Beispiel verwendet das NgModule-Setup aus Angular 14–17. Die optionale Uppy-Integration hat eigene Versionsanforderungen, die weiter unten beschrieben werden.

Erforderliche Einrichtung

Registrieren Sie in einer bestehenden Angular-17-Anwendung, die mit ng new upload-demo --no-standalone erstellt wurde, die untenstehende Komponente und HttpClientModule in app.module.ts. Fügen Sie <app-file-upload></app-file-upload> zu app.component.html hinzu:

import { HttpClientModule } from '@angular/common/http'
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { FileUploadComponent } from './file-upload/file-upload.component'

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent, FileUploadComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Folgen Sie bei einer neueren Standalone-Anwendung Angulars Anleitung zur HTTP-Einrichtung. Der Upload-Fortschritt erfordert das XHR-Backend; Angulars Fetch-Backend gibt keine Ereignisse zum Upload-Fortschritt aus. Der unten stehende Endpunkt /upload muss ein Multipart-Feld namens file akzeptieren und erst nach der Annahme der Datei eine erfolgreiche HTTP-Antwort zurückgeben. Implementieren Sie diesen Server-Endpunkt separat.

Grundlagen von Datei-Uploads in Angular verstehen

Bevor wir uns den Implementierungsdetails widmen, ist es wichtig, die Kernkonzepte von Datei-Uploads in Angular zu verstehen.

Die HTML5 File API

Angular nutzt die HTML5 File API, die einen standardisierten Weg bietet, in Webanwendungen mit Dateien zu arbeiten. Diese API ermöglicht es uns, Dateiinformationen und -inhalte direkt im Browser abzurufen.

Angulars Forms-Modul

Das Change-Event des nativen File-Inputs liefert die getroffene Auswahl als File. Dieses Beispiel benötigt FormsModule nicht; fügen Sie es hinzu, wenn Ihr umgebendes Formular Direktiven wie ngModel verwendet.

Einfache Datei-Uploads implementieren

Beginnen wir mit einer einfachen Implementierung von Datei-Uploads in Angular.

Das HTML-Template einrichten

Erstellen Sie zunächst ein einfaches HTML-Template mit einem File-Input und einer Schaltfläche, die den Upload auslöst:

<div class="upload-container">
  <input type="file" [disabled]="isUploading" (change)="onFileSelected($event)" accept=".jpg,.jpeg,.png,.pdf" />
  <button [disabled]="!selectedFile || isUploading" (click)="onUpload()">Upload</button>
  <div *ngIf="uploadProgress > 0" class="progress">Upload Progress: {{uploadProgress}}%</div>
</div>

Dateiauswahl in der Komponente verarbeiten

Speichern Sie diese Komponente als file-upload/file-upload.component.ts und das vorangehende Template als file-upload/file-upload.component.html. Prüfungen des Dateityps verbessern die Rückmeldung bei der Auswahl; der Server muss den tatsächlichen Dateiinhalt und die Dateigröße unabhängig davon validieren.

import { HttpClient, HttpEventType } from '@angular/common/http'
import { Component } from '@angular/core'

@Component({
  selector: 'app-file-upload',
  standalone: false,
  templateUrl: './file-upload.component.html',
})
export class FileUploadComponent {
  selectedFile: File | null = null
  uploadProgress = 0
  isUploading = false
  private allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const input = event.target
    if (!(input instanceof HTMLInputElement)) return
    const file = input.files?.[0]
    this.uploadProgress = 0

    if (file && this.allowedTypes.includes(file.type)) {
      this.selectedFile = file
    } else {
      alert('Please select a valid file type (JPEG, PNG, or PDF)')
      input.value = ''
      this.selectedFile = null
    }
  }

  onUpload(): void {
    if (this.selectedFile && !this.isUploading) {
      this.isUploading = true
      this.uploadProgress = 0
      const formData = new FormData()
      formData.append('file', this.selectedFile)

      this.http
        .post('/upload', formData, {
          reportProgress: true,
          observe: 'events',
        })
        .subscribe({
          next: (event) => {
            if (event.type === HttpEventType.UploadProgress) {
              this.uploadProgress = event.total != null && event.total > 0
                ? Math.round(100 * event.loaded / event.total)
                : 0
            } else if (event.type === HttpEventType.Response) {
              console.log('Upload complete')
              this.selectedFile = null
              this.isUploading = false
              this.uploadProgress = 100
            }
          },
          error: () => {
            console.error('Upload failed; please try again later.')
            this.uploadProgress = 0
            this.isUploading = false
          },
        })
    }
  }
}

Bewährte Verfahren für Datei-Uploads in Angular

Damit Datei-Uploads reibungslos und sicher ablaufen, sollten Sie die folgenden bewährten Verfahren berücksichtigen:

Dateitypen und -größen validieren: Implementieren Sie clientseitige Prüfungen, um Uploads nicht unterstützter Dateitypen oder von Dateien, die Größenbeschränkungen überschreiten, zu verhindern.
Chunked Uploads verwenden: Implementieren Sie für größere Dateien Chunked Uploads, um Performance und Zuverlässigkeit zu steigern.
Retry-Logik implementieren: Ergänzen Sie Retry-Mechanismen für fehlgeschlagene Uploads, um Netzwerkprobleme elegant abzufangen.
Endpunkte absichern: Stellen Sie sicher, dass serverseitige Upload-Endpunkte eingehende Dateien angemessen validieren.
Auf Performance optimieren: Nutzen Sie Techniken wie Komprimierung und Lazy Loading, um die Performance der Anwendung zu verbessern.
Klares Feedback geben: Halten Sie Nutzer mit Fortschrittsanzeigen und klaren Fehlermeldungen über den Upload-Status auf dem Laufenden.
Mehrere Datei-Uploads handhaben: Ermöglichen Sie die Verwaltung mehrerer Dateiauswahlen und gleichzeitiger Uploads.

Uppy mit Angular verwenden

Folgen Sie für eine fortgeschrittene Datei-Upload-Lösung der offiziellen Anleitung zur Uppy-Angular-Integration. Stand September 2026 unterstützt der aktuelle Wrapper Angular 17–22 und ist damit keine Drop-in-Abhängigkeit für Angular 14–16. Gleichen Sie die Peer-Abhängigkeiten von Angular-Wrapper, Uppy Core und UI-Plugin ab, bevor Sie sie installieren. Die Anleitung dokumentiert UppyAngularDashboardModule, dessen Template-Binding und die Styles; ergänzen Sie ein Uploader-Plugin wie Tus oder XHRUpload, um die ausgewählten Dateien an Ihren Server zu senden.

Fazit

Datei-Uploads effektiv zu handhaben ist entscheidend für robuste und benutzerfreundliche Webanwendungen. Wenn Sie die Grundlagen verstehen, fortgeschrittene Techniken einsetzen und bewährte Verfahren befolgen, schaffen Sie ein nahtloses Upload-Erlebnis in Ihren Angular-Anwendungen. Für fortgeschrittene Funktionen lohnt sich ein Blick auf spezialisierte Bibliotheken wie Uppy. Viel Spaß beim Programmieren!