PutPut vs the Alternatives

// Works anywhere — no platform lock-in
const tok = await fetch('/api/v1/auth/guest',
  { method: 'POST' }).then(r => r.json());

const pre = await fetch('/api/v1/upload/presign',
  { method: 'POST',
    headers: { Authorization: `Bearer ${tok.token}` },
    body: JSON.stringify({ filename: 'photo.jpg',
      content_type: 'image/jpeg' }) }
).then(r => r.json());

await fetch(pre.upload_url,
  { method: 'PUT', body: file });

const result = await fetch('/api/v1/upload/confirm',
  { method: 'POST',
    headers: { Authorization: `Bearer ${tok.token}` },
    body: JSON.stringify({ upload_id: pre.upload_id }) }
).then(r => r.json());

// Requires Vercel deployment + @vercel/blob
// 1. Server action (Next.js only)
'use server';
import { put } from '@vercel/blob';

export async function upload(
  formData: FormData
) {
  const file = formData.get('file') as File;
  const blob = await put(
    file.name,
    file,
    { access: 'public' }
  );
  // blob.url — served via Vercel's CDN
  // egress: $0.15/GB after 1 GB/mo free
  return blob;
}

// 2. Client component
'use client';
async function handleUpload(file: File) {
  const form = new FormData();
  form.append('file', file);
  const blob = await upload(form);
}