PutPut vs the Alternatives

// Get a token (no signup)
const tok = await fetch('/api/v1/auth/guest',
  { method: 'POST' }).then(r => r.json());

// Upload a file
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());

// Install cloudinary SDK, configure
import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

// Server-side: generate signature
const timestamp = Math.round(Date.now() / 1000);
const signature = cloudinary.utils
  .api_sign_request(
    { timestamp, folder: 'uploads' },
    process.env.API_SECRET!
  );

// Client-side: upload via form data
const form = new FormData();
form.append('file', file);
form.append('api_key', API_KEY);
form.append('timestamp', String(timestamp));
form.append('signature', signature);
form.append('folder', 'uploads');

const res = await fetch(
  `https://api.cloudinary.com/v1_1/${CLOUD}/image/upload`,
  { method: 'POST', body: form }
);