Chunkify Uploader

Get started

A fully customizable web component for video uploads. Supports drag-and-drop, file selection, and full UI customization.

Chunkify Uploader is a fully customizable web component that makes it easy to upload a video file to Chunkify.

It allows you to easily integrate a video upload UI in your application.

Chunkify Uploader supports:

File selection
Drag and drop for files
Full UI Customization

Chunkify Uploader is composed of multiple web components that you will have to use to build your own custom UI.

We also provide a React component that wraps the web component, maintaining the same CSS selectors and styling options. See the React examples for more details.

Quickstart

Installation

Choose the installation method based on your setup:

For React applications

npm install @chunkify/uploader@latest

Then import the component:

import { ChunkifyUploader } from '@chunkify/uploader/react';

For plain HTML (no build system)

Add this script tag to your HTML:

<script src="https://cdn.jsdelivr.net/npm/@chunkify/uploader"></script>

If you're using a build system (Vite, Webpack, Parcel, etc.) with HTML, you can also use npm install and import the package in your JavaScript files.

Provide an upload session

Your backend creates an Upload with its project token and returns upload_url and completion_url. /your-api/create-upload-session is a placeholder for a route you implement in your application. That route calls the Chunkify API using your project token and returns the upload session. Replace this path with your own backend route.

Configure a provider that receives the selected File and fetches that session from your application:

async function createUpload(file) {
    const response = await fetch('/your-api/create-upload-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filename: file.name }),
    });
    if (!response.ok) throw new Error('Could not create an upload session.');
    return response.json();
}

See setup for the backend handler, storage selection, and CORS configuration.

Example element implementation

The CSS styling by default ranges from non-existent to minimal so you will have to provide your own styling to make it look good.

Here is a simple implementation with some simple CSS styling with a drop zone available, a file select button, a progress bar and text, an error and finally a success message.

<style>
    chunkify-uploader {
        width: 30%;
        height: 100px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        border: 2px dashed #ccc;
        padding: 16px;
    }

  chunkify-uploader-file-select {
        background: #007bff;
        width: 60%;
        color: white;
        border: none;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/@chunkify/uploader@latest"></script>

<chunkify-uploader drop>
    <chunkify-uploader-file-select>Select a file</chunkify-uploader-file-select>
    <chunkify-uploader-progress-text></chunkify-uploader-progress-text>
    <chunkify-uploader-progress-bar></chunkify-uploader-progress-bar>
    <chunkify-uploader-error>Upload failed. Please try again.</chunkify-uploader-error>
    <chunkify-uploader-retry>Retry</chunkify-uploader-retry>
    <chunkify-uploader-success>Upload Success!</chunkify-uploader-success>
</chunkify-uploader>

<script>
    document.querySelector('chunkify-uploader').upload = createUpload;
</script>
import {
    ChunkifyUploader,
    ChunkifyUploaderFileSelect,
    ChunkifyUploaderProgressText,
    ChunkifyUploaderProgressBar,
    ChunkifyUploaderError,
    ChunkifyUploaderSuccess,
    ChunkifyUploaderRetry,
} from '@chunkify/uploader/react';

export default function App() {
    const uploaderStyle = {
        width: '30%',
        height: '100px',
        margin: '0 auto',
        alignItems: 'center',
        justifyContent: 'center',
        border: '2px dashed #ccc',
        padding: '16px',
    };

    const fileSelectStyle = {
        background: '#007bff',
        width: '60%',
        color: 'white',
        border: 'none',
        padding: '12px',
        borderRadius: '8px',
        cursor: 'pointer',
        textAlign: 'center',
    };

    return (
    <ChunkifyUploader
        style={uploaderStyle}
        upload={createUpload}
        drop
    >
        <ChunkifyUploaderFileSelect style={fileSelectStyle}>
            Select a file
        </ChunkifyUploaderFileSelect>
        <ChunkifyUploaderProgressText />
        <ChunkifyUploaderProgressBar />
        <ChunkifyUploaderError>Upload failed. Please try again.</ChunkifyUploaderError>
        <ChunkifyUploaderRetry>Retry</ChunkifyUploaderRetry>
        <ChunkifyUploaderSuccess>Upload Success!</ChunkifyUploaderSuccess>
    </ChunkifyUploader>
    );
}

We recommend you to check the guides below to learn more about the Chunkify Uploader features, customization and configuration.

Setup

Learn which functionality and limits you can configure

Styles

Customize the uploader to match your project needs.

Upload events

Learn about the events and how to handle them

Webhooks

An overview of the upload process flow with webhooks.