Code Examples

Local selection

tsx

<UpupUploader
    sources={['local', 'url']}
    onFilesSelected={files => console.log(files)}
/>

Client upload

tsx

<UpupUploader
    provider="aws"
    uploadEndpoint="/api/upload-token"
    metadata={{ workspaceId: 'w_123' }}
/>

Your token endpoint returns upup's presign contract (key, uploadUrl, uploadHeaders, expiresIn). Sign the URL however your storage prefers — here, AWS S3 via the AWS SDK:

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'

const s3 = new S3Client({ region: process.env.S3_REGION! })

export async function POST(req: Request) {
    const body = await req.json()
    const key = `uploads/${crypto.randomUUID()}/${body.name}`

    const uploadUrl = await getSignedUrl(
        s3,
        new PutObjectCommand({
            Bucket: process.env.S3_BUCKET!,
            Key: key,
            ContentType: body.type,
        }),
        { expiresIn: 3600 },
    )

    return Response.json({
        key,
        uploadUrl,
        uploadHeaders: { 'Content-Type': body.type },
        expiresIn: 3600,
    })
}

Server upload

tsx

<UpupUploader mode="server" serverUrl="/api/upup" provider="aws" />

Multipart

tsx

<UpupUploader
    uploadEndpoint="/api/upload-token"
    resumable={{ protocol: 'multipart' }}
/>

tus

tsx

<UpupUploader
    resumable={{
        protocol: 'tus',
        endpoint: 'https://uploads.example.com/files',
    }}
/>