Developer Documentation

npm install document-uploader

yarn add document-uploader

<script type="module">
  import { DocumentUploader } from 'https://unpkg.com/document-uploader@latest/dist/document-uploader.js';
</script>

<script src="https://unpkg.com/document-uploader@latest/dist/document-uploader.umd.cjs"></script>

<document-uploader
  api-key="dk_your_api_key"
></document-uploader>

<script>
  const uploader = document.querySelector('document-uploader');

  uploader.addEventListener('webhook-executed', (e) => {
    const [webhook] = e.detail;

    console.log('Webhook ID:', webhook.webhookId);
    console.log('Upload ID:', webhook.uploadId);
    console.log('Event:', webhook.event); // 'upload.completed'
    console.log('Status:', webhook.status); // 'success' or 'failed'
    console.log('HTTP Status:', webhook.statusCode);
    console.log('Response:', webhook.responseBody);
    console.log('Execution time:', webhook.executionTimeMs, 'ms');
    console.log('Retry attempt:', webhook.retryAttempt);

    if (webhook.status === 'success') {
      // Show success notification
      console.log('Webhook delivered successfully!');
    } else {
      // Handle webhook failure
      console.error('Webhook failed:', webhook.errorMessage);
    }
  });
</script>

<document-uploader
  api-key="dk_your_api_key"
  payload='{"userId": "user_123", "orderId": "order_456"}'
></document-uploader>

<script>
  const uploader = document.querySelector('document-uploader');

  // When a new session is created
  uploader.addEventListener('session-created', (e) => {
    const [sessionId, payload] = e.detail;
    console.log('Session:', sessionId);
    console.log('Payload:', payload);
    // { userId: 'user_123', orderId: 'order_456' }
  });

  // When an existing session is restored
  uploader.addEventListener('session-restored', (e) => {
    const [sessionId, uploads, payload] = e.detail;
    console.log('Restored session:', sessionId);
    console.log('Previous uploads:', uploads.length);
    console.log('Payload:', payload);
  });

  // Get payload anytime via method
  const currentPayload = uploader.getPayload();
</script>

import { useEffect, useRef } from 'react';
import { DocumentUploader } from 'document-uploader';

function UploadComponent({ apiKey, onUpload }) {
  const uploaderContainer = useRef(null);
  const uploaderRef = useRef(null);

  useEffect(() => {
    if (!uploaderContainer.current) return;

    const initUploader = async () => {
      uploaderRef.current = new DocumentUploader({
        apiKey,
        container: uploaderContainer.current,
        onFileUploaded: onUpload
      });

      await uploaderRef.current.render();
    };

    initUploader();

    return () => {
      if (uploaderRef.current) {
        uploaderRef.current.destroy();
      }
    };
  }, [apiKey, onUpload]);

  return <div ref={uploaderContainer} />;
}

<template>
  <div ref="uploaderContainer"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { DocumentUploader } from 'document-uploader';

const props = defineProps(['apiKey']);
const emit = defineEmits(['upload']);
const uploaderContainer = ref(null);
let uploader = null;

onMounted(async () => {
  if (!uploaderContainer.value) return;

  uploader = new DocumentUploader({
    apiKey: props.apiKey,
    container: uploaderContainer.value,
    onFileUploaded: (file) => emit('upload', file)
  });

  await uploader.render();
});

onUnmounted(() => {
  if (uploader) {
    uploader.destroy();
  }
});
</script>