FileDropZone
Die FileDropZone ermöglicht das Hochladen von Dateien per Drag-and-Drop oder durch manuelle Auswahl.import { Button, FileDropZone, FileField, Heading, IconUpload, Section, } from "@mittwald/flow-react-components"; <Section> <FileDropZone onChange={(files) => console.log(files)}> <IconUpload /> <Heading>Datei ablegen</Heading> <FileField> <Button>Datei auswählen</Button> </FileField> </FileDropZone> </Section>
Best Practices
- Biete immer eine alternative Upload-Möglichkeit über einen Button.
- Kommuniziere zulässige Dateitypen und mögliche Größenbeschränkungen deutlich.
- Formuliere Fehlermeldungen klar und hilfreich.
Vorgegebene Dateitypen
Verwende <Text />, um den User über erlaubte Dateitypen und maximale
Dateigrößen beim Hochladen zu informieren.
Mehrere Dateien
Über die Property multiple wird das gleichzeitige Hochladen mehrerer Dateien
ermöglicht. Beim erneuten Hochladen werden bestehende Dateien ersetzt. Ein
Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im
Codesnippet Multi Upload.
Kombiniere mit ...
FileCardList
Stelle die hochgeladenen Dateien übersichtlich mit einer FileCardList dar – für eine einzelne Datei genügt eine FileCard.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | |
className | string | - | The elements class name. |
isDisabled | boolean | - | Whether the drop target is disabled. If true, the drop target will not accept any drops. |
isReadOnly | boolean | - | Whether the component is read only. |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
Events
| Property | Type | Default | Description |
|---|---|---|---|
onChange | FileInputOnChangeHandler | - | Called with the dropped or selected files whenever the selection changes. |