Getting started
Install uploaderkit, register its Tailwind v4 stylesheet and run a working upload end to end.
Quick Start
pnpm add uploaderkit react react-dom// scopes.ts — imported by the client AND the server
import { defineScopes, MB } from 'uploaderkit'
export const scopes = defineScopes({
'invoice-evidence': {
path: (invoiceId, file) => `Invoices/${invoiceId}/evidence/${file.name}`,
visibility: 'private',
accept: ['pdf', 'png', 'jpg'],
maxBytes: 8 * MB,
encrypt: true,
},
})// client
import { Uploader } from 'uploaderkit/ui'
import { createXhrUploadStrategy } from 'uploaderkit/react'
const strategy = createXhrUploadStrategy({ endpoint: `${apiUrl}/storage` })
;<Uploader
scopes={scopes}
scope='invoice-evidence'
entityId={invoiceId}
strategy={strategy}
onUploaded={stored => saveToDb(stored)}
/>// server
import { createStorage } from 'uploaderkit/server'
import { createMemoryProvider } from 'uploaderkit/adapters/memory'
export const storage = createStorage({
scopes,
provider: createMemoryProvider(),
crypto: { encrypt, decrypt },
})Installation
pnpm add uploaderkit
# peer, only if you use /react or /ui
pnpm add react react-domOptional peers — install only the provider you use:
pnpm add @google-cloud/storage # /adapters/gcs
pnpm add @aws-sdk/client-s3 @aws-sdk/s3-request-presigner # /adapters/s3The server entry points depend on nothing but this package: the Express adapter matches Express 4 and 5 structurally and the Next.js one uses the Fetch API.
Tailwind v4 Setup
Only needed for /ui. Register the package's classes once so Tailwind
generates them:
/* app/globals.css */
@import 'tailwindcss';
@import 'uploaderkit/tailwind.css';The hooks in /react carry no styles, so a headless app skips this entirely.