fix: image upload via /image slash command not working (#184) (#195)

zacharias-ona · ona-agent · web-flow · commit 5df0ce565e06 · 2026-04-17T18:11:17.000+01:00
* fix: image upload via /image slash command not working (#184) - Add page-images storage bucket migration with RLS policies - Return structured errors from uploadImage instead of silent null - Show toast notifications on upload failure (type, size, storage errors) - Add regression tests for uploadImage validation and error paths Co-authored-by: Ona <no-reply@ona.com> * fix: [ci-fix] add missing SQL to page-images bucket migration The migration file was empty — no SQL to create the storage bucket or RLS policies. Added bucket creation with size/type constraints and policies for authenticated upload, public read, and owner delete. Co-authored-by: Ona <no-reply@ona.com> --------- Co-authored-by: Ona <no-reply@ona.com>
diff --git a/src/components/editor/image-plugin.test.ts b/src/components/editor/image-plugin.test.ts
@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock Supabase client
+const mockUpload = vi.fn();
+const mockGetPublicUrl = vi.fn();
+
+vi.mock("@/lib/supabase/client", () => ({
+  createClient: () => ({
+    storage: {
+      from: () => ({
+        upload: mockUpload,
+        getPublicUrl: mockGetPublicUrl,
+      }),
+    },
+  }),
+}));
+
+vi.mock("@/lib/sentry", () => ({
+  captureSupabaseError: vi.fn(),
+}));
+
+vi.mock("@sentry/nextjs", () => ({
+  captureException: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: vi.fn() },
+}));
+
+import { uploadImage } from "./image-plugin";
+
+function makeFile(
+  name: string,
+  type: string,
+  sizeBytes: number = 1024,
+): File {
+  const buffer = new ArrayBuffer(sizeBytes);
+  return new File([buffer], name, { type });
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("uploadImage", () => {
+  it("rejects unsupported image types with an error message", async () => {
+    const file = makeFile("doc.pdf", "application/pdf");
+    const result = await uploadImage(file);
+
+    expect(result.url).toBeNull();
+    expect(result.error).toBe(
+      "Unsupported image type. Use PNG, JPEG, GIF, WebP, or SVG.",
+    );
+    expect(mockUpload).not.toHaveBeenCalled();
+  });
+
+  it("rejects files exceeding 5 MB", async () => {
+    const file = makeFile("big.png", "image/png", 6 * 1024 * 1024);
+    const result = await uploadImage(file);
+
+    expect(result.url).toBeNull();
+    expect(result.error).toBe("Image is too large. Maximum size is 5 MB.");
+    expect(mockUpload).not.toHaveBeenCalled();
+  });
+
+  it("returns an error when Supabase upload fails", async () => {
+    mockUpload.mockResolvedValue({
+      error: { message: "Bucket not found", statusCode: "404" },
+    });
+
+    const file = makeFile("photo.png", "image/png");
+    const result = await uploadImage(file);
+
+    expect(result.url).toBeNull();
+    expect(result.error).toBe("Failed to upload image");
+    expect(mockUpload).toHaveBeenCalledTimes(1);
+  });
+
+  it("returns the public URL on successful upload", async () => {
+    mockUpload.mockResolvedValue({ error: null });
+    mockGetPublicUrl.mockReturnValue({
+      data: { publicUrl: "https://storage.example.com/uploads/test.png" },
+    });
+
+    const file = makeFile("photo.png", "image/png");
+    const result = await uploadImage(file);
+
+    expect(result.error).toBeNull();
+    expect(result.url).toBe(
+      "https://storage.example.com/uploads/test.png",
+    );
+  });
+
+  it("accepts all supported image MIME types", async () => {
+    mockUpload.mockResolvedValue({ error: null });
+    mockGetPublicUrl.mockReturnValue({
+      data: { publicUrl: "https://storage.example.com/uploads/img.png" },
+    });
+
+    const types = [
+      "image/png",
+      "image/jpeg",
+      "image/gif",
+      "image/webp",
+      "image/svg+xml",
+    ];
+
+    for (const type of types) {
+      const ext = type.split("/")[1].split("+")[0];
+      const file = makeFile(`test.${ext}`, type);
+      const result = await uploadImage(file);
+      expect(result.error).toBeNull();
+      expect(result.url).toBeTruthy();
+    }
+  });
+
+  it("accepts files exactly at the 5 MB limit", async () => {
+    mockUpload.mockResolvedValue({ error: null });
+    mockGetPublicUrl.mockReturnValue({
+      data: { publicUrl: "https://storage.example.com/uploads/exact.png" },
+    });
+
+    const file = makeFile("exact.png", "image/png", 5 * 1024 * 1024);
+    const result = await uploadImage(file);
+
+    expect(result.error).toBeNull();
+    expect(result.url).toBeTruthy();
+  });
+});
diff --git a/src/components/editor/image-plugin.tsx b/src/components/editor/image-plugin.tsx
@@ -13,6 +13,7 @@ import {
   type LexicalCommand,
 } from "lexical";
 import * as Sentry from "@sentry/nextjs";
+import { toast } from "sonner";
 import { $createImageNode, type ImagePayload } from "@/components/editor/image-node";
 import { createClient } from "@/lib/supabase/client";
 import { captureSupabaseError } from "@/lib/sentry";
@@ -30,9 +31,17 @@ const ACCEPTED_IMAGE_TYPES = new Set([
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 
-async function uploadImage(file: File): Promise<string | null> {
-  if (!ACCEPTED_IMAGE_TYPES.has(file.type)) return null;
-  if (file.size > MAX_FILE_SIZE) return null;
+type UploadResult =
+  | { url: string; error: null }
+  | { url: null; error: string };
+
+export async function uploadImage(file: File): Promise<UploadResult> {
+  if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {
+    return { url: null, error: "Unsupported image type. Use PNG, JPEG, GIF, WebP, or SVG." };
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    return { url: null, error: "Image is too large. Maximum size is 5 MB." };
+  }
 
   const supabase = createClient();
   const ext = file.name.split(".").pop() ?? "png";
@@ -48,14 +57,14 @@ async function uploadImage(file: File): Promise<string | null> {
 
   if (error) {
     captureSupabaseError(error, "image-plugin:upload");
-    return null;
+    return { url: null, error: "Failed to upload image" };
   }
 
   const { data: urlData } = supabase.storage
     .from("page-images")
     .getPublicUrl(filePath);
 
-  return urlData.publicUrl;
+  return { url: urlData.publicUrl, error: null };
 }
 
 export function ImagePlugin(): null {
@@ -98,16 +107,19 @@ export function ImagePlugin(): null {
 
         for (const file of imageFiles) {
           void uploadImage(file)
-            .then((url) => {
-              if (url) {
-                editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-                  src: url,
-                  altText: file.name,
-                });
+            .then((result) => {
+              if (result.error !== null) {
+                toast.error(result.error, { duration: 8000 });
+                return;
               }
+              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                src: result.url,
+                altText: file.name,
+              });
             })
             .catch((error) => {
               Sentry.captureException(error);
+              toast.error("Failed to upload image", { duration: 8000 });
             });
         }
 
@@ -146,15 +158,18 @@ export function openImagePicker(editor: ReturnType<typeof useLexicalComposerCont
     if (!file) return;
 
     try {
-      const url = await uploadImage(file);
-      if (url) {
-        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-          src: url,
-          altText: file.name,
-        });
+      const result = await uploadImage(file);
+      if (result.error !== null) {
+        toast.error(result.error, { duration: 8000 });
+        return;
       }
+      editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+        src: result.url,
+        altText: file.name,
+      });
     } catch (error) {
       Sentry.captureException(error);
+      toast.error("Failed to upload image", { duration: 8000 });
     }
   };
   input.click();
diff --git a/supabase/migrations/20260417165531_create_page_images_bucket.sql b/supabase/migrations/20260417165531_create_page_images_bucket.sql
@@ -0,0 +1,29 @@
+-- Create the page-images storage bucket for editor image uploads.
+-- Public bucket so images can be served without auth tokens.
+
+INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
+VALUES (
+  'page-images',
+  'page-images',
+  true,
+  5242880, -- 5 MB
+  ARRAY['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml']
+);
+
+-- Authenticated users can upload images
+CREATE POLICY "Authenticated users can upload page images"
+  ON storage.objects FOR INSERT
+  TO authenticated
+  WITH CHECK (bucket_id = 'page-images');
+
+-- Anyone can view uploaded images (public bucket)
+CREATE POLICY "Public read access for page images"
+  ON storage.objects FOR SELECT
+  TO public
+  USING (bucket_id = 'page-images');
+
+-- Image owners can delete their uploads
+CREATE POLICY "Users can delete own page images"
+  ON storage.objects FOR DELETE
+  TO authenticated
+  USING (bucket_id = 'page-images' AND (storage.foldername(name))[1] = 'uploads' AND auth.uid() = owner);
