Attach API

Bind upload functionality to your own button or element. No widget markup needed.

Live Demo

Code

<!-- Your own button -->
<button id="my-upload-btn">Upload Pitch Deck</button>

<script src="https://pitch.capwave.ai/assets/pitch-deck-uploader.min.js"></script>
<script>
const handle = CapwaveUploader.attach('#my-upload-btn', {
  partnerId: 'your-partner-id'
});

// Events fire directly on your button
const btn = document.getElementById('my-upload-btn');

btn.addEventListener('capwave:uploadsuccess', (e) => {
  console.log('Done!', e.detail.response);
});

btn.addEventListener('capwave:uploaderror', (e) => {
  console.error('Error:', e.detail.error);
});

// Clean up when no longer needed
// handle.destroy();
</script>

CSS Class Feedback

The attach() API automatically adds CSS classes to your trigger element during the upload lifecycle:

Class When Removed
.capwave-uploading Upload starts (+ disabled attribute) On success or error
.capwave-success Upload completes Automatically after 2 seconds
.capwave-error Upload or validation fails On next click 
<style>
  /* Style your button for each upload state */
  .my-btn.capwave-uploading { opacity: 0.6; cursor: wait; }
  .my-btn.capwave-success  { border-color: green; }
  .my-btn.capwave-error    { border-color: red; }
</style>

How It Works

  • A hidden <capwave-uploader> widget is created automatically in the background
  • Clicking your element opens the native file picker
  • CSS classes and the disabled attribute are toggled on your element during upload
  • All capwave:* events are re-dispatched on your element so you can listen directly
  • Call handle.destroy() to remove all listeners and the hidden widget

Next Steps