feat: add cloudinary image upload to project forms, fix project details gallery styling, add gallery preview to project list

This commit is contained in:
mstfyldz
2026-06-05 21:35:46 +03:00
parent 3794a70901
commit 1f1bb8d913
9 changed files with 157 additions and 10 deletions
+66 -8
View File
@@ -95,6 +95,18 @@ export default function AdminClient({
const [newGalleryItem, setNewGalleryItem] = useState("");
const [formWebsite, setFormWebsite] = useState("");
const [uploadingImage, setUploadingImage] = useState(false);
const [uploadingGallery, setUploadingGallery] = useState(false);
const handleFileUpload = async (file: File) => {
const fd = new FormData();
fd.append('file', file);
const res = await fetch('/api/upload', { method: 'POST', body: fd });
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Yükleme başarısız');
return data.url;
};
// Blog CRUD State
const [posts, setPosts] = useState<BlogPost[]>(initialBlogPosts);
const [blogSearchQuery, setBlogSearchQuery] = useState("");
@@ -1103,13 +1115,37 @@ export default function AdminClient({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-1">
<label className="font-mono text-[9px] uppercase text-[#A0998E] block">Kapak Görseli URL Adresi</label>
<input
type="text"
value={formImage}
onChange={(e) => setFormImage(e.target.value)}
placeholder="https://images.unsplash.com/..."
className="w-full font-mono text-[11px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
/>
<div className="flex gap-2">
<input
type="text"
value={formImage}
onChange={(e) => setFormImage(e.target.value)}
placeholder="https://images.unsplash.com/..."
className="flex-grow font-mono text-[11px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
/>
<label className="border border-[#0A0A0A] px-3 flex items-center justify-center font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] hover:bg-[#EDE8E0] shrink-0">
{uploadingImage ? "YÜKLENİYOR..." : "YÜKLE"}
<input
type="file"
accept="image/*"
className="hidden"
disabled={uploadingImage}
onChange={async (e) => {
const file = e.target.files?.[0];
if (!file) return;
setUploadingImage(true);
try {
const url = await handleFileUpload(file);
setFormImage(url);
} catch (err) {
showToast("Resim yüklenemedi", "alert");
} finally {
setUploadingImage(false);
}
}}
/>
</label>
</div>
</div>
<div className="space-y-1">
<label className="font-mono text-[9px] uppercase text-[#A0998E] block">Website URL (Opsiyonel)</label>
@@ -1205,10 +1241,32 @@ export default function AdminClient({
placeholder="https://images.unsplash.com/..."
className="flex-grow font-mono text-[9px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
/>
<label className="border border-[#0A0A0A] px-3 flex items-center justify-center font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] hover:bg-[#EDE8E0] shrink-0">
{uploadingGallery ? "YÜKLENİYOR..." : "RESİM YÜKLE"}
<input
type="file"
accept="image/*"
className="hidden"
disabled={uploadingGallery}
onChange={async (e) => {
const file = e.target.files?.[0];
if (!file) return;
setUploadingGallery(true);
try {
const url = await handleFileUpload(file);
setFormGallery(prev => [...prev, url]);
} catch (err) {
showToast("Resim yüklenemedi", "alert");
} finally {
setUploadingGallery(false);
}
}}
/>
</label>
<button
type="button"
onClick={handleAddGalleryItem}
className="border border-[#0A0A0A] px-4 font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8]"
className="border border-[#0A0A0A] px-4 font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] shrink-0"
>
[ EKLE ]
</button>