Get started

Chunkify Uploader handles video uploads from your application's browser interface. It supports file selection, drag and drop, progress, and retries, with web components you can style yourself.

Your server creates an Upload session. The component sends the file directly to storage using single PUT or multipart transfer, then confirms completion with Chunkify. It handles file slicing and part ETags for you.

Install the uploader

For a bundled application, install the package:

npm install @chunkify/uploader@2

Import @chunkify/uploader in browser JavaScript, or use the React exports shown below.

For plain HTML, load the hosted script before configuring the component:

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

Request a session from your server

Create a route in your application that authorizes the upload and calls Chunkify with your Project token. Keep the token on your server. See Setup for the SDK examples.

The route receives the selected file's size and returns a single or multipart session. Use auto mode so Chunkify chooses the transfer method. The component follows the mode returned by the API.

Add this function to your browser code. Replace /api/create-upload-session with your application's route:

async function createUpload(file) {
    const response = await fetch('/api/create-upload-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            filename: file.name,
            file_size_bytes: file.size,
        }),
    });

    if (!response.ok) throw new Error('Could not create an upload session.');
    return response.json();
}

Add the uploader

Use the createUpload function above in the same browser script or React module as your chosen example. The component calls it after a file is selected.

<chunkify-uploader class="video-upload" drop max-file-size="1024">
    <chunkify-uploader-heading>Drop a video here</chunkify-uploader-heading>
    <chunkify-uploader-file-select class="upload-button">Select a video</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. Retry or start over.</chunkify-uploader-error>
    <chunkify-uploader-retry class="upload-button">Retry</chunkify-uploader-retry>
    <chunkify-uploader-success>Upload complete!</chunkify-uploader-success>
    <button type="button" class="upload-start-over">Start over</button>
</chunkify-uploader>

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

    uploader.querySelector('.upload-start-over').addEventListener('click', () => {
        uploader.reset();
    });
</script>

'use client';

import {
    ChunkifyUploader,
    ChunkifyUploaderHeading,
    ChunkifyUploaderFileSelect,
    ChunkifyUploaderProgressText,
    ChunkifyUploaderProgressBar,
    ChunkifyUploaderError,
    ChunkifyUploaderRetry,
    ChunkifyUploaderSuccess,
} from '@chunkify/uploader/react';

export default function VideoUpload() {
    return (
        <ChunkifyUploader
            className="video-upload"
            upload={createUpload}
            drop
            maxFileSize={1024}
        >
            <ChunkifyUploaderHeading>Drop a video here</ChunkifyUploaderHeading>
            <ChunkifyUploaderFileSelect className="upload-button">
                Select a video
            </ChunkifyUploaderFileSelect>
            <ChunkifyUploaderProgressText />
            <ChunkifyUploaderProgressBar />
            <ChunkifyUploaderError>Upload failed. Retry or start over.</ChunkifyUploaderError>
            <ChunkifyUploaderRetry className="upload-button">Retry</ChunkifyUploaderRetry>
            <ChunkifyUploaderSuccess>Upload complete!</ChunkifyUploaderSuccess>
            <button
                type="button"
                className="upload-start-over"
                onClick={(event) => {
                    event.currentTarget.closest('chunkify-uploader')
                        ?.dispatchEvent(new Event('reset'));
                }}
            >
                Start over
            </button>
        </ChunkifyUploader>
    );
}

Add these styles to your page or application stylesheet. The same classes work with both examples:

.video-upload {
    box-sizing: border-box;
    width: min(100%, 28rem);
    gap: 12px;
    padding: 24px;
    border: 2px dashed #a1a1aa;
    border-radius: 12px;
    text-align: center;
    --progress-fill-color: #16a34a;
}

.video-upload[dragover] {
    border-color: #16a34a;
    background: #f0fdf4;
}

.upload-button {
    padding: 10px 16px;
    border-radius: 6px;
    background: #166534;
    color: white;
    cursor: pointer;
}

.upload-start-over {
    display: none;
}

.video-upload[error] .upload-start-over,
.video-upload[success] .upload-start-over {
    display: block;
}

The example accepts files up to 1024 MiB. Omit max-file-size or maxFileSize to remove the component's size limit. Your Chunkify plan's limits still apply.

Check the result

Select a video and watch its progress. Success appears only after Chunkify confirms completion and creates the Source. If the session requested a video asset, its streaming preparation continues afterward.

Retry continues a recoverable failure with the same file and session. Start over clears the current attempt so you can select a file and request a new session. See retries and expiration.

Continue with Setup for session fields and storage CORS, Events for browser callbacks, or Styles to customize the interface.

Use webhooks to receive upload completion and video streaming readiness on your server.