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

# FileDrop

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

Universeller Wrapper der beliebige Kind-Inhalte zur Drag-&-Drop- und Paste-Zone für Dateien macht. Unterstützt Dateien und Bilder aus der Zwischenablage (Strg+V) sowie per Drag & Drop. Bilder werden als Thumbnails, andere Dateien als Chips dargestellt. Dateidaten werden per Chunking übertragen – kein SignalR-Größenlimit.

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

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``ChildContent`` | ``RenderFragment`` |  | Kind-Inhalt der zur Drop/Paste-Zone wird. |
| ``ThumbnailPosition`` | ``OoFileDropPosition`` | ``OoFileDropPosition.Below`` | Position der Datei-Thumbnails und Chips relativ zum Kind-Inhalt. Below (Standard): unterhalb; Above: oberhalb; None: keine Anzeige. |
| ``AcceptImages`` | ``bool`` | ``true`` | Akzeptiert Bilddateien (image/*) per Paste und Drop. Standard: true. |
| ``AcceptFiles`` | ``bool`` | ``true`` | Akzeptiert Nicht-Bild-Dateien per Paste und Drop. Standard: true. |
| ``AllowedExtensions`` | ``string`` |  | Optionale Whitelist erlaubter Dateiendungen als kommagetrennte Liste (ohne Punkt, Kleinschreibung). Beispiel: "pdf,docx,xlsx". Wenn angegeben, haben AcceptImages und AcceptFiles keine Wirkung mehr – es werden ausschließlich Dateien mit diesen Endungen akzeptiert. Leer (Standard) = alle Dateitypen werden akzeptiert (gefiltert nach AcceptImages / AcceptFiles). |
| ``MaxFileSize`` | ``long`` | ``1000L * 1024 * 1024`` | Maximale Dateigröße in Bytes pro Datei. Dateien die größer sind werden JS-seitig abgelehnt und über gemeldet – es erfolgt kein Chunk-Transfer. Standard: 1000 MB. Auf 0 setzen um das Limit zu deaktivieren. |
| ``OnFilesRejected`` | ``EventCallback<List<string>>`` |  | Wird ausgelöst wenn Dateien wegen Überschreitung von abgelehnt wurden. Liefert eine Liste der abgelehnten Dateinamen. |
| ``Files`` | ``List<DropFile>`` | ``new()`` | Aktuelle Liste aller Dateien (Bilder + sonstige). Unterstützt Two-Way-Binding via @bind-Files. |
| ``FilesChanged`` | ``EventCallback<List<DropFile>>`` |  | EventCallback für Two-Way-Binding. Wird nach jeder Änderung der Dateiliste ausgelöst. |
| ``OnFilesChanged`` | ``EventCallback<List<DropFile>>`` |  | Wird zusätzlich zu ausgelöst wenn sich die Dateiliste ändert. |
| ``EagerLoad`` | ``bool`` | ``true`` | Wenn true (Standard), werden Dateidaten sofort nach dem Drop per Chunking übertragen. Wenn false, werden nur Metadaten empfangen – Bytes erst nach explizitem Aufruf von übertragen. |
| ``ShowBrowseButton`` | ``bool`` | ``false`` | Blendet einen „Durchsuchen"-Button ein der einen nativen Datei-Dialog öffnet. Standard: false. |
| ``BrowseButtonText`` | ``string`` | ``"Durchsuchen"`` | Beschriftung des Durchsuchen-Buttons. Standard: „Durchsuchen". |
| ``BrowseMultiple`` | ``bool`` | ``true`` | Erlaubt die Auswahl mehrerer Dateien über den Durchsuchen-Dialog. Standard: true. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | 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. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Dateien empfangen: <c>@bind-Files</c> oder <c>OnFilesChanged</c>
- Nur Bilder: <c>AcceptImages="true" AcceptFiles="false"</c>
- Nur Dateien (keine Bilder): <c>AcceptImages="false" AcceptFiles="true"</c>
- Position der Thumbnails/Chips: <c>ThumbnailPosition="OoFileDropPosition.Below"</c> (Standard)
- Größenlimit: <c>MaxFileSize</c> in Bytes – zu große Dateien werden JS-seitig abgelehnt und über <c>OnFilesRejected</c> gemeldet
- Kein SignalR-Limit: Dateidaten werden in 1 MB Chunks übertragen