it worked

frontend/app/dashboard/components/create-post-form.tsx

@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { ImageUploader } from "@/components/dashboard/image-uploader";
 import { Loader2, PlusCircle } from "lucide-react";
 import { PostStatus, ContentFormat, UserRole } from "@/lib/types";
 
@@ -30,6 +31,10 @@ export function CreatePostForm({ userRole, onCreated }: Props) {
   );
   const [isFeatured, setIsFeatured] = useState("false");
 
+  // Controlled image state (ImageUploader is not a native input element)
+  const [featuredImageUrl, setFeaturedImageUrl] = useState("");
+  const [featuredImageAlt, setFeaturedImageAlt] = useState("");
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const fd = new FormData(e.currentTarget);
@@ -43,8 +48,9 @@ export function CreatePostForm({ userRole, onCreated }: Props) {
       isFeatured: isFeatured === "true",
       categories: fd.get("categories") || undefined,
       tags: fd.get("tags") || undefined,
-      featuredImageUrl: fd.get("featuredImageUrl") || undefined,
-      featuredImageAlt: fd.get("featuredImageAlt") || undefined,
+      // image values come from controlled state, not FormData
+      featuredImageUrl: featuredImageUrl || undefined,
+      featuredImageAlt: featuredImageAlt || undefined,
     };
 
     setLoading(true);
@@ -55,6 +61,9 @@ export function CreatePostForm({ userRole, onCreated }: Props) {
       });
       toast.success("Post created!");
       (e.target as HTMLFormElement).reset();
+      // Reset controlled image state
+      setFeaturedImageUrl("");
+      setFeaturedImageAlt("");
       onCreated();
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : "Failed to create post");
@@ -174,20 +183,14 @@ export function CreatePostForm({ userRole, onCreated }: Props) {
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2">
-        <div className="space-y-1">
-          <Label htmlFor="cp-imgurl">Featured Image URL</Label>
-          <Input
-            id="cp-imgurl"
-            name="featuredImageUrl"
-            placeholder="https://…"
-          />
-        </div>
-        <div className="space-y-1">
-          <Label htmlFor="cp-imgalt">Image Alt Text</Label>
-          <Input id="cp-imgalt" name="featuredImageAlt" placeholder="Alt text" />
-        </div>
-      </div>
+      {/* ── Featured image upload ─────────────────────────────────────────── */}
+      <ImageUploader
+        value={featuredImageUrl}
+        onChange={setFeaturedImageUrl}
+        altValue={featuredImageAlt}
+        onAltChange={setFeaturedImageAlt}
+        label="Featured Image"
+      />
 
       <div className="flex justify-end">
         <Button type="submit" disabled={loading}>

frontend/app/dashboard/components/posts-table.tsx

@@ -8,7 +8,6 @@ import { CreatePostForm } from "./create-post-form";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Select,
@@ -28,6 +27,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { ImageUploader } from "@/components/dashboard/image-uploader";
 import { Eye, Loader2, Pencil, Trash2, X, Check, ExternalLink } from "lucide-react";
 import Link from "next/link";
 
@@ -36,9 +36,16 @@ interface Props {
   userRole: UserRole;
 }
 
+/** Per-post edit image state so each inline form has its own uploader values. */
+interface EditImageState {
+  url: string;
+  alt: string;
+}
+
 export function PostsTable({ initialPosts, userRole }: Props) {
   const [posts, setPosts] = useState<BlogPost[]>(initialPosts);
   const [editingId, setEditingId] = useState<string | null>(null);
+  const [editImage, setEditImage] = useState<EditImageState>({ url: "", alt: "" });
   const [loading, setLoading] = useState(false);
 
   const refreshPosts = useCallback(async () => {
@@ -52,6 +59,14 @@ export function PostsTable({ initialPosts, userRole }: Props) {
     }
   }, []);
 
+  const startEditing = (post: BlogPost) => {
+    setEditingId(post.id);
+    setEditImage({
+      url: post.featuredImageUrl || "",
+      alt: post.featuredImageAlt || "",
+    });
+  };
+
   const handleDelete = async (id: string) => {
     setLoading(true);
     try {
@@ -81,8 +96,9 @@ export function PostsTable({ initialPosts, userRole }: Props) {
       isFeatured: fd.get("isFeatured") === "true",
       categories: fd.get("categories") || undefined,
       tags: fd.get("tags") || undefined,
-      featuredImageUrl: fd.get("featuredImageUrl") || undefined,
-      featuredImageAlt: fd.get("featuredImageAlt") || undefined,
+      // Image comes from controlled ImageUploader state
+      featuredImageUrl: editImage.url || undefined,
+      featuredImageAlt: editImage.alt || undefined,
     };
     setLoading(true);
     try {
@@ -179,10 +195,15 @@ export function PostsTable({ initialPosts, userRole }: Props) {
                     <Input name="categories" defaultValue={post.categories.join(",")} placeholder="Categories" />
                     <Input name="tags" defaultValue={post.tags.join(",")} placeholder="Tags" />
                   </div>
-                  <div className="grid gap-2 sm:grid-cols-2">
-                    <Input name="featuredImageUrl" defaultValue={post.featuredImageUrl || ""} placeholder="Image URL" />
-                    <Input name="featuredImageAlt" defaultValue={post.featuredImageAlt || ""} placeholder="Image Alt" />
-                  </div>
+
+                  {/* ── Image upload (replaces the old URL text inputs) ── */}
+                  <ImageUploader
+                    value={editImage.url}
+                    onChange={(url) => setEditImage((prev) => ({ ...prev, url }))}
+                    altValue={editImage.alt}
+                    onAltChange={(alt) => setEditImage((prev) => ({ ...prev, alt }))}
+                    label="Featured Image"
+                  />
 
                   <div className="flex gap-2 justify-end">
                     <Button type="button" variant="ghost" onClick={() => setEditingId(null)}>
@@ -197,7 +218,7 @@ export function PostsTable({ initialPosts, userRole }: Props) {
               ) : (
                 /* ── Post card view ─────────────────────────────────────── */
                 <div className="flex flex-wrap items-start justify-between gap-3">
-                  <div className="space-y-1 min-w-0">
+                  <div className="space-y-1 min-w-0 flex-1">
                     <div className="flex items-center gap-2 flex-wrap">
                       <Link
                         href={`/blog/${post.slug}`}
@@ -240,6 +261,16 @@ export function PostsTable({ initialPosts, userRole }: Props) {
                         <Badge key={t} variant="outline" className="text-xs">#{t}</Badge>
                       ))}
                     </div>
+
+                    {/* Thumbnail if image exists */}
+                    {post.featuredImageUrl && (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={post.featuredImageUrl}
+                        alt={post.featuredImageAlt || ""}
+                        className="mt-2 h-16 w-28 rounded-md object-cover border"
+                      />
+                    )}
                   </div>
 
                   {/* Actions */}
@@ -249,7 +280,7 @@ export function PostsTable({ initialPosts, userRole }: Props) {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={() => setEditingId(post.id)}
+                          onClick={() => startEditing(post)}
                         >
                           <Pencil className="h-4 w-4" />
                         </Button>