Events

Available Events

The widget emits custom events that bubble up through the DOM. You can listen for them on the document or any parent element.

Basic Event Listening

// Listen on document for all widgets
document.addEventListener('capwave:uploadsuccess', (e) => {
  console.log('Upload successful!', e.detail.response);
});

// Listen for errors
document.addEventListener('capwave:uploaderror', (e) => {
  console.error('Upload failed:', e.detail.error);
});

// Track validation errors
document.addEventListener('capwave:validationerror', (e) => {
  console.warn('Invalid file:', e.detail.error);
});

Progress Tracking

// Show custom progress UI
document.addEventListener('capwave:uploadprogress', (e) => {
  const { progress, loaded, total } = e.detail;

  // Update your own progress indicator
  const progressEl = document.getElementById('my-progress');
  progressEl.style.width = progress + '%';

  // Show bytes transferred
  const mb = (loaded / 1024 / 1024).toFixed(1);
  console.log(`Uploaded ${mb}MB (${progress}%)`);
});

Analytics Integration

// Track with Google Analytics
document.addEventListener('capwave:fileselected', (e) => {
  gtag('event', 'file_selected', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.file.name,
    'value': e.detail.file.size
  });
});

document.addEventListener('capwave:uploadsuccess', (e) => {
  gtag('event', 'upload_complete', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.response.pitchDeckId
  });
});

document.addEventListener('capwave:uploaderror', (e) => {
  gtag('event', 'upload_error', {
    'event_category': 'pitch_deck',
    'event_label': e.detail.error
  });
});

Preventing Default Redirect

If you want to handle the success state yourself instead of redirecting:

<!-- Disable auto-redirect -->
<div
  data-capwave-upload
  data-partner-id="demo"
  data-redirect-on-success="false"
></div>

<script>
document.addEventListener('capwave:uploadsuccess', (e) => {
  // Handle success your own way
  const { redirectUrl, pitchDeckId } = e.detail.response;

  // Show success message
  showSuccessModal(`Your deck ID: ${pitchDeckId}`);

  // Or redirect manually after delay
  setTimeout(() => {
    window.location.href = redirectUrl;
  }, 3000);
});
</script>

Global API

The widget also exposes a global CapwaveUploader object:

// Re-initialize widgets (if added dynamically)
window.CapwaveUploader.init();

// Access default configuration
console.log(window.CapwaveUploader.DEFAULT_CONFIG);

// Get reference to widget element
const widget = document.querySelector('capwave-uploader');

// Reset widget to initial state
widget.reset();

// Get current config
const config = widget.getConfig();

// Get current state
const state = widget.getState();