Upload GrapesJS assets straight to S3 with presigned URLs

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

import { randomUUID } from 'node:crypto';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

/** SVG is excluded on purpose: an uploaded SVG can carry script. */
const ALLOWED_TYPES = {
  'image/png': '.png',
  'image/jpeg': '.jpg',
  'image/webp': '.webp',
  'image/gif': '.gif',
};

/**
 * POST /api/uploads/presign  ← { contentType, size }
 *                            → { uploadUrl, publicUrl, key }
 *
 * The browser then PUTs the file straight to S3; the bytes never pass through this server.
 */
export function createPresignRoute({ s3, bucket, publicBaseUrl, maxBytes = 5 * 1024 * 1024, expiresIn = 60 }) {
  return async function handlePresign(req, res) {
    if (req.method !== 'POST' || new URL(req.url ?? '/', 'http://local').pathname !== '/api/uploads/presign') return false;

    const send = (status, body) => {
      res.writeHead(status, { 'content-type': 'application/json' });
      res.end(JSON.stringify(body));
    };

    // Authenticate the user here: a presign endpoint without auth is a free file host.

    let input;
    try {
      const chunks = [];
      for await (const chunk of req) chunks.push(chunk);
      input = JSON.parse(Buffer.concat(chunks).toString('utf8'));
    } catch {
      send(400, { error: 'Expected a JSON body' });
      return true;
    }

    const extension = ALLOWED_TYPES[input?.contentType];
    if (!extension) {
      send(415, { error: `Unsupported type: ${String(input?.contentType)}` });
      return true;
    }
    if (!Number.isInteger(input.size) || input.size <= 0 || input.size > maxBytes) {
      send(413, { error: `File must be between 1 byte and ${maxBytes} bytes` });
      return true;
    }

    // Never use the client's filename as the key.
    const key = `uploads/${randomUUID()}${extension}`;
    try {
      const uploadUrl = await getSignedUrl(
        s3,
        new PutObjectCommand({ Bucket: bucket, Key: key, ContentType: input.contentType }),
        // By default only `host` is signed. Signing content-type means the PUT must send the
        // type that was validated above.
        { expiresIn, signableHeaders: new Set(['content-type']) },
      );
      send(200, { uploadUrl, publicUrl: `${publicBaseUrl}/${key}`, key });
    } catch (error) {
      console.error('presign failed', error);
      send(500, { error: 'Could not create an upload URL' });
    }
    return true;
  };
}

import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

type Presigned = { uploadUrl: string; publicUrl: string };

async function uploadOne(file: File): Promise<string> {
  const presign = await fetch('/api/uploads/presign', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ contentType: file.type, size: file.size }),
  });
  if (!presign.ok) throw new Error((await presign.json()).error ?? `Presign failed (${presign.status})`);
  const { uploadUrl, publicUrl }: Presigned = await presign.json();

  // content-type is part of the signature (see presign.mjs), so it must match what was validated.
  const put = await fetch(uploadUrl, { method: 'PUT', headers: { 'content-type': file.type }, body: file });
  if (!put.ok) throw new Error(`Upload to storage failed (${put.status})`);
  return publicUrl;
}

function filesFrom(event: DragEvent): File[] {
  const list = event.dataTransfer?.files ?? (event.target as HTMLInputElement | null)?.files;
  return list ? Array.from(list) : [];
}

const editor: Editor = grapesjs.init({
  container: '#gjs',
  height: '100vh',
  storageManager: false,
  projectData: { pages: [{ component: '<section><img alt="Hero image" style="width:320px"/></section>' }] },
  assetManager: {
    // Replaces the built-in multipart POST: GrapesJS hands us the drop/change event.
    uploadFile: async (event, done) => {
      const files = filesFrom(event);
      if (!files.length) return;
      try {
        const urls = await Promise.all(files.map(uploadOne));
        const assets = files.map((file, i) => ({ type: 'image', src: urls[i]!, name: file.name }));
        editor.AssetManager.add(assets);
        // Same contract as the built-in uploader, which calls this with the server's { data } response.
        done?.({ data: assets });
      } catch (caught) {
        const error = caught instanceof Error ? caught : new Error(String(caught));
        editor.log(error.message, { ns: 'asset-upload', level: 'error' });
        editor.trigger('asset:upload:error', error);
      }
    },
  },
});

editor.on('asset:upload:error', (error) => {
  const status = document.getElementById('upload-status');
  if (status) status.textContent = `Upload failed: ${error instanceof Error ? error.message : String(error)}`;
});

// Exposed for the test harness.
Object.assign(window, { editor });