# Componente Uploader | Docs de AudioDN

> Componente de subida de archivos con arrastrar y soltar, seguimiento de progreso y soporte de temas.

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

---

# 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>
```