Handling Uploads

Choose the upload approach that fits your project.

Mix and Match

You can combine different approaches for uploads and playback. For example, use Client-Side uploads for simplicity while using Server-Side playback for maximum control over access. Choose what works best for each part of your application.

Choose Your Approach

Client-Side

Fastest setup. Drop in the Uploader component with a Component API Key. No backend required.

Server-Side

Maximum control. Use the API directly to build custom upload flows with full business logic integration.

Hybrid

Best of both. Backend creates sessions, frontend uses ADN's Uploader component.

Client-Side Uploads

Best for: Static sites, personal projects, MVPs, or teams without a backend.

The fastest path to accepting uploads. Drop in the Uploader component with a Component API Key, and ADN handles everything behind the scenes.

1. Create an Uploader Component API Key

Login to ADN, go to Settings → API Keys, and create an Uploader Component key. Optionally, scope it to a specific collection.

2. Include ADN Web Components

<script src="https://components.audiodeliverynetwork.com/audiodn-uploader.js"></script>

NPM Module Coming Soon

We're working on an NPM package for easier integration. Stay tuned for updates!

3. Render the Uploader Component

<audiodn-uploader
  api-key="UPLOAD-COMPONENT-API-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>

If the key is scoped to a collection, omit the collection-id.

4. User Upload Flow

Users upload audio directly. ADN automatically generates variants (e.g., HQ, LQ, Preview).

5. Optional: Webhooks

Add a webhook under Settings → Webhooks to be notified when processing finishes.

Server-Side Uploads

Best for: Custom apps, mobile experiences, or platforms needing fine-grained control.

The most powerful and flexible path. Use ADN's API directly to build custom upload interfaces with full control over your business logic.

1. Create an API Key

Go to Settings → API Keys and create an API Access key.

2. Create an Upload Session

const response = await fetch('https://api.audiodeliverynetwork.com/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ collection_id: 'COLLECTION-ID' })
});

const { upload_session } = await response.json();

3. Create Tracks Within the Session

const response = await fetch(`https://api.audiodeliverynetwork.com/v1/upload/${id}/track`, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ file_name: 'song.wav' })
});

const { track_upload } = await response.json();
const { method, upload_url, expires_at } = track_upload;

4. Upload Files

const file = document.querySelector('input[type="file"]').files[0];

await fetch(upload_url, {
  method,
  headers: { 'Content-Type': file.type },
  body: file
});

5. Optional: Webhooks

Enable a webhook under Settings → Webhooks to receive notifications when processing is complete.

Hybrid Uploads

Best for: Teams wanting backend-driven security with component-based frontend development.

A balanced approach: your backend creates upload sessions using ADN's API, then passes the session ID to the client-side Uploader component. This gives you backend control over access while benefiting from ADN's ready-made UI.

1. Create an API Key

Go to Settings → API Keys and create an API Access key.

2. Create an Upload Session (Server-Side)

const response = await fetch('https://api.audiodeliverynetwork.com/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ collection_id: 'COLLECTION-ID' })
});

const { upload_session } = await response.json();
const { id, collection_id, expires_at } = upload_session;

3. Pass Upload Session to Client

<audiodn-uploader
  upload-session-id="UPLOAD-SESSION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>

4. User Upload Flow

Users upload files directly via the component. ADN automatically processes variants.

5. Optional: Webhooks

Enable a webhook under Settings → Webhooks for upload completion events.