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

``bash
npm install @vidinfra/uploader


or

yarn add @vidinfra/uploader

or

pnpm add @vidinfra/uploader
`

Quick Start

$3

`javascript
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);
});
`

$3

`html
rel="stylesheet"
href="https://unpkg.com/@vidinfra/uploader/dist/styles.css"
/>





`

Configuration

`typescript
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
});
`

$3

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

$3

Customize the uploader to match your brand:

`javascript
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

$3

`typescript
// 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()
`

$3

`typescript
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", () => {});
`

$3

The response object returned after a successful upload:

`typescript
{
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

`

Framework Examples

React

`jsx
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

;
}
`

Vue 3

`vue



`

Svelte

`svelte



`

Next.js

`jsx
"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

;
}
`

Laravel

`blade
{{-- Blade Template --}}
@vite(['resources/js/uploader.js'])



Upload
`

`javascript
// 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",
});
`

WordPress

`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'
);
`

`html



Upload


``

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: support@vidinfra.com