Uploader

Envoyeur de fichiers par glisser-déposer avec suivi de progression et prise en charge des thèmes.

Utilisation

Installez depuis npm et importez le composant, puis placez l’élément dans votre page. Fournissez une clé API côté client et, optionnellement, un identifiant de collection vers laquelle envoyer. Si la clé API est limitée à une collection, l’identifiant de collection est résolu automatiquement.

Lorsqu’un fichier a fini de transférer, le composant déclenche file-uploaded avec le nouveau trackId. Cela signifie que les octets ont atteint le stockage — pas que le traitement est terminé. Interrogez GET /v1/track/:track_id jusqu’à ce que track_status_id soit ready (ou écoutez un webhook de piste) avant de démarrer la lecture.

npm install @audiodn/components

import '@audiodn/components/uploader'

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

Vous préférez sans étape de build ? Chargez-le directement depuis un CDN à la place :

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

Attributs

Attribut	Type	Défaut	Description
`api-key`	string	—	Clé API côté client (peut être utilisée en toute sécurité dans le code front-end). Soit `api-key`, soit `upload-session-id` est requis. Lorsqu’il est défini, la session est automatiquement renouvelée avant son expiration.
`upload-session-id`	string	—	Identifiant de session d’envoi provisionné côté serveur. Soit `upload-session-id`, soit `api-key` est requis. Utilisez ceci lorsque votre serveur crée des sessions pour le compte du client.
`collection-id`	string	—	Collection cible vers laquelle envoyer les pistes. Optionnel lorsque la clé API est limitée à une collection.
`accent-color`	string	`”#fe008a”`	Couleur d’accent pour la progression d’envoi et les boutons. Elle est automatiquement teintée (uniquement si nécessaire) pour conserver un contraste minimum contre le fond du thème actif, afin de rester lisible en clair et en sombre. Lorsqu’elle est omise, le `player_color` de la collection/organisation est utilisé.
`theme`	string	`”auto”`	Thème de couleur : `“dark”` (texte blanc sur fond sombre), `“light”` (texte sombre sur fond gris clair doux), ou `“auto”`. `“auto”` suit le réglage `prefers-color-scheme` du système d’exploitation / navigateur du visiteur et bascule en direct lorsqu’il change. Les propriétés CSS personnalisées individuelles (voir Thèmes) remplacent toujours la palette.
`disabled`	boolean	`false`	Désactive l’envoyeur lorsqu’il est défini
`limit`	number	`0`	Nombre maximum de fichiers pouvant être envoyés tant que cette instance du composant est sur la page. `0` (ou omettre) signifie illimité. Les fichiers acceptés comptent pour la durée de vie de l’élément — même après qu’un envoi réussi quitte la file — donc `limit=“1”` autorise un seul envoi jusqu’à ce que la page soit actualisée (ou que vous remountiez le composant). Définir à `1` force aussi le mode sélecteur monofichier.

Par défaut

Envoyeur de fichiers par glisser-déposer avec suivi de progression. Nécessite une clé API et un identifiant de collection.

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

Limite de fichiers

Utilisez l’attribut limit pour plafonner le nombre de fichiers pouvant être envoyés tant que le composant reste sur la page. Les fichiers acceptés comptent pour la durée de vie de l’élément — après qu’un envoi réussi se termine (et quitte la file), les sélections suivantes restent bloquées jusqu’à l’actualisation de la page ou le remount du composant. Cet exemple autorise un seul fichier.

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

Thèmes

Le moyen le plus rapide de basculer entre clair et sombre est l’attribut theme (“auto”, “dark”, ou “light”) documenté ci-dessus — “auto” suit la préférence système du visiteur. Pour un contrôle plus fin, vous pouvez toujours remplacer les propriétés CSS personnalisées sur l’hôte pour restyler l’envoyeur, en utilisant la même API —adn-* que le lecteur.

Clair / Sombre (préférence système)

.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>