# Multi-Upload

```tsx
import {
  Button,
  FileCard,
  FileCardList,
  FileDropZone,
  FileField,
  Heading,
  IconUpload,
  Section,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [files, setFiles] = useState<File[]>([]);

  return (
    <Section>
      <FileDropZone
        multiple
        onChange={(droppedFiles) => {
          if (droppedFiles) {
            setFiles((existingFiles) => [
              ...existingFiles,
              ...droppedFiles,
            ]);
          }
        }}
      >
        <IconUpload />
        <Heading>Dateien ablegen</Heading>
        <FileField>
          <Button>Dateien auswählen</Button>
        </FileField>
      </FileDropZone>

      <FileCardList>
        {files.map((file) => (
          <FileCard
            name={file.name}
            type={file.type}
            key={file.name}
            sizeInBytes={file.size}
            onDelete={() =>
              setFiles(
                files.filter((watched) => watched !== file),
              )
            }
          />
        ))}
      </FileCardList>
    </Section>
  );
}
```

---

# Verwendung

Verwende diesen Baustein, wenn Nutzer mehrere Dateien auf einmal auswählen und
vor dem Absenden noch prüfen oder einzelne wieder entfernen sollen. Für eine
einzelne Datei genügt ein [FileField](https://flow.mittwald.de/components/form-controls/file-field) oder
eine [FileDropZone](https://flow.mittwald.de/components/upload/file-drop-zone).

---

# Aufbau

- **Auswahl** – Eine [FileDropZone](https://flow.mittwald.de/components/upload/file-drop-zone) nimmt
  Dateien per Drag-and-drop entgegen und enthält ein
  [FileField](https://flow.mittwald.de/components/form-controls/file-field) für den Dateidialog.
  `multiple` erlaubt mehrere Dateien auf einmal.
- **Dateiliste** – Eine [FileCardList](https://flow.mittwald.de/components/upload/file-card-list) aus
  [FileCards](https://flow.mittwald.de/components/upload/file-card) zeigt die ausgewählten Dateien mit
  Name, Typ und Größe; über `onDelete` entfernt der Nutzer einzelne vor dem
  Upload.
- **Zwischenspeicher** – Die ausgewählten Dateien liegen in einem Array im State
  (`File[]`) und werden erst beim Absenden übertragen; bis dahin lassen sie sich
  prüfen und einzeln entfernen.