FileDropZone

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

Grundlagen

Kombiniere die FileDropZone mit der FileCard, um einzelne hochgeladene Dateien darzustellen, oder mit der FileCardList, um mehrere hochgeladene Dateien darzustellen.

Best Practices

Achte bei der Verwendung einer FileDropZone darauf, dass ...

immer eine alternative Upload-Möglichkeit über einen Button vorhanden ist.
die zulässigen Dateitypen und ggf. Größenbeschränkungen deutlich kommuniziert werden.
Fehlermeldungen klar und hilfreich formuliert sind.
die hochgeladenen Dateien übersichtlich durch die FileCard oder FileCardList dargestellt werden.

Verwendung

Verwende eine FileDropZone, um eine oder mehrere Dateien gleichzeitig hochladen zu können.

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>
      <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. Beim erneuten Hochladen werden bestehende Dateien ersetzt. Ein Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im Codesnippet Multi Upload.

Dateien ablegen

Properties

Property	Type	Default	Description
`isReadOnly`	`boolean`	-	Whether the component is read only.
`className`	`string`	-	The elements class name.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-
`children`	`ReactNode`	-
`name`	`string`	-
`accept`	`string`	-
`multiple`	`boolean`	-
`isDisabled`	`boolean`	-	Whether the drop target is disabled. If true, the drop target will not accept any drops.

Events

Property	Type	Default	Description
`onChange`	`FileInputOnChangeHandler`	-