Uploader

Subida de archivos con arrastrar y soltar, seguimiento de progreso y soporte de temas.

Uso

Instálalo desde npm e importa el componente, luego inserta el elemento en tu página. Proporciona una clave API Client-Side y, opcionalmente, un ID de colección a la que subir. Si la clave API tiene alcance a una colección, el ID de colección se resuelve automáticamente.

Cuando un archivo termina de transferirse, el componente dispara file-uploaded con el nuevo trackId. Eso significa que los bytes llegaron al almacenamiento — no que el procesamiento haya terminado. Consulta GET /v1/track/:track_id hasta que track_status_id sea ready (o escucha un webhook de pista) antes de iniciar la reproducción.

npm install @audiodn/components

import '@audiodn/components/uploader'

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

¿Prefieres sin paso de build? Cárgalo directamente desde un CDN:

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

Atributos

Atributo	Tipo	Predeterminado	Descripción
`api-key`	string	—	Clave API Client-Side (segura para usar en código front-end). Se requiere `api-key` o `upload-session-id`. Cuando está definida, la sesión se renueva automáticamente antes de caducar.
`upload-session-id`	string	—	ID de sesión de subida aprovisionada en el servidor. Se requiere `upload-session-id` o `api-key`. Úsalo cuando tu servidor crea sesiones en nombre del cliente.
`collection-id`	string	—	Colección de destino a la que subir pistas. Opcional cuando la clave API tiene alcance a una colección.
`accent-color`	string	`”#fe008a”`	Color de acento para el progreso de subida y los botones. Se matiza automáticamente (solo cuando hace falta) para mantener un contraste mínimo respecto al fondo del tema activo, de modo que permanece legible en claro y oscuro. Cuando se omite, se usa el `player_color` de la colección/organización.
`theme`	string	`”auto”`	Tema de color: `“dark”` (texto blanco sobre fondo oscuro), `“light”` (texto oscuro sobre fondo gris claro suave) o `“auto”`. `“auto”` sigue la preferencia del sistema operativo / navegador `prefers-color-scheme` del visitante y cambia en vivo cuando cambia. Las propiedades CSS personalizadas individuales (ver Temas) siguen sobrescribiendo la paleta.
`disabled`	boolean	`false`	Desactiva el uploader cuando está establecido
`limit`	number	`0`	Número máximo de archivos que se pueden subir mientras esta instancia del componente está en la página. `0` (u omitir) significa ilimitado. Los archivos aceptados cuentan durante la vida del elemento — incluso después de que una subida correcta salga de la cola — así que `limit=“1”` permite una sola subida hasta que se refresque la página (o vuelvas a montar el componente). Establecerlo en `1` también fuerza el modo de selector de un solo archivo.

Predeterminado

Subida de archivos con arrastrar y soltar y seguimiento de progreso. Requiere una clave API y un ID de colección.

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

Límite de archivos

Usa el atributo limit para limitar cuántos archivos se pueden subir mientras el componente permanece en la página. Los archivos aceptados cuentan durante la vida del elemento — después de que una subida correcta termine (y salga de la cola), las selecciones posteriores siguen bloqueadas hasta que se refresque la página o vuelvas a montar el componente. Este ejemplo permite un solo archivo.

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

Temas

La forma más rápida de cambiar entre claro y oscuro es el atributo theme (“auto”, “dark” o “light”) documentado arriba — “auto” sigue la preferencia del sistema del visitante. Para un control más fino, aún puedes sobrescribir propiedades CSS personalizadas en el host para restilizar el uploader, usando la misma API —adn-* que el player.

Light / Dark (preferencia del sistema)

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