Skip to main content
Urbicon UI
source

FileUpload

Drag-and-drop file upload with validation, image previews, progress tracking, and animated file list. Supports multiple files, paste from clipboard, and custom dropzone designs.

Dateien hier ablegen oder klicken
Beliebiger Dateityp, max. 10 MB
Loading syntax highlighting...

01 Examples

Einfacher Upload

Einzelne Datei per Drag & Drop oder Klick auswaehlen. Das Ergebnis wird als Dateiliste mit Name, Groesse und Entfernen-Button angezeigt.
Datei hier ablegen oder klicken
Beliebiger Dateityp, max. 10 MB
Loading syntax highlighting...

Mehrere Dateien mit Limit

Mehrfachauswahl mit maxFiles-Begrenzung. Ein Badge zeigt die verbleibenden Slots an. Ueberschuessige Dateien werden per onFileReject-Callback abgelehnt.

Upload documents

5 of 5 available
Drop files here
Up to 5 files at once
Loading syntax highlighting...

Bild-Upload mit Vorschau

Bilder werden automatisch als Thumbnails angezeigt. Unter der Komponente eine eigene Grid-Vorschau mit Overlay-Dateinamen — demonstriert die Kombination aus FileUpload und eigenem Preview-Layout.
Bilder hochladen
PNG, JPG, WebP, GIF, AVIF — max. 5 MB pro Bild
Loading syntax highlighting...

Validierung mit Feedback

Dateityp (.pdf, .docx, .xlsx), maximale Groesse (2 MB) und maximale Anzahl (3) werden validiert. Abgelehnte Dateien erscheinen als Alert mit strukturierten Fehlermeldungen.
Dokumente hochladen
Nur PDF, DOCX, XLSX — max. 2 MB, max. 3 Dateien
Loading syntax highlighting...

Upload-Fortschritt

Simulierter Upload mit Fortschrittsbalken pro Datei. Status-Indikatoren zeigen den Lebenszyklus: pending → uploading → complete/error. Der Consumer steuert den Fortschritt extern.
Dateien zum Upload auswaehlen
Klicke 'Upload starten' nach der Auswahl
Loading syntax highlighting...

Screenshot einfuegen (Paste)

Mit allowPaste koennen Bilder direkt aus der Zwischenablage eingefuegt werden — ideal fuer Screenshots und schnelle Workflows. Ctrl+V / Cmd+V genuegt.
Screenshot einfuegen
Bilder per Ctrl+V / Cmd+V einfuegen oder hier ablegen
Loading syntax highlighting...

Groessen

Drei Groessen (sm, md, lg) beeinflussen Dropzone-Padding, Schriftgroesse, Icon-Groesse und Datei-Items gleichermassen.

sm

Dateien ablegen (sm)
Beliebiger Dateityp

md

Dateien ablegen (md)
Beliebiger Dateityp

lg

Dateien ablegen (lg)
Beliebiger Dateityp
Loading syntax highlighting...

02 Customization

Custom Dropzone Design

Ueber den children-Snippet kann der gesamte Inhalt der Dropzone ersetzt werden. Hier mit Gradient-Hintergrund, eigenem Icon und Call-to-Action-Button — kombiniert mit slotClasses fuer den Rahmen.

Design-Assets hochladen

Bilder und PDFs, max. 8 MB pro Datei

Dateien auswaehlen
Loading syntax highlighting...

03 Accessibility

ARIA & Rollen

Die Dropzone hat role="button" und tabindex="0". Die Dateiliste nutzt role="list" mit aria-live="polite", sodass Screenreader Aenderungen automatisch ankuendigen. Jedes Datei-Item ist ein role="listitem". Der natuerliche <input type="file"> bleibt im DOM (visuell verborgen) fuer maximale Kompatibilitaet.

Keyboard

Enter oder Space auf der Dropzone oeffnet den nativen Dateidialog. Tab navigiert zwischen Dropzone, Datei-Items und Entfernen-Buttons. Fokus-Ringe nutzen focus-visible: fuer reine Keyboard-Sichtbarkeit.

Drag-Zustaende

Das data-state-Attribut auf der Dropzone wechselt zwischen idle, accept und reject — fuer CSS-only Styling im unstyled-Modus. Visuelles Feedback (Farbe, Scale, Schatten) signalisiert gueltiges vs. ungueltiges Drag-Material.

Document Drop Prevention

Standardmaessig aktiv via preventDocumentDrop: Dateien, die ausserhalb der Dropzone fallen gelassen werden, oeffnen nicht den Browser. Das schuetzt vor versehentlicher Navigation und Datenverlust.

04 API Reference

32 props
32 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt