Flow

Components

FileDropZone

Die FileDropZone bietet dem User die Möglichkeit, Dateien per Drag-and-Drop oder über das File System einzufügen.GitHub

Drop file

Beispiel

import FileDropZone from "@mittwald/flow-react-components/FileDropZone";
import { useFileController } from "@mittwald/flow-react-components/FileTrigger";
import Section from "@mittwald/flow-react-components/Section";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

export default () => {
  const controller = useFileController();
  const files = controller.useFiles();

  return (
    <Section>
      <FileDropZone controller={controller} />
      <LabeledValue>
        <Label>Ausgewählte Datei</Label>
        <Text>
          {files.length > 0
            ? files.map((f) => f.name).join(", ")
            : "-"}
        </Text>
      </LabeledValue>
    </Section>
  );
}

Mehrere Dateien auswählen

Über das Property allowsMultiple kann das Auswählen mehrerer Dateien ermöglicht werden.

import FileDropZone from "@mittwald/flow-react-components/FileDropZone";
import { useFileController } from "@mittwald/flow-react-components/FileTrigger";
import Section from "@mittwald/flow-react-components/Section";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

export default () => {
  const controller = useFileController();
  const files = controller.useFiles();

  return (
    <Section>
      <FileDropZone
        controller={controller}
        allowsMultiple
      />
      <LabeledValue>
        <Label>Ausgewählte Dateien</Label>
        <Text>
          {files.length > 0
            ? files.map((f) => f.name).join(", ")
            : "-"}
        </Text>
      </LabeledValue>
    </Section>
  );
}

Datei-Typ beschränken

Über das Property acceptedFileTypes kann festgelegt werden welche Datei-Typen ausgewählt werden dürfen. Nutze einen Text innerhalb der Dropzone, um dem User beispielsweise Informationen über die akzeptierten Datei-Typen zu geben.

import FileDropZone from "@mittwald/flow-react-components/FileDropZone";
import { useFileController } from "@mittwald/flow-react-components/FileTrigger";
import Section from "@mittwald/flow-react-components/Section";
import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
import Label from "@mittwald/flow-react-components/Label";
import Text from "@mittwald/flow-react-components/Text";

export default () => {
  const controller = useFileController();
  const files = controller.useFiles();

  return (
    <Section>
      <FileDropZone
        controller={controller}
        acceptedFileTypes={["image/png", "image/jpeg"]}
      >
        <Text>Erlaubte Datei-Typen sind jpg unnd png.</Text>
      </FileDropZone>
      <LabeledValue>
        <Label>Ausgewählte Datei</Label>
        <Text>
          {files.length > 0
            ? files.map((f) => f.name).join(", ")
            : "-"}
        </Text>
      </LabeledValue>
    </Section>
  );
}
Feedback geben