# Multi Upload

Kombiniere eine [FileDropZone](/04-components/upload/file-drop-zone/overview)
oder ein [FileField](/04-components/form-controls/file-field/overview) mit einer
[FileCardList](/04-components/upload/file-card-list/overview), um das Hochladen
mehrerer Dateien zu ermöglichen.

Neu ausgewählte Dateien werden in einer Liste zwischengespeichert und
übersichtlich als Dateikarten dargestellt. Über die FileCardList können einzelne
Dateien vor dem eigentlichen Upload jederzeit wieder entfernt werden. So lassen
sich mehrere Dateien komfortabel sammeln, überprüfen und bei Bedarf anpassen,
bevor sie weiterverarbeitet oder übertragen werden.

```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>
  );
}
```