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
      name="file"
      onChange={(files) => console.log(files)}
    >
      <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. Wenn Dateien nacheinander hochgeladen werden sollen, kombiniere die FileDropZone mit der FileCardList.

Kombinieren mit...

FileCardList

Wenn User Dateien nach dem Hochladen hinzufügen und auch wieder entfernen sollen, kombiniere die FileDropZone mit der FileCardList. Die FileCardList zeigt die zwischengespeicherten Dateien.