ayrisdev/ayristech_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/api/upload/route.ts
+32
View File
@@ -0,0 +1,32 @@
import { NextRequest, NextResponse } from 'next/server'
import cloudinary from '@/lib/cloudinary'
export async function POST(request: NextRequest) {
try {
const formData = await request.formData()
const file = formData.get('file') as File
if (!file) {
return NextResponse.json({ error: 'Dosya bulunamadı.' }, { status: 400 })
}
// Convert file to buffer
const arrayBuffer = await file.arrayBuffer()
const buffer = Buffer.from(arrayBuffer)
const base64 = `data:${file.type};base64,${buffer.toString('base64')}`
// Upload to Cloudinary
const result = await cloudinary.uploader.upload(base64, {
folder: 'ayristech/projects',
transformation: [
{ width: 1200, crop: 'limit' },
{ quality: 'auto', fetch_format: 'auto' }
]
})
return NextResponse.json({ url: result.secure_url })
} catch (error) {
console.error('Upload error:', error)
return NextResponse.json({ error: 'Yükleme başarısız oldu.' }, { status: 500 })
}
}
components/AdminClient.tsx
+60 -2
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>
<div className="flex gap-2">
<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]"
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>
components/WorkClient.tsx
+16
View File
@@ -120,6 +120,22 @@ export default function WorkClient({
<p className="text-[#7A7470] text-base leading-relaxed mb-8">
{study.desc}
</p>
{study.gallery && study.gallery.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
{study.gallery.slice(0, 3).map((src: string, i: number) => (
<div key={i} className="aspect-[16/10] w-full overflow-hidden border border-[#C8C2B8] group-hover:border-[#0A0A0A] bg-[#EDE8E0] transition-colors relative">
<img
src={src}
alt={`${study.title} preview ${i + 1}`}
className="w-full h-full object-contain grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
/>
<div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
</div>
))}
</div>
)}
<div className="flex flex-wrap items-center justify-between gap-4 pt-6 border-t border-[#D8D3CA]">
<div className="flex flex-wrap gap-2">
{(study.tech as string[]).map((t) => (
components/WorkDetailClient.tsx
+1 -1
View File
@@ -431,7 +431,7 @@ export default function WorkDetailClient({ lang, dict, project, prev, next }: Pr
<img
src={src}
alt={`${project.title} screenshot ${idx + 1}`}
className="w-full h-full object-cover grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
className="w-full h-full object-contain grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
/>
<div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
</div>
lib/cloudinary.ts
+9
View File
@@ -0,0 +1,9 @@
import { v2 as cloudinary } from 'cloudinary'
cloudinary.config({
cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
})
export default cloudinary
next-env.d.ts
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
next.config.mjs
+12
View File
@@ -1,6 +1,18 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "standalone",
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
},
{
protocol: "https",
hostname: "res.cloudinary.com",
},
],
},
};
export default nextConfig;
package-lock.json
Generated
+19
View File
@@ -10,6 +10,7 @@
"dependencies": {
"@prisma/adapter-pg": "^7.8.0",
"@prisma/client": "^7.8.0",
"cloudinary": "^2.10.0",
"framer-motion": "^12.40.0",
"next": "16.2.6",
"pg": "^8.21.0",
@@ -1722,6 +1723,18 @@
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
},
"node_modules/cloudinary": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.10.0.tgz",
"integrity": "sha512-sY09kYg7wprkndAOjZBAYqFZqwL+SxnEGcAvksOvFA+5upnFn949UjkEkHKNSwkBtW/xRDd0p6NgbSXZcxkI3w==",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.23"
},
"engines": {
"node": ">=9"
}
},
"node_modules/confbox": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
@@ -2357,6 +2370,12 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lodash": {
"version": "4.18.1",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
"license": "MIT"
},
"node_modules/long": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
package.json
+1
View File
@@ -10,6 +10,7 @@
"dependencies": {
"@prisma/adapter-pg": "^7.8.0",
"@prisma/client": "^7.8.0",
"cloudinary": "^2.10.0",
"framer-motion": "^12.40.0",
"next": "16.2.6",
"pg": "^8.21.0",