# FileCard

Die FileCard visualisiert Dateien samt relevanter Informationen.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
/>
```

---

# Best Practices

- Zeige hochgeladene Dateien sofort an. Das gibt dem User eine direkte
  Rückmeldung.
- Mach relevante Informationen wie Dateiname, Dateigröße und Dateityp klar
  erkennbar.
- Biete wichtige Interaktionen als Aktionen an. Ein Beispiel ist das Entfernen
  der Datei.
- Stelle mehrere Dateien mit der
  [FileCardList](https://flow.mittwald.de/04-components/upload/file-card-list) dar. Häufig ergänzt die
  FileCard eine [FileDropZone](https://flow.mittwald.de/04-components/upload/file-drop-zone) oder ein
  [FileField](https://flow.mittwald.de/04-components/form-controls/file-field).

---

# Mit Delete Button

Verwende `delete`, um in der FileCard einen
[Button](https://flow.mittwald.de/04-components/actions/button) anzuzeigen, mit dem die Datei
unmittelbar entfernt werden kann.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  onDelete={() => {
    console.log("delete");
  }}
/>
```

---

# Mit Link

Die FileCard ermöglicht es, Dateien über einen `href`-Link zu öffnen, z. B. um
ein Bild in einem neuen Tab anzuzeigen.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  href="#"
/>
```

---

# Mit Bild

Statt eines passenden Icons kann durch `imageSrc` zur Vorschau ein Bild
angezeigt werden.

```tsx
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  imageSrc="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
/>
```

---

# Mit Failed State

Über das Property `isFailed` kann die FileCard im Failed State angezeigt werden,
um beispielsweise einen fehlgeschlagenen Upload anzuzeigen. Weitere
Informationen können im Subtitle der FileCard angezeigt werden.

```tsx
import {
  FileCard,
  Text,
} from "@mittwald/flow-react-components";

<FileCard name="image.jpg" isFailed>
  <Text>Datei konnte nicht hochgeladen werden</Text>
</FileCard>
```

---

# Kombiniere mit ...

## Button

Platziere einen oder mehrere [Button](https://flow.mittwald.de/04-components/actions/button) innerhalb
der FileCard, um zusätzliche Optionen anzubieten.

```tsx
import {
  FileCard,
  Button,
  IconChevronDown,
  IconChevronUp,
} from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  onDelete={() => {
    console.log("delete");
  }}
>
  <Button>
    <IconChevronUp />
  </Button>
  <Button>
    <IconChevronDown />
  </Button>
</FileCard>
```

## ContextMenu

Nutze ein `<ContextMenu />` innerhalb der FileCard, um wichtige Interaktionen in
einem [ContextMenu](https://flow.mittwald.de/04-components/actions/context-menu) zu platzieren.

```tsx
import {
  ContextMenu,
  FileCard,
  MenuItem,
} from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
>
  <ContextMenu>
    <MenuItem>Entfernen</MenuItem>
  </ContextMenu>
</FileCard>
```

## ProgressBar

Nutze eine [ProgressBar](https://flow.mittwald.de/04-components/status/progress-bar) innerhalb der
FileCard, um beispielsweise einen Upload-Fortschritt anzuzeigen.

```tsx
import {
  FileCard,
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<FileCard>
  <ProgressBar
    value={2.1}
    maxValue={3.4}
    minValue={0}
    showMaxValue
    formatOptions={{ style: "unit", unit: "megabyte" }}
  >
    <Label>Image.png</Label>
  </ProgressBar>
</FileCard>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | The elements class name. |
| `download` | `string \| boolean` | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| `elementType` | `"div" \| ExoticComponent<{}> \| "li"` | - | The HTML element or React component rendered as the elements root. |
| `href` | `string` | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| `imageSrc` | `string` | - | The source of an image file. |
| `isFailed` | `boolean` | - | Whether the file card is in a failed state. |
| `name` | `string` | - | The name of the file. |
| `sizeInBytes` | `number` | - | The size of the file in bytes. |
| `target` | `HTMLAttributeAnchorTarget` | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| `type` | `string` | - | The type of the file. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onDelete` | `(() => void)` | - | Handler that is called when the file cards delete button is clicked. |
| `onPress` | `((e: PressEvent) => void)` | - | Handler that is called when the press is released over the target. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |