İmage upload,sıkıştırma

2026-01-13 23:36:40 +03:00
parent 6bbae0de21
commit 70f61a76b0
11 changed files with 795 additions and 0 deletions
--- a/components/ui/image-upload.tsx
+++ b/components/ui/image-upload.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Loader2, Upload, X, Image as ImageIcon } from "lucide-react"
+import imageCompression from "browser-image-compression"
+import { createClient } from "@/lib/supabase-browser"
+import { toast } from "sonner"
+import Image from "next/image"
+
+interface ImageUploadProps {
+    value?: string
+    onChange: (url: string) => void
+    onRemove: () => void
+    disabled?: boolean
+}
+
+export function ImageUpload({ value, onChange, onRemove, disabled }: ImageUploadProps) {
+    const [loading, setLoading] = useState(false)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const supabase = createClient()
+
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (!file) return
+
+        setLoading(true)
+        try {
+            // 1. Client-side Compression
+            const options = {
+                maxSizeMB: 1, // Max 1MB
+                maxWidthOrHeight: 1920, // Max 1920px width/height
+                useWebWorker: true,
+                fileType: "image/webp" // Convert to WebP if possible
+            }
+
+            // Note: browser-image-compression might return Blob instead of File
+            const compressedFile = await imageCompression(file, options)
+
+            // Create a unique file name
+            // folder structure: sliders/[timestamp]-[random].webp
+            const fileExt = "webp" // we are forcing conversion to webp usually, or use compressedFile.type
+            const fileName = `${Date.now()}-${Math.floor(Math.random() * 1000)}.${fileExt}`
+            const filePath = `uploads/${fileName}`
+
+            // 2. Upload to Supabase
+            const { error: uploadError } = await supabase.storage
+                .from("images")
+                .upload(filePath, compressedFile)
+
+            if (uploadError) {
+                throw uploadError
+            }
+
+            // 3. Get Public URL
+            const { data: { publicUrl } } = supabase.storage
+                .from("images")
+                .getPublicUrl(filePath)
+
+            onChange(publicUrl)
+            toast.success("Resim yüklendi ve optimize edildi.")
+
+        } catch (error: any) {
+            console.error("Upload error:", error)
+            toast.error("Resim yüklenirken hata oluştu: " + error.message)
+        } finally {
+            setLoading(false)
+            if (fileInputRef.current) {
+                fileInputRef.current.value = ""
+            }
+        }
+    }
+
+    return (
+        <div className="space-y-4 w-full">
+            <Label>Görsel</Label>
+
+            {value ? (
+                <div className="relative aspect-video w-full max-w-md rounded-lg overflow-hidden border bg-slate-100 dark:bg-slate-800">
+                    <Image
+                        src={value}
+                        alt="Upload preview"
+                        fill
+                        className="object-cover"
+                    />
+                    <Button
+                        type="button"
+                        onClick={onRemove}
+                        variant="destructive"
+                        size="icon"
+                        className="absolute top-2 right-2 h-8 w-8"
+                        disabled={disabled}
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                </div>
+            ) : (
+                <div
+                    onClick={() => fileInputRef.current?.click()}
+                    className="
+                        border-2 border-dashed border-slate-300 dark:border-slate-700 
+                        rounded-lg p-12 
+                        flex flex-col items-center justify-center 
+                        text-slate-500 dark:text-slate-400
+                        hover:bg-slate-50 dark:hover:bg-slate-900/50
+                        transition cursor-pointer
+                        w-full max-w-md
+                    "
+                >
+                    <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        ref={fileInputRef}
+                        onChange={handleFileChange}
+                        disabled={loading || disabled}
+                    />
+
+                    {loading ? (
+                        <div className="flex flex-col items-center gap-2">
+                            <Loader2 className="h-10 w-10 animate-spin text-primary" />
+                            <p className="text-sm font-medium">Optimize ediliyor ve yükleniyor...</p>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col items-center gap-2">
+                            <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-full">
+                                <Upload className="h-6 w-6" />
+                            </div>
+                            <p className="text-sm font-medium">Resim Yükle</p>
+                            <p className="text-xs text-muted-foreground text-center">
+                                Tıklayın veya sürükleyin.<br />
+                                (Otomatik sıkıştırma: Max 1MB, WebP)
+                            </p>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}