POST /api/upload
Content-Type: multipart/form-data

const formData = new FormData();
formData.append("file", imageBlob);
formData.append("filename", "my-design.png"); // optional

const response = await fetch("/api/upload", {
  method: "POST",
  body: formData,
});

const { url } = await response.json();

{
  "url": "https://ucarecdn.com/abc123/my-design.png"
}

// lib/image.ts
function resolveProvider() {
  // Check for forced provider
  const forced = process.env.IMAGE_PROVIDER?.toLowerCase();
  if (forced === "cloudinary" && hasCloudinary) return "cloudinary";
  if (forced === "uploadcare" && hasUploadcare) return "uploadcare";
  // ...
  
  // Auto-detect based on credentials
  if (hasCloudinary) return "cloudinary";
  if (hasUploadcare) return "uploadcare";
  if (hasImageKit) return "imagekit";
  if (hasVercelBlob) return "vercel-blob";
  
  return "local"; // Fallback to public/uploads
}

CLOUDINARY_CLOUD_NAME=yourcloud
CLOUDINARY_API_KEY=123456789
CLOUDINARY_API_SECRET=abcdefgh

UPLOADCARE_PUBLIC_KEY=demopublickey

IMAGEKIT_PUBLIC_KEY=public_xxx
IMAGEKIT_PRIVATE_KEY=private_xxx
IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/yourcompany

BLOB_READ_WRITE_TOKEN=vercel_blob_xxx

IMAGE_PROVIDER=uploadcare

// lib/image.ts
const MATTE_COLOR = { r: 5, g: 5, b: 5 };

async function ensureOpaque(buffer: Buffer): Promise<Buffer> {
  const image = sharp(buffer);
  const metadata = await image.metadata();
  
  if (metadata.hasAlpha) {
    return image
      .flatten({ background: MATTE_COLOR })
      .toBuffer();
  }
  
  return buffer;
}

await uploadImage(buffer, "print-asset.png", { 
  preserveAlpha: true 
});

import { transformUrl } from "@/lib/image";

// Resize to max 1600px
const optimized = transformUrl(originalUrl, 1600);

// Provider-specific transformations are handled automatically

// Input
"https://res.cloudinary.com/demo/image/upload/v123/design.png"

// Output (with width 800)
"https://res.cloudinary.com/demo/image/upload/w_800,c_limit,q_auto/v123/design.png"

// Input
"https://ucarecdn.com/abc123/design.png"

// Output (with width 800)
"https://ucarecdn.com/abc123/-/resize/800x/design.png"

async function writeLocalFile(buffer: Buffer, filename: string) {
  const uploadDir = path.join(process.cwd(), "public/uploads");
  await fs.mkdir(uploadDir, { recursive: true });
  
  const filepath = path.join(uploadDir, filename);
  await fs.writeFile(filepath, buffer);
  
  return `/uploads/${filename}`;
}

// React component
const [uploading, setUploading] = useState(false);

const handleUpload = async (file: File) => {
  setUploading(true);
  
  const formData = new FormData();
  formData.append("file", file);
  
  const res = await fetch("/api/upload", {
    method: "POST",
    body: formData,
  });
  
  const { url } = await res.json();
  setUploading(false);
  
  return url;
};

// 1. Upload reference image
const { url: referenceUrl } = await uploadImage(file);

// 2. Use in generation
const response = await fetch("/api/chat", {
  method: "POST",
  body: JSON.stringify({
    prompt: "similar style with blue colors",
    designUrls: [referenceUrl],
  }),
});