Components

Integrations

FileDropZone

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

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>

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.

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

Kombiniere mit ...

FileCardList

Stelle die hochgeladenen Dateien übersichtlich mit einer FileCardList dar – für eine einzelne Datei genügt eine FileCard.

Dateien ablegen

    Properties

    PropertyTypeDefaultDescription
    isReadOnlyboolean-Whether the component is read only.
    classNamestring-The elements class name.
    wrapWithReactElement<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.
    refRef<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
    keyKey-
    childrenReactNode-
    namestring-
    acceptstring-
    multipleboolean-
    isDisabledboolean-Whether the drop target is disabled. If true, the drop target will not accept any drops.

    Events

    PropertyTypeDefaultDescription
    onChangeFileInputOnChangeHandler-Called with the dropped or selected files whenever the selection changes.

    Auf dieser Seite