Comparisons

Pushduck:      ~7KB (minified + gzipped)
UploadThing:   ~200KB+ (includes server runtime)

Difference:    28x smaller

Pushduck:    ~7KB  (core client, minified + gzipped)
AWS SDK:     ~500KB (@aws-sdk/client-s3)

Difference:  71x smaller ⚡️

// Declarative schema
const router = s3.createRouter({
  imageUpload: s3.image()
    .maxFileSize('5MB')
    .middleware(async ({ req }) => {
      const user = await auth(req);
      return { userId: user.id };
    }),
});

// Client (React)
const { uploadFiles } = useUploadRoute('imageUpload');

// Imperative code
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const s3 = new S3Client({ region: 'us-east-1' });

const uploadFile = async (file: File) => {
  const command = new PutObjectCommand({
    Bucket: 'my-bucket',
    Key: `uploads/${file.name}`,
    Body: await file.arrayBuffer(),
    ContentType: file.type,
  });
  await s3.send(command);
};
// + Manual progress tracking
// + Manual validation
// + Manual React state management

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

// ❌ You must handle:
// - Creating S3 client with credentials
// - Generating unique file keys
// - Setting correct content types
// - Configuring expiration times
// - Handling CORS headers
// - Managing bucket permissions

const s3Client = new S3Client({ region: 'us-east-1' });

const generatePresignedUrl = async (fileName: string) => {
  const key = `uploads/${Date.now()}-${fileName}`;
  const command = new PutObjectCommand({
    Bucket: 'my-bucket',
    Key: key,
    ContentType: 'application/octet-stream', // Must set manually
  });
  
  const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 });
  return { url, key };
};

// ❌ You must build:
// - XMLHttpRequest wrapper for progress tracking
// - Error handling and retry logic
// - AbortController for cancellation
// - State management for multiple files
// - Progress aggregation
// - File validation (size, type)

const uploadFile = (file: File, presignedUrl: string) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    xhr.upload.onprogress = (e) => {
      const progress = (e.loaded / e.total) * 100;
      // Update UI manually
    };
    
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error('Upload failed'));
      }
    };
    
    xhr.onerror = () => reject(new Error('Network error'));
    
    xhr.open('PUT', presignedUrl);
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.send(file);
  });
};

// ❌ You must implement:
// - Request parsing and validation
// - Authentication/authorization
// - File metadata validation
// - Error responses
// - Type safety

export async function POST(request: Request) {
  const { fileName, fileSize, fileType } = await request.json();
  
  // Validate manually
  if (fileSize > 10 * 1024 * 1024) {
    return Response.json({ error: 'File too large' }, { status: 400 });
  }
  
  // Auth manually
  const user = await authenticateUser(request);
  if (!user) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  // Generate presigned URL
  const { url, key } = await generatePresignedUrl(fileName);
  
  return Response.json({ url, key });
}

// ❌ You must manage:
// - File state (idle, uploading, success, error)
// - Progress for each file
// - Overall progress
// - Error messages
// - Upload speed and ETA calculations
// - Cleanup on unmount

const [files, setFiles] = useState<FileState[]>([]);
const [isUploading, setIsUploading] = useState(false);
const [progress, setProgress] = useState(0);
const [errors, setErrors] = useState<string[]>([]);

// Implement all the upload logic...

// ❌ You must configure S3 bucket CORS manually:
{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://your-domain.com"],
      "AllowedMethods": ["PUT", "POST", "GET"],
      "AllowedHeaders": ["*"],
      "ExposeHeaders": ["ETag"]
    }
  ]
}

// ✅ Pushduck handles ALL of the above:

// Server (3 lines)
const router = s3.createRouter({
  imageUpload: s3.image().maxFileSize('5MB'),
});
export const { GET, POST } = router.handlers;

// Client (1 line)
const { uploadFiles, progress, isUploading } = useUploadRoute('imageUpload');

// You want schema-based validation
const router = s3.createRouter({
  profilePic: s3.image()
    .maxFileSize('2MB')
    .types(['image/jpeg', 'image/png'])
    .middleware(auth)
    .onUploadComplete(updateDatabase),
});

// You want rich UI out of the box
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Webcam from '@uppy/webcam';
import ScreenCapture from '@uppy/screen-capture';

const uppy = new Uppy()
  .use(Dashboard, { inline: true })
  .use(Webcam, { target: Dashboard })
  .use(ScreenCapture, { target: Dashboard });