FileField

Das FileField stellt eine kompakte Lösung dar, um Uploads von Dateien zu ermöglichen.
GitHubMarkdown

Grundlagen

Das FileField ermöglicht den manuellen Upload einer Datei über eine kompakte Button-Darstellung. Wenn genügend Platz vorhanden ist und Drag-and-Drop gewünscht wird, sollte stattdessen die FileDropZone eingesetzt werden.

Best Practices

Achte bei der Verwendung eines FileFields darauf, dass ...

  • ein aussagekräftiges Label vorhanden ist, falls das FileField sonst nicht eindeutig verständlich wäre.
  • die zulässigen Dateitypen und ggf. Größenbeschränkungen deutlich kommuniziert werden.
  • hochgeladene Dateien übersichtlich dargestellt werden – z. B. als FileCard oder FileCardList.
  • Fehlermeldungen klar und hilfreich formuliert sind.

Verwendung

Verwende ein FileField, um einen kompakten Upload-Button in der Benutzeroberfläche bereitzustellen.

Playground

Verwende <FileField />, um ein FileField darzustellen. Innerhalb des FileFields kommen die Components Label und Button zum Einsatz.

import {
  Button,
  FileField,
  Label,
} from "@mittwald/flow-react-components";

<FileField>
  <Label>Zertifikat</Label>
  <Button variant="outline" color="secondary">
    Auswählen
  </Button>
</FileField>

Disabled

Ist das FileField disabled, ist keine Interaktion möglich. Sobald die Ursache behoben ist, kann es wieder wie gewohnt verwendet werden.

Mit FieldDescription

Um wichtige Hinweise zum FileField bereitzustellen, kann unterhalb eine <FieldDescription /> eingebaut werden. In vielen Fällen empfiehlt es sich, die erlaubten Dateitypen dort anzugeben.

Erlaubte Dateitypen sind .jpeg und .png

Invalid

Bei ungültiger Eingabe wird das FileField invalidiert. Über <FieldError /> kann eine entsprechende Fehlermeldung ausgegeben werden.

Wir konnten das Zertifikat nicht hochladen. Bitte verwende eine .txt-Datei.

Mehere Dateien

Über die Property multiple wird das gleichzeitige Hochladen mehrerer Dateien ermöglicht. Beim erneutem Hochladen werden bestehende Dateien ersetzt. Ein Beispiel für das Hochladen und Verwalten mehrerer Dateien findest du im Codesnippet Multi Upload.

Ausgewählte Dateien-

Kombiniere mit ...

ContextualHelp

Verwende ContextualHelp, um zusätzliche Informationen bereitzustellen.

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

    Properties

    PropertyTypeDefaultDescription
    isReadOnlyboolean-Whether the component is read only.
    childrenReactNode-
    wrapWithReactElement<unknown, string | JSXElementConstructor<any>>-
    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-
    namestring-
    acceptstring-
    multipleboolean-
    validationBehavior"native" | "aria"'native'Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
    isDisabledboolean-Whether the input is disabled.
    isRequiredboolean-Whether user input is required on the input before form submission.
    isInvalidboolean-Whether the value is invalid.

    Events

    PropertyTypeDefaultDescription
    onChangeFileInputOnChangeHandler-Handler that is called when the file input changes.

    Auf dieser Seite