# Uploader-Komponente | AudioDN Docs

> Drag-and-Drop-Datei-Uploader-Komponente mit Fortschrittsanzeige und Theme-Unterstützung.

Source: https://audiodeliverynetwork.com/de/docs/components/uploader/

---

# Uploader

Drag-and-Drop-Datei-Uploader mit Fortschrittsanzeige und Theme-Unterstützung.

## Verwendung

Installieren Sie das Paket über npm und importieren Sie die Komponente, dann setzen Sie das Element in Ihre Seite ein. Geben Sie einen Client-Side-API-Key und optional eine Sammlungs-ID an, in die hochgeladen werden soll. Wenn der API-Key auf eine Sammlung beschränkt ist, wird die Sammlungs-ID automatisch aufgelöst.

Wenn eine Datei fertig übertragen ist, löst die Komponente `file-uploaded` mit der neuen `trackId` aus. Das bedeutet, dass die Bytes im Speicher angekommen sind — nicht, dass die Verarbeitung abgeschlossen ist. Fragen Sie `GET /v1/track/:track_id` ab, bis `track_status_id` den Wert `ready` hat (oder lauschen Sie auf einen Track-Webhook), bevor Sie die Wiedergabe starten.

```
npm install @audiodn/components
```

```
import '@audiodn/components/uploader'
```

```
<audiodn-uploader
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-uploader>
```

Bevorzugen Sie keinen Build-Schritt? Laden Sie die Komponente stattdessen direkt von einem CDN:

```
<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/uploader.js"></script>
```

### Attribute

| Attribut | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `api-key` | string | — | Client-Side-API-Key (sicher für die Verwendung im Frontend-Code). Entweder `api-key` oder `upload-session-id` ist erforderlich. Wenn gesetzt, wird die Session automatisch erneuert, bevor sie abläuft. |
| `upload-session-id` | string | — | Serverseitig provisionierte Upload-Session-ID. Entweder `upload-session-id` oder `api-key` ist erforderlich. Nutzen Sie dies, wenn Ihr Server Sessions im Auftrag des Clients erstellt. |
| `collection-id` | string | — | Ziel-Sammlung, in die Tracks hochgeladen werden. Optional, wenn der API-Key auf eine Sammlung beschränkt ist. |
| `accent-color` | string | `”#fe008a”` | Akzentfarbe für den Upload-Fortschritt und die Schaltflächen. Sie wird automatisch (nur wenn nötig) abgetönt, um einen Mindestkontrast zum Hintergrund des aktiven Themes zu wahren, damit sie sowohl im hellen als auch im dunklen Modus lesbar bleibt. Wenn nicht angegeben, wird die `player_color` der Sammlung/Organisation verwendet. |
| `theme` | string | `”auto”` | Farbthema: `“dark”` (weißer Text auf dunklem Hintergrund), `“light”` (dunkler Text auf sanftem hellgrauem Hintergrund) oder `“auto”`. `“auto”` folgt der `prefers-color-scheme`\-Einstellung des Betriebssystems/Browsers des Besuchers und wechselt live, wenn sie sich ändert. Einzelne CSS-Custom-Properties (siehe Themes) überschreiben weiterhin die Palette. |
| `disabled` | boolean | `false` | Deaktiviert den Uploader, wenn gesetzt |
| `limit` | number | `0` | Maximale Anzahl an Dateien, die hochgeladen werden dürfen, während diese Komponenteninstanz auf der Seite ist. `0` (oder Weglassen) bedeutet unbegrenzt. Akzeptierte Dateien zählen für die Lebensdauer des Elements — auch nachdem ein erfolgreicher Upload die Warteschlange verlassen hat — daher erlaubt `limit=“1”` genau einen Upload, bis die Seite neu geladen wird (oder Sie die Komponente neu mounten). Ein Wert von `1` erzwingt außerdem den Einzeldatei-Auswahlmodus. |

## Standard

Drag-and-Drop-Datei-Uploader mit Fortschrittsanzeige. Erfordert einen API-Key und eine Sammlungs-ID.

```
<audiodn-uploader
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-uploader>
```

## Dateilimit

Nutzen Sie das Attribut `limit`, um zu begrenzen, wie viele Dateien hochgeladen werden dürfen, während die Komponente auf der Seite bleibt. Akzeptierte Dateien zählen für die Lebensdauer des Elements — nachdem ein erfolgreicher Upload abgeschlossen ist (und die Warteschlange verlassen hat), sind weitere Auswahlen weiterhin blockiert, bis die Seite neu geladen wird oder Sie die Komponente neu mounten. Dieses Beispiel erlaubt genau eine Datei.

```
<audiodn-uploader
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
limit="1"
></audiodn-uploader>
```

## Themes

Der schnellste Weg, zwischen Hell und Dunkel zu wechseln, ist das oben beschriebene Attribut `theme` (`“auto”`, `“dark”` oder `“light”`) — `“auto”` folgt der Systemeinstellung des Besuchers. Für eine feinere Steuerung können Sie weiterhin CSS-Custom-Properties auf dem Host überschreiben, um den Uploader neu zu stylen, über dieselbe `—adn-*`\-API wie beim Player.

### Hell / Dunkel (Systemeinstellung)

```
.theme-uploader-lightdark {
--adn-main-border: 1px solid light-dark(#ccc, #444);
--adn-bg: light-dark(#fff, #111);
--adn-bg-light: light-dark(#eee, #222);
--adn-color-font: light-dark(#222, #eee);
--adn-color-font-muted: light-dark(#666, #aaa);
--adn-color-accent: light-dark(#0066cc, #4da6ff);
--adn-color-accent-alt: light-dark(#fff, #111);
--adn-border-color: light-dark(#ccc, #444);
--adn-radius: 6px;
}
```

```
<audiodn-uploader
class="theme-uploader-lightdark"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-uploader>
```

### Midnight

```
.theme-uploader-midnight {
--adn-bg: #1a1a2e;
--adn-bg-light: #2a2a4e;
--adn-color-font: #e0e0e0;
--adn-color-font-muted: #8888aa;
--adn-color-accent: #7c3aed;
--adn-color-accent-rgb: 124, 58, 237;
--adn-color-accent-alt: #fff;
--adn-border-color: #3a3a5e;
--adn-color-highlight: rgba(124, 58, 237, 0.12);
--adn-radius: 12px;
--adn-main-border: 1px solid #3a3a5e;
--adn-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
```

```
<audiodn-uploader
class="theme-uploader-midnight"
api-key="YOUR_API_KEY"
collection-id="COLLECTION_ID"
></audiodn-uploader>
```