# FileDropZone

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

## Overview

# Playground

Verwende `<FileDropZone />`, um Dateien per Drag-and-Drop hochzuladen. Biete
zusätzlich mit `<Button />` eine alternative Möglichkeit an.

```tsx
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>
```

---

# Vorgegebene Dateitypen

Verwende `<Text />`, um den User über erlaubte Dateitypen und maximale
Dateigrößen beim Hochladen zu informieren.

```tsx
import {
  Button,
  FileDropZone,
  FileField,
  Heading,
  IconImage,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <FileDropZone
    accept="image/png"
    onChange={(files) => console.log(files)}
  >
    <IconImage />
    <Heading>Bild ablegen</Heading>
    <Text>
      Es sind nur Bilder vom Typ image/png erlaubt.
    </Text>
    <FileField>
      <Button>Bild auswählen</Button>
    </FileField>
  </FileDropZone>
</Section>
```

---

# 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](/03-patterns/02-codesnippets/multi-upload).

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

<Section>
  <FileDropZone
    multiple
    onChange={(files) => console.log(files)}
  >
    <IconUpload />
    <Heading>Dateien ablegen</Heading>
    <FileField>
      <Button>Dateien auswählen</Button>
    </FileField>
  </FileDropZone>
</Section>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `isReadOnly` | `boolean` | - | Whether the component is read only. |
| `className` | `string` | - | The elements class name. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `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

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onChange` | `FileInputOnChangeHandler` | - | - |


## Guidelines

# Grundlagen

Kombiniere die FileDropZone mit der
[FileCard](/04-components/upload/file-card/overview), um einzelne hochgeladene
Dateien darzustellen, oder mit der
[FileCardList](/04-components/upload/file-card-list/overview), um mehrere
hochgeladene Dateien darzustellen.

## Best practices

Achte bei der Verwendung einer FileDropZone darauf, dass ...

- immer eine alternative Upload-Möglichkeit über einen
  [Button](/04-components/actions/button/overview) vorhanden ist.
- die zulässigen Dateitypen und ggf. Größenbeschränkungen deutlich kommuniziert
  werden.
- [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen)
  klar und hilfreich formuliert sind.
- die hochgeladenen Dateien übersichtlich durch die
  [FileCard](/04-components/upload/file-card/overview) oder
  [FileCardList](/04-components/upload/file-card-list/overview) dargestellt
  werden.

## Verwendung

Verwende eine FileDropZone, um eine oder mehrere Dateien gleichzeitig hochladen
zu können.