# Uploader Component | AudioDN Docs

> Drag-and-drop file uploader component with progress tracking and theme support.

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

---

# Uploader

Drag-and-drop file uploader with progress tracking and theme support.

## Usage

Install from npm and import the component, then drop the element into your page. Provide a Client-Side API key and, optionally, a collection ID to upload into. If the API key is scoped to a collection, the collection ID is resolved automatically.

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

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

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

Prefer no build step? Load it straight from a CDN instead:

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

### Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `api-key` | string | — | Client-Side API key (safe to use in front-end code). Either `api-key` or `upload-session-id` is required. When set, the session is automatically renewed before it expires. |
| `upload-session-id` | string | — | Server-provisioned upload session ID. Either `upload-session-id` or `api-key` is required. Use this when your server creates sessions on behalf of the client. |
| `collection-id` | string | — | Target collection to upload tracks into. Optional when the API key is scoped to a collection. |
| `accent-color` | string | `"#fe008a"` | Accent color for the upload progress and buttons. It is automatically tinted (only when needed) to keep a minimum contrast against the active theme's background, so it stays legible in both light and dark. When omitted, the collection/organization `player_color` is used. |
| `theme` | string | `"auto"` | Color theme: `"dark"` (white text on a dark background), `"light"` (dark text on a soft light-gray background), or `"auto"`. `"auto"` follows the visitor's operating system / browser `prefers-color-scheme` setting and switches live when it changes. Individual CSS custom properties (see Themes) still override the palette. |
| `disabled` | boolean | `false` | Disables the uploader when set |

## Default

Drag-and-drop file uploader with progress tracking. Requires an API key and collection ID.

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

## Themes

The quickest way to switch light and dark is the `theme` attribute (`"auto"`, `"dark"`, or `"light"`) documented above — `"auto"` follows the visitor's system preference. For finer control you can still override CSS custom properties on the host to restyle the uploader, using the same `--adn-*` API as the player.

### Light / Dark (system preference)

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