VidInfra Uploader SDK

Modern video upload SDK built with TypeScript. Features S3 multipart uploads, progress tracking, drag-and-drop, and pause/resume functionality.

Features

• Video Upload - Optimized for large video files with multipart upload
• Progress Tracking - Real-time progress with speed and ETA
• Drag & Drop - Intuitive drag-and-drop interface
• Pause/Resume - Full control over upload lifecycle
• Batch Upload - Handle single or multiple files
• Secure - Token-based authentication
• Customizable - Minimal styling with full customization
• Responsive - Works on desktop and mobile
• Universal - CommonJS, ESM, and UMD builds
• TypeScript - Full TypeScript support

Installation

npm install @vidinfra/uploader
# or
yarn add @vidinfra/uploader
# or
pnpm add @vidinfra/uploader

Quick Start

ES Modules (Modern Bundlers)

import VidInfraUploader from "@vidinfra/uploader";
import "@vidinfra/uploader/styles.css";

const uploader = new VidInfraUploader({
  endpoint:
    "https://api.tenbyte.io/v1/stream/libraries/YOUR_LIBRARY_ID/uploads",
  uploadToken: "YOUR_JWT_TOKEN",
  target: "#uploader",
  metadata: {
    libraryId: "YOUR_LIBRARY_ID",
  },
});

uploader.on("upload-success", (file, response) => {
  console.log("Upload complete:", file.name);
});

UMD (Browser Script Tag)

<link
  rel="stylesheet"
  href="https://unpkg.com/@vidinfra/uploader/dist/styles.css"
/>
<div id="uploader"></div>
<script src="https://unpkg.com/@vidinfra/uploader/dist/index.umd.js"></script>
<script>
  const uploader = new VidInfraUploader({
    endpoint:
      "https://api.tenbyte.io/v1/stream/libraries/YOUR_LIBRARY_ID/uploads",
    uploadToken: "YOUR_JWT_TOKEN",
    target: "#uploader",
  });
</script>

Configuration

const uploader = new VidInfraUploader({
  // Required
  endpoint: string, // API endpoint
  uploadToken: string, // JWT token

  // Optional
  target: string | HTMLElement, // DOM target
  metadata: {
    libraryId: string,
    folderId: string,
  },
  maxNumberOfFiles: number,
  autoProceed: boolean, // Auto-start upload
  dragDrop: boolean, // Enable drag & drop
  note: string, // Custom dropzone text
});

Supported File Formats

Videos:

• .mp4 (video/mp4) - Most popular, works on all devices
• .mkv (video/x-matroska) - High-quality, supports multiple audio/subtitles
• .mov (video/quicktime) - Apple format, used in editing
• .avi (video/x-msvideo) - Older Windows format

Audio:

• .mp3 (audio/mpeg) - Most common audio format
• .wav (audio/wav) - Uncompressed audio
• .aac (audio/aac) - Advanced audio coding
• .m4a (audio/mp4) - MPEG-4 audio

Theming

Customize the uploader to match your brand:

const uploader = new VidInfraUploader({
  endpoint: "YOUR_ENDPOINT",
  uploadToken: "YOUR_TOKEN",
  target: "#uploader",
  theme: {
    primaryColor: "#9333EA", // Purple primary color
    primaryLight: "#F3E8FF", // Light purple background
    primaryShadow: "rgba(147, 51, 234, 0.1)", // Shadow color
    textColor: "#111111", // Main text color
    textSecondary: "#666666", // Secondary text color
    backgroundColor: "#ffffff", // Background color
    borderColor: "#e5e7eb", // Border color
    successColor: "#10B981", // Success state color
    errorColor: "#EF4444", // Error state color
    fontFamily: "Inter, system-ui, sans-serif", // Custom font
  },
});

API Reference

Methods

// Upload control
await uploader.upload()
uploader.pauseAll()
uploader.resumeAll()
uploader.cancelAll()

// File management
await uploader.addFile(file: File)
uploader.removeFile(fileId: string)
uploader.clear()

// State
uploader.getState()
uploader.getFiles()

// Configuration
uploader.setOptions(options)
uploader.setMeta(metadata)
uploader.destroy()

Events

uploader.on("file-added", (file) => {});
uploader.on("upload-start", () => {});
uploader.on("upload-progress", (file, progress) => {});

// Access API response after successful upload
uploader.on("upload-success", (file, response) => {
  console.log("File uploaded:", file.name);
  console.log("S3 Key:", response.body.key);
  console.log("S3 Location:", response.body.location);
  console.log("Upload URL:", response.uploadURL);
  // Full response body contains: { key, location }
});

uploader.on("upload-error", (file, error) => {});
uploader.on("complete", (result) => {
  // Access all successful uploads
  result.successful.forEach((file) => {
    console.log("Key:", file.response.body.key);
    console.log("Location:", file.response.body.location);
  });
});
uploader.on("pause-all", () => {});
uploader.on("resume-all", () => {});
uploader.on("cancel-all", () => {});

Response Structure

The response object returned after a successful upload:

{
  status: 200,
  uploadURL: string,  // The final upload URL
  body: {
    key: string,      // S3 object key
    location: string  // Full S3 URL to the uploaded file
    video_id: string  // Unique video identifier
  }
}

Package Formats

The SDK provides multiple build formats for different environments. All dependencies are bundled - you only need to install @vidinfra/uploader.

| Format | File | Size | Usage | | --------------- | --------------------------- | ----- | --------------------------------- | | CommonJS | dist/index.cjs.js | 172KB | Node.js, older bundlers | | ES Module | dist/index.esm.js | 171KB | Modern bundlers (Vite, Webpack 5) | | ESM Browser | dist/index.browser.esm.js | 219KB | Browser with type="module" | | UMD | dist/index.umd.js | 79KB | Browser <script> tag (minified) | | UMD Dev | dist/index.umd.dev.js | 242KB | Browser with sourcemap | | TypeScript | dist/index.d.ts | - | Type definitions |

CDN Links

<!-- unpkg -->
<script src="https://unpkg.com/@vidinfra/uploader/dist/index.umd.js"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@vidinfra/uploader/dist/index.umd.js"></script>

Framework Examples

import { useEffect, useRef } from "react";
import VidInfraUploader from "@vidinfra/uploader";
import "@vidinfra/uploader/styles.css";

function VideoUploader() {
  const uploaderRef = useRef(null);

  useEffect(() => {
    const uploader = new VidInfraUploader({
      endpoint: "YOUR_ENDPOINT",
      uploadToken: "YOUR_TOKEN",
      target: "#uploader",
    });

    uploaderRef.current = uploader;
    return () => uploader.destroy();
  }, []);

  return <div id="uploader"></div>;
}

<script setup>
import { onMounted, ref } from "vue";
import VidInfraUploader from "@vidinfra/uploader";
import "@vidinfra/uploader/styles.css";

const uploader = ref(null);

onMounted(() => {
  uploader.value = new VidInfraUploader({
    endpoint: "YOUR_ENDPOINT",
    uploadToken: "YOUR_TOKEN",
    target: "#uploader",
  });
});
</script>

<template>
  <div id="uploader"></div>
</template>

<script>
import { onMount } from 'svelte';
import VidInfraUploader from '@vidinfra/uploader';
import '@vidinfra/uploader/styles.css';

let uploader;

onMount(() => {
  uploader = new VidInfraUploader({
    endpoint: 'YOUR_ENDPOINT',
    uploadToken: 'YOUR_TOKEN',
    target: '#uploader',
  });
});
</script>

<div id="uploader"></div>

"use client";

import { useEffect } from "react";

export default function Uploader() {
  useEffect(() => {
    import("@vidinfra/uploader/styles.css");
    import("@vidinfra/uploader").then((module) => {
      const VidInfraUploader = module.default;
      new VidInfraUploader({
        endpoint: "YOUR_ENDPOINT",
        uploadToken: "YOUR_TOKEN",
        target: "#uploader",
      });
    });
  }, []);

  return <div id="uploader"></div>;
}

{{-- Blade Template --}}
@vite(['resources/js/uploader.js'])
<div id="uploader"></div>
<button id="upload-btn">Upload</button>

// resources/js/uploader.js
import VidInfraUploader from "@vidinfra/uploader";
import "@vidinfra/uploader/styles.css";

const uploader = new VidInfraUploader({
  endpoint: import.meta.env.VITE_UPLOAD_ENDPOINT,
  uploadToken: import.meta.env.VITE_UPLOAD_TOKEN,
  target: "#uploader",
});

<?php
// Enqueue in functions.php or plugin
wp_enqueue_script(
    'vidinfra-uploader',
    'https://unpkg.com/@vidinfra/uploader/dist/index.umd.js',
    array(),
    '1.0.0',
    true
);

wp_enqueue_style(
    'vidinfra-uploader-styles',
    'https://unpkg.com/@vidinfra/uploader/dist/styles.css'
);

<!-- Shortcode or template -->
<div id="uploader"></div>
<button id="upload-btn">Upload</button>

<script>
  const uploader = new VidInfraUploader({
    endpoint: '<?php echo esc_js(get_option('upload_endpoint')); ?>',
    uploadToken: '<?php echo esc_js(get_option('upload_token')); ?>',
    target: '#uploader',
  });
</script>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © VidInfra

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Support

For issues and questions:

• GitHub Issues
• Email: [email protected]