"use client"; import { ChangeEvent, FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; type PreviewImage = { file: File; preview: string; }; type UploadedImage = { url: string; fileName: string; }; export default function CreateGalleryPage() { const router = useRouter(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [category, setCategory] = useState(""); const [images, setImages] = useState([]); const [loading, setLoading] = useState(false); const [uploading, setUploading] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); /* * Membersihkan object URL * ketika component dihancurkan. */ useEffect(() => { return () => { images.forEach((item) => { URL.revokeObjectURL(item.preview); }); }; }, [images]); /* * Pilih gambar */ const handleImageChange = ( event: ChangeEvent ) => { const files = Array.from(event.target.files || []); if (files.length === 0) { return; } const allowedTypes = [ "image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif", ]; const maxSize = 5 * 1024 * 1024; const validFiles: PreviewImage[] = []; for (const file of files) { if (!allowedTypes.includes(file.type)) { alert( `${file.name} bukan file gambar yang didukung.` ); continue; } if (file.size > maxSize) { alert( `${file.name} terlalu besar. Maksimal 5 MB.` ); continue; } validFiles.push({ file, preview: URL.createObjectURL(file), }); } setImages((previous) => [ ...previous, ...validFiles, ]); event.target.value = ""; }; /* * Hapus satu gambar */ const removeImage = (index: number) => { setImages((previous) => { const item = previous[index]; if (item) { URL.revokeObjectURL(item.preview); } return previous.filter( (_, itemIndex) => itemIndex !== index ); }); }; /* * Submit Gallery */ const handleSubmit = async ( event: FormEvent ) => { event.preventDefault(); if (!title.trim()) { alert("Title wajib diisi."); return; } if (images.length === 0) { alert("Minimal satu gambar harus dipilih."); return; } setLoading(true); try { /* * STEP 1 * Upload semua file */ setUploading(true); const formData = new FormData(); images.forEach((item) => { formData.append("files", item.file); }); const uploadResponse = await fetch( "/api/gallery/upload", { method: "POST", body: formData, } ); const uploadResult = await uploadResponse.json(); if ( !uploadResponse.ok || !uploadResult.success ) { throw new Error( uploadResult.message || "Gagal mengupload gambar." ); } const uploadedImages: UploadedImage[] = uploadResult.data; setUploading(false); /* * STEP 2 * Simpan Gallery ke database */ const galleryResponse = await fetch( "/api/gallery", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: title.trim(), description: description.trim() || null, category: category.trim() || null, images: uploadedImages.map( (item) => item.url ), }), } ); const galleryResult = await galleryResponse.json(); if ( !galleryResponse.ok || !galleryResult.success ) { throw new Error( galleryResult.message || "Gagal menyimpan Gallery." ); } alert( "Gallery berhasil ditambahkan." ); router.push("/secure-panel/gallery"); router.refresh(); } catch (error) { console.error( "CREATE GALLERY:", error ); alert( error instanceof Error ? error.message : "Terjadi kesalahan saat menyimpan Gallery." ); } finally { setUploading(false); setLoading(false); } }; return ( <>
{/* ========================= MOBILE OVERLAY ========================= */}
setSidebarOpen(false) } /> {/* ========================= SIDEBAR ========================= */} {/* ========================= MAIN ========================= */}
{/* TOPBAR */}
ADMIN PANEL
Gallery Management
Website Logout
{/* ========================= CONTENT ========================= */}
{/* PAGE HEADING */}
Kembali ke Gallery
WEBSITE CONTENT

Tambah Gallery

Tambahkan koleksi foto dan dokumentasi baru ke dalam gallery website portfolio GloVaTech. Anda dapat mengunggah satu atau beberapa gambar sekaligus.

{/* ========================= FORM CARD ========================= */}
{/* HEADER */}
GALLERY CONTENT

Informasi Gallery

Lengkapi informasi gallery, kemudian pilih gambar yang ingin ditampilkan sebagai satu koleksi dokumentasi.

{/* BODY */}
{/* TITLE */}
setTitle( event.target.value ) } placeholder="Contoh: Engineering Workshop" disabled={loading} />
{/* DESCRIPTION */}