uploadthing-advanced

// app/api/uploadthing/core.ts — Server-side upload configuration
import { createUploadthing, type FileRouter } from 'uploadthing/next'

const f = createUploadthing()

export const uploadRouter = {
  // Profile avatar: max 4MB, images only
  avatar: f({ image: { maxFileSize: '4MB', maxFileCount: 1 } })
    .middleware(async ({ req }) => {
      const user = await auth(req)
      if (!user) throw new Error('Unauthorized')
      return { userId: user.id }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      await db.users.update(metadata.userId, { avatarUrl: file.url })
      return { url: file.url }
    }),

  // Document uploads: PDFs and images, up to 16MB
  documents: f({
    pdf: { maxFileSize: '16MB', maxFileCount: 10 },
    image: { maxFileSize: '8MB', maxFileCount: 10 },
  })
    .middleware(async ({ req }) => {
      const user = await auth(req)
      if (!user) throw new Error('Unauthorized')
      return { userId: user.id, projectId: req.headers.get('x-project-id') }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      await db.documents.create({
        userId: metadata.userId,
        projectId: metadata.projectId,
        name: file.name,
        url: file.url,
        size: file.size,
      })
    }),
} satisfies FileRouter

'use client'
import { UploadButton, UploadDropzone } from '@uploadthing/react'
import type { uploadRouter } from '@/app/api/uploadthing/core'

// Simple button
<UploadButton<typeof uploadRouter, 'avatar'>
  endpoint="avatar"
  onClientUploadComplete={(res) => {
    setAvatarUrl(res[0].url)
    toast.success('Avatar updated!')
  }}
  onUploadError={(err) => toast.error(err.message)}
/>

// Drag-and-drop zone with preview
<UploadDropzone<typeof uploadRouter, 'documents'>
  endpoint="documents"
  onClientUploadComplete={(res) => {
    setDocuments(prev => [...prev, ...res.map(f => ({ name: f.name, url: f.url }))])
  }}
  config={{ mode: 'auto' }}    // start upload immediately after drop
/>

import { useUploadThing } from '@uploadthing/react'

function CustomUploader() {
  const { startUpload, isUploading, permittedFileInfo } = useUploadThing('documents', {
    onUploadProgress: (progress) => setProgress(progress),
    onClientUploadComplete: (res) => handleComplete(res),
  })

  return (
    <div
      onDrop={(e) => {
        e.preventDefault()
        startUpload(Array.from(e.dataTransfer.files))
      }}
      onDragOver={(e) => e.preventDefault()}
    >
      {isUploading ? <ProgressBar value={progress} /> : <p>Drop files here</p>}
    </div>
  )
}