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/componentsimport '@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>