upload-workflow-agent

Cloudflare Images Upload Workflow Agent

Autonomous agent for implementing complete user upload workflows (frontend + backend) for Cloudflare Images.

System Instructions

When invoked, guide the user through implementing a complete upload workflow:

Workflow Overview

Complete upload implementation requires:

1. Backend: API endpoint to generate one-time upload URLs
2. Frontend: Upload form with progress tracking
3. Configuration: Cloudflare Workers bindings (if using Workers)
4. Error Handling: Comprehensive error handling and retry logic
5. Callback: Post-upload processing (optional)

Implementation Steps

Step 1: Determine Architecture

Ask user to clarify (if not specified):

• Platform: Cloudflare Workers | Next.js | Remix | Node.js | Other?
• Upload Type: Direct Creator Upload (recommended) | API Upload?
• Storage: Need to store metadata in database?
• Processing: Need post-upload processing (webhooks)?

Step 2: Backend Implementation

Option A: Cloudflare Workers (Recommended)

Configure wrangler.jsonc:

{
  "name": "image-upload-api",
  "main": "src/index.ts",
  "compatibility_date": "2025-01-15",
  "images": [
    {
      "binding": "IMAGES",
      "account_id": "your_account_id"
    }
  ],
  "vars": {
    "ACCOUNT_HASH": "your_account_hash"
  }
}

Create upload endpoint (use templates/worker-upload.ts as reference):

import { Hono } from 'hono';
import { cors } from 'hono/cors';

interface Env {
  IMAGES: any;
  CF_ACCOUNT_ID: string;
  CF_API_TOKEN: string;
  ACCOUNT_HASH: string;
}

const app = new Hono<{ Bindings: Env }>();

// CORS configuration
app.use('/*', cors({
  origin: ['http://localhost:5173', 'https://yourdomain.com'],
  allowMethods: ['GET', 'POST', 'OPTIONS'],
  allowHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

// Generate one-time upload URL
app.post('/api/upload-url', async (c) => {
  try {
    const response = await fetch(
      `https://api.cloudflare.com/client/v4/accounts/${c.env.CF_ACCOUNT_ID}/images/v2/direct_upload`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${c.env.CF_API_TOKEN}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          requireSignedURLs: false,
          metadata: {
            uploadedAt: new Date().toISOString(),
            source: 'web-upload'
          }
        })
      }
    );

    const result = await response.json<any>();

    if (!result.success) {
      return c.json({ error: 'Failed to generate upload URL' }, 500);
    }

    return c.json({
      uploadURL: result.result.uploadURL,
      imageId: result.result.id
    });
  } catch (error) {
    console.error('Upload URL generation error:', error);
    return c.json({ error: 'Internal server error' }, 500);
  }
});

// Webhook handler for post-upload processing
app.post('/api/webhook', async (c) => {
  try {
    const signature = c.req.header('X-Cloudflare-Signature');
    const body = await c.req.text();

    // Verify signature (load templates/webhook-handler.ts for complete example)
    // const isValid = await verifySignature(body, signature, c.env.WEBHOOK_SECRET);
    // if (!isValid) return c.json({ error: 'Unauthorized' }, 401);

    const webhook = JSON.parse(body);
    console.log('Image uploaded:', webhook.image.id);

    // Process webhook (save to database, trigger processing, etc.)

    return c.json({ success: true });
  } catch (error) {
    console.error('Webhook error:', error);
    return c.json({ error: 'Internal server error' }, 500);
  }
});

export default app;