Primeros pasos
Instala uploaderkit, registra su hoja de estilos de Tailwind v4 y ejecuta una subida completa de principio a fin.
Inicio rápido
pnpm add uploaderkit react react-dom// scopes.ts — lo importan el cliente Y el servidor
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,
},
})// cliente
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)}
/>// servidor
import { createStorage } from 'uploaderkit/server'
import { createMemoryProvider } from 'uploaderkit/adapters/memory'
export const storage = createStorage({
scopes,
provider: createMemoryProvider(),
crypto: { encrypt, decrypt },
})Instalación
pnpm add uploaderkit
# peer, solo si usas /react o /ui
pnpm add react react-domPeers opcionales — instala únicamente el provider que uses:
pnpm add @google-cloud/storage # /adapters/gcs
pnpm add @aws-sdk/client-s3 @aws-sdk/s3-request-presigner # /adapters/s3Las entradas de servidor no dependen de nada más que de este paquete: el adaptador de Express calza estructuralmente con Express 4 y 5, y el de Next.js usa la Fetch API.
Configuración de Tailwind v4
Solo hace falta para /ui. Registra las clases del paquete una vez para que
Tailwind las genere:
/* app/globals.css */
@import 'tailwindcss';
@import 'uploaderkit/tailwind.css';Los hooks de /react no llevan estilos, así que una app headless se salta esto
por completo.