FileDropZone

Playground

Verwende <FileDropZone />, um Dateien per Drag-and-Drop hochzuladen. Biete zusätzlich mit <Button /> eine alternative Möglichkeit an.

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>

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.