---
name: FileUpload
description: Onesown Blazor Komponente FileUpload (Inputs). Verwende diesen Skill wenn du die FileUpload-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# FileUpload

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Inputs  
**Basisklasse:** `FormControlBase`  

Upload-Komponente die Dateien im Browser speichert bis zum expliziten Upload. Ermöglicht akkumulierendes Hinzufügen von Dateien über mehrere Durchsuchen-Aktionen. Bei UploadOnChange="true" wird automatisch nach der Dateiauswahl hochgeladen. WICHTIG – Einbindung in andere Projekte: Der Chunk-Upload überträgt Dateidaten als Base64 über SignalR. Der SignalR-Default (32 KB) reicht dafür nicht aus. In Program.cs muss zwingend folgendes konfiguriert werden: builder.Services.AddRazorComponents() .AddInteractiveServerComponents() .AddHubOptions(o => o.MaximumReceiveMessageSize = 10 * 1024 * 1024); Ohne diese Einstellung bricht SignalR die Verbindung beim Upload größerer Dateien ab.

**Live-Demo:** https://components.schini.com/demo/fileupload  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``AbsolutFilePath`` | ``string`` |  | Absoluter Dateipfad der hochgeladenen Einzeldatei. Für Two-Way-Binding @bind-AbsolutFilePath verwenden. |
| ``AbsolutFilePathChanged`` | ``EventCallback<string>`` |  | EventCallback für Two-Way-Binding mit @bind-AbsolutFilePath (Einzeldatei-Modus). |
| ``AbsolutFilePathExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die Einzeldatei-Property. Wird benötigt für DataAnnotations-Validierung. |
| ``Multiple`` | ``bool`` | ``true`` | Erlaubt die Auswahl mehrerer Dateien gleichzeitig. Standard: true. |
| ``AbsolutFilePaths`` | ``List<string>`` |  | Liste der absoluten Dateipfade der hochgeladenen Dateien (Mehrfach-Modus). Für Two-Way-Binding @bind-AbsolutFilePaths verwenden. |
| ``AbsolutFilePathsChanged`` | ``EventCallback<List<string>>`` |  | EventCallback für Two-Way-Binding mit @bind-AbsolutFilePaths (Mehrfach-Modus). |
| ``AbsolutFilePathsExpression`` | ``Expression<Func<object>>`` |  | LINQ-Expression auf die Mehrfach-Dateipfade-Property. Wird benötigt für DataAnnotations-Validierung. |
| ``OnFilesChanged`` | ``EventCallback`` |  | Wird ausgelöst nachdem sich die Dateiliste geändert hat (Datei hinzugefügt oder entfernt). |
| ``UploadOnChange`` | ``bool`` | ``false`` | Wenn true, wird automatisch nach der Dateiauswahl hochgeladen. Standard: false (manueller Upload() Aufruf erforderlich). |
| ``AbsolutDirectoryPath`` | ``string`` |  | Absoluter Verzeichnispfad auf dem Server in den Dateien hochgeladen werden. |
| ``MaxFileSize`` | ``double`` | ``ByteSize.FromMegaBytes(300).Bytes`` | Maximale Dateigröße in Bytes pro Datei. Standard: 300 MB. |
| ``MaxFiles`` | ``int`` | ``10`` | Maximale Anzahl hochladbarer Dateien. Standard: 10. |
| ``AllowedExtensions`` | ``string`` |  | Erlaubte Dateiendungen als kommagetrennte Liste (z.B. ".pdf,.docx"). Leer = alle Typen erlaubt. |
| ``OnFileUploaded`` | ``EventCallback<string>`` |  | Wird ausgelöst nachdem eine einzelne Datei erfolgreich hochgeladen wurde. Liefert den absoluten Dateipfad. |
| ``OnUploadComplete`` | ``EventCallback<int>`` |  | Wird ausgelöst nachdem alle Dateien hochgeladen wurden. Liefert die Anzahl der hochgeladenen Dateien. |
| ``Required`` | ``bool`` |  | Markiert das Feld als Pflichtfeld: mindestens eine hochgeladene Datei wird für eine gültige Validierung benötigt. |
| ``UploadText`` | ``string`` | ``"Oder legen Sie Dateien hier ab."`` | Anzeigetext der Drop-Zone. Standard: "Oder legen Sie Dateien hier ab." |
| ``ForcedIdValue`` | ``string`` |  | Erzwingt eine feste ID für das interne Input-Element (statt der automatisch generierten ID). |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Einzeldatei: AbsolutFilePath + AbsolutFilePathExpression für eine Datei; @bind-AbsolutFilePath für Two-Way-Binding
- Mehrere Dateien: Multiple="true" + AbsolutFilePaths + AbsolutFilePathsExpression; Standard: true
- Automatischer Upload: UploadOnChange="true" startet Upload sofort nach Dateiauswahl
- Manueller Upload: Upload()-Methode programmatisch aufrufen (Standard-Verhalten)
- Dateifilter: AllowedExtensions=".pdf,.docx" begrenzt auswählbare Dateitypen
- Größe: MaxFileSize in Bytes (Standard: 300 MB); MaxFiles begrenzt Anzahl der Dateien
- Pflichtfeld: Required="true" aktiviert Validierung ob mindestens eine Datei vorhanden ist
- SignalR-Limit: MaximumReceiveMessageSize in Program.cs auf mind. 10 MB setzen