‍

Components

Integrations

FileDropZone

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

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

    PropertyTypeDescription
    isReadOnly
    boolean
    		Whether the component is read only.
    className
    string
    		The elements class name.
    wrapWith
    ReactElement<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.
    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

    PropertyTypeDescription
    onChange
    FileInputOnChangeHandler
    		Called with the dropped or selected files whenever the selection changes.

    Auf dieser Seite