mittwald Flow Logo

Components

FileDropZone

Die FileDropZone ermöglicht das Hochladen von Dateien per Drag-and-Drop oder durch manuelle Auswahl.GitHub

Datei ablegen

Playground

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

Datei ablegen

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.

Bild ablegen

Es sind nur Bilder vom Typ image/png erlaubt.

Mehrere Dateien

Über die Property multiple wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht.

Dateien ablegen

Overview