binhdeptrai/FullStack-Blog-Nestjs-Nextjs-Postgres
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

it worked

Browse Source
This commit is contained in:
binhkid2
2026-02-18 23:11:46 +09:00
parent 3bdb2e9f5b
commit 49e8081453
6 changed files with 371 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/app/api/upload-image/route.ts Normal file
View File

@@ -0,0 +1,86 @@
import { NextRequest, NextResponse } from "next/server";
const R2_WORKER = process.env.UPLOAD_R2_WORKER_API;
const R2_API_KEY = process.env.R2_UPLOAD_API_KEY;
export interface UploadImageResponse {
success: true;
url: string;
key: string;
contentType: string;
}
/**
* POST /api/upload-image
*
* Accepts a multipart/form-data body with a single "file" field.
* Proxies the binary to the Cloudflare R2 worker using the server-side API key
* (the key is never exposed to the browser).
*
* Returns: { success, url, key, contentType }
*/
export async function POST(req: NextRequest) {
console.log(R2_WORKER);
console.log(R2_API_KEY);
if (!R2_WORKER || !R2_API_KEY) {
return NextResponse.json(
{ error: "R2 upload is not configured. Set UPLOAD_R2_WORKER_API and R2_UPLOAD_API_KEY." },
{ status: 503 }
);
}
try {
const formData = await req.formData();
const file = formData.get("file");
if (!file || !(file instanceof File)) {
return NextResponse.json({ error: "No file provided" }, { status: 400 });
}
// Validate file type
const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml", "image/avif"];
if (!allowedTypes.includes(file.type)) {
return NextResponse.json(
{ error: `Unsupported file type: ${file.type}. Allowed: JPEG, PNG, GIF, WebP, SVG, AVIF.` },
{ status: 400 }
);
}
// Validate file size (max 10 MB)
const MAX_BYTES = 10 * 1024 * 1024;
if (file.size > MAX_BYTES) {
return NextResponse.json(
{ error: `File is too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Maximum is 10 MB.` },
{ status: 400 }
);
}
// Send binary to R2 worker
const arrayBuffer = await file.arrayBuffer();
const r2Res = await fetch(`${R2_WORKER}/upload`, {
method: "POST",
headers: {
"X-Api-Key": R2_API_KEY,
"Content-Type": file.type,
},
body: arrayBuffer,
});
if (!r2Res.ok) {
let errMsg = `R2 worker error ${r2Res.status}`;
try {
const body = await r2Res.json();
errMsg = body?.error || body?.message || errMsg;
} catch {
/* ignore */
}
return NextResponse.json({ error: errMsg }, { status: 502 });
}
const data = (await r2Res.json()) as UploadImageResponse;
return NextResponse.json(data);
} catch (err) {
console.error("[upload-image] Unexpected error:", err);
return NextResponse.json({ error: "Upload failed" }, { status: 500 });
}
}

35
frontend/app/dashboard/components/create-post-form.tsx
View File

@@ -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}>

49
frontend/app/dashboard/components/posts-table.tsx
View File

@@ -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>