@moontra/moonui-pro 2.8.15 → 2.9.0

package/src/components/file-upload/index.tsx

@@ -1,363 +1,1260 @@
 "use client"
 
-import React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { Button } from '../ui/button'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
+import React, { useCallback, useState, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cva } from 'class-variance-authority'
 import { 
   Upload, 
+  X, 
   File, 
-  Image, 
-  X,
-  Download,
+  Image as ImageIcon, 
+  Video, 
+  Music, 
   FileText,
-  Video,
-  Music,
-  Archive,
   AlertCircle,
-  CheckCircle2,
   Loader2,
+  Play,
+  Pause,
+  RotateCcw,
+  Download,
+  Eye,
+  Trash2,
+  MoreHorizontal,
+  Copy,
+  Share,
+  Archive,
   Lock,
-  Sparkles
+  Sparkles,
+  CheckCircle2
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { Progress } from '../ui/progress'
+import { Card, CardContent } from '../ui/card'
+import { 
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger 
+} from '../ui/dropdown-menu'
+import { 
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle 
+} from '../ui/dialog'
 import { useSubscription } from '../../hooks/use-subscription'
 
-interface FileUploadProps {
+// Ana interface'ler ve type'lar
+export interface FileUploadProProps {
   accept?: string
   multiple?: boolean
-  maxSize?: number // in MB
+  maxSize?: number // bytes cinsinden
   maxFiles?: number
-  onUpload?: (files: File[]) => Promise<void>
-  onRemove?: (file: File) => void
-  className?: string
   disabled?: boolean
+  className?: string
+  variant?: 'default' | 'compact' | 'grid'
+  theme?: 'light' | 'dark' | 'auto'
+  
+  // Gelişmiş özellikler
+  chunkSize?: number // chunk upload için
+  resumable?: boolean
+  compression?: boolean
+  imageResize?: {
+    maxWidth: number
+    maxHeight: number
+    quality: number
+  }
+  
+  // Validasyon
+  allowedMimeTypes?: string[]
+  maxTotalSize?: number
+  customValidation?: (file: File) => Promise<string | null>
+  duplicateCheck?: boolean
+  
+  // Upload ayarları
+  uploadStrategy?: 'direct' | 'presigned' | 'multipart'
+  endpoint?: string
+  headers?: Record<string, string>
+  
+  // Callbacks
+  onUpload?: (files: FileUploadItem[]) => Promise<void>
+  onProgress?: (fileId: string, progress: number) => void
+  onComplete?: (fileId: string, result: any) => void
+  onError?: (fileId: string, error: string) => void
+  onRemove?: (fileId: string) => void
+  onPreview?: (file: FileUploadItem) => void
+  onBulkSelect?: (selectedIds: string[]) => void
+  
+  // UI özelleştirme
   showPreview?: boolean
-  allowedTypes?: string[]
+  showProgress?: boolean
+  showMetadata?: boolean
+  allowBulkOperations?: boolean
+  previewTypes?: ('image' | 'video' | 'audio' | 'pdf' | 'document')[]
 }
 
-interface UploadedFile {
-  file: File
+export interface FileUploadItem {
   id: string
-  status: 'uploading' | 'success' | 'error'
+  file: File
+  status: 'pending' | 'uploading' | 'paused' | 'success' | 'error' | 'cancelled'
   progress: number
+  uploadedBytes?: number
+  totalBytes: number
+  speed?: number // bytes/second
+  estimatedTime?: number // seconds
   error?: string
+  chunks?: FileChunk[]
+  preview?: FilePreview
+  metadata?: FileMetadata
+  result?: any // upload sonucu
+}
+
+interface FileChunk {
+  index: number
+  start: number
+  end: number
+  status: 'pending' | 'uploading' | 'success' | 'error'
+  attempts: number
+}
+
+interface FilePreview {
+  type: 'image' | 'video' | 'audio' | 'pdf' | 'document' | 'unknown'
   url?: string
+  thumbnail?: string
+  duration?: number // video/audio için
+  dimensions?: { width: number; height: number }
+  pages?: number // PDF için
 }
 
-const getFileIcon = (type: string) => {
-  if (type.startsWith('image/')) return <Image className="h-4 w-4" />
-  if (type.startsWith('video/')) return <Video className="h-4 w-4" />
-  if (type.startsWith('audio/')) return <Music className="h-4 w-4" />
-  if (type.includes('pdf')) return <FileText className="h-4 w-4" />
-  if (type.includes('zip') || type.includes('rar')) return <Archive className="h-4 w-4" />
-  return <File className="h-4 w-4" />
+interface FileMetadata {
+  name: string
+  size: number
+  type: string
+  lastModified: number
+  hash?: string
+  dimensions?: { width: number; height: number }
+  duration?: number
+  bitrate?: number
 }
 
+// CVA variants
+const fileUploadVariants = cva(
+  "relative overflow-hidden transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "border-2 border-dashed rounded-lg p-8",
+        compact: "border border-dashed rounded-md p-4",
+        grid: "border-2 border-dashed rounded-lg p-6"
+      },
+      state: {
+        idle: "border-muted-foreground/25 hover:border-primary/50",
+        dragover: "border-primary bg-primary/5 scale-102",
+        disabled: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      state: "idle"
+    }
+  }
+)
+
+// Utility fonksiyonlar
 const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 Bytes'
+  if (bytes === 0) return '0 B'
   const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
   const i = Math.floor(Math.log(bytes) / Math.log(k))
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
-export function FileUpload({
-  accept = '*',
-  multiple = false,
-  maxSize = 10, // 10MB default
-  maxFiles = 5,
-  onUpload,
-  onRemove,
-  className,
-  disabled = false,
-  showPreview = true,
-  allowedTypes = []
-}: FileUploadProps) {
-  // Check if we're in docs mode or have pro access
-  const { hasProAccess, isLoading } = useSubscription()
-  
-  // In docs mode, always show the component
+const formatTime = (seconds: number): string => {
+  if (seconds < 60) return `${Math.round(seconds)}s`
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.round(seconds % 60)
+  return `${minutes}m ${remainingSeconds}s`
+}
+
+const getFileIcon = (type: string, size: 'sm' | 'md' | 'lg' = 'md') => {
+  const iconSize = size === 'sm' ? 'h-4 w-4' : size === 'md' ? 'h-5 w-5' : 'h-6 w-6'
   
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!isLoading && !hasProAccess) {
-    return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="py-12 text-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-sm mb-4">
-                File Upload is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <div className="flex gap-3 justify-center">
-                <a href="/pricing">
-                  <Button size="sm">
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    Upgrade to Pro
-                  </Button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
+  if (type.startsWith('image/')) return <ImageIcon className={iconSize} />
+  if (type.startsWith('video/')) return <Video className={iconSize} />
+  if (type.startsWith('audio/')) return <Music className={iconSize} />
+  if (type.includes('pdf')) return <FileText className={iconSize} />
+  if (type.includes('zip') || type.includes('rar') || type.includes('7z')) {
+    return <Archive className={iconSize} />
   }
-  
-  const [files, setFiles] = React.useState<UploadedFile[]>([])
-  const [isDragOver, setIsDragOver] = React.useState(false)
-  const [isUploading, setIsUploading] = React.useState(false)
-  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  return <File className={iconSize} />
+}
 
-  const validateFile = (file: File): string | null => {
-    // Check file size
-    if (file.size > maxSize * 1024 * 1024) {
-      return `File size must be less than ${maxSize}MB`
-    }
+const generateFileHash = async (file: File): Promise<string> => {
+  const buffer = await file.arrayBuffer()
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
+}
 
-    // Check file type
-    if (allowedTypes.length > 0 && !allowedTypes.includes(file.type)) {
-      return `File type ${file.type} is not allowed`
+const createImagePreview = (file: File): Promise<FilePreview> => {
+  return new Promise((resolve) => {
+    const img = new Image()
+    const url = URL.createObjectURL(file)
+    
+    img.onload = () => {
+      resolve({
+        type: 'image',
+        url,
+        thumbnail: url,
+        dimensions: { width: img.width, height: img.height }
+      })
     }
-
-    return null
-  }
-
-  const handleFileSelect = async (selectedFiles: FileList | null) => {
-    if (!selectedFiles || disabled) return
-
-    const fileArray = Array.from(selectedFiles)
     
-    // Check max files limit
-    if (files.length + fileArray.length > maxFiles) {
-      alert(`Maximum ${maxFiles} files allowed`)
-      return
+    img.onerror = () => {
+      resolve({
+        type: 'image',
+        url
+      })
     }
+    
+    img.src = url
+  })
+}
 
-    const validFiles: UploadedFile[] = []
-    const invalidFiles: string[] = []
-
-    fileArray.forEach(file => {
-      const error = validateFile(file)
-      if (error) {
-        invalidFiles.push(`${file.name}: ${error}`)
-      } else {
-        validFiles.push({
-          file,
-          id: Math.random().toString(36).substr(2, 9),
-          status: 'uploading',
-          progress: 0
+const createVideoPreview = (file: File): Promise<FilePreview> => {
+  return new Promise((resolve) => {
+    const video = document.createElement('video')
+    const url = URL.createObjectURL(file)
+    
+    video.onloadedmetadata = () => {
+      // Video thumbnail oluşturma
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')!
+      
+      canvas.width = 320
+      canvas.height = (video.videoHeight / video.videoWidth) * 320
+      
+      video.currentTime = Math.min(1, video.duration / 4) // İlk saniye veya %25
+      
+      video.onseeked = () => {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
+        const thumbnail = canvas.toDataURL('image/jpeg', 0.8)
+        
+        resolve({
+          type: 'video',
+          url,
+          thumbnail,
+          duration: video.duration,
+          dimensions: { width: video.videoWidth, height: video.videoHeight }
         })
       }
-    })
-
-    if (invalidFiles.length > 0) {
-      alert(invalidFiles.join('\n'))
     }
+    
+    video.onerror = () => {
+      resolve({
+        type: 'video',
+        url
+      })
+    }
+    
+    video.src = url
+  })
+}
 
-    if (validFiles.length === 0) return
+// Bulk operation bileşeni
+const BulkActions = ({ 
+  selectedIds, 
+  onClearSelection, 
+  onBulkRemove,
+  onBulkDownload 
+}: {
+  selectedIds: string[]
+  onClearSelection: () => void
+  onBulkRemove: () => void
+  onBulkDownload: () => void
+}) => {
+  if (selectedIds.length === 0) return null
+  
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      className="flex items-center gap-2 p-3 bg-primary/5 rounded-lg border"
+    >
+      <span className="text-sm font-medium">{selectedIds.length} dosya seçildi</span>
+      <div className="flex gap-1 ml-auto">
+        <Button variant="ghost" size="sm" onClick={onBulkDownload}>
+          <Download className="h-4 w-4 mr-1" />
+          İndir
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onBulkRemove}>
+          <Trash2 className="h-4 w-4 mr-1" />
+          Sil
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onClearSelection}>
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </motion.div>
+  )
+}
 
-    setFiles(prev => [...prev, ...validFiles])
-    setIsUploading(true)
+// Dosya önizleme modal
+const FilePreviewModal = ({ 
+  file, 
+  isOpen, 
+  onClose 
+}: {
+  file: FileUploadItem | null
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  if (!file || !file.preview) return null
+  
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[90vh]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {getFileIcon(file.file.type)}
+            {file.file.name}
+            <Badge variant="secondary">
+              {formatFileSize(file.file.size)}
+            </Badge>
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex items-center justify-center p-4 bg-muted/20 rounded-lg">
+          {file.preview.type === 'image' && (
+            <img 
+              src={file.preview.url} 
+              alt={file.file.name}
+              className="max-w-full max-h-[60vh] object-contain rounded"
+            />
+          )}
+          
+          {file.preview.type === 'video' && (
+            <video 
+              src={file.preview.url} 
+              controls 
+              className="max-w-full max-h-[60vh] rounded"
+            />
+          )}
+          
+          {file.preview.type === 'audio' && (
+            <div className="w-full max-w-md">
+              <audio src={file.preview.url} controls className="w-full" />
+            </div>
+          )}
+          
+          {!['image', 'video', 'audio'].includes(file.preview.type) && (
+            <div className="text-center py-8">
+              {getFileIcon(file.file.type, 'lg')}
+              <p className="mt-2 text-muted-foreground">Önizleme mevcut değil</p>
+            </div>
+          )}
+        </div>
+        
+        {file.preview.dimensions && (
+          <div className="flex gap-4 text-sm text-muted-foreground">
+            <span>Boyutlar: {file.preview.dimensions.width} × {file.preview.dimensions.height}</span>
+            {file.preview.duration && (
+              <span>Süre: {formatTime(file.preview.duration)}</span>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
 
-    // Simulate upload process
-    if (onUpload) {
+// Ana bileşen
+export const MoonUIFileUploadPro = React.forwardRef<HTMLDivElement, FileUploadProProps>(
+  ({
+    accept = "*",
+    multiple = true,
+    maxSize = 100 * 1024 * 1024, // 100MB
+    maxFiles = 10,
+    disabled = false,
+    className,
+    variant = "default",
+    chunkSize = 1024 * 1024, // 1MB chunks
+    resumable = true,
+    compression = false,
+    allowedMimeTypes = [],
+    maxTotalSize,
+    duplicateCheck = true,
+    uploadStrategy = 'direct',
+    showPreview = true,
+    showProgress = true,
+    showMetadata = true,
+    allowBulkOperations = true,
+    previewTypes = ['image', 'video', 'audio', 'pdf'],
+    onUpload,
+    onProgress,
+    onComplete,
+    onError,
+    onRemove,
+    onPreview,
+    onBulkSelect,
+    customValidation,
+    ...props
+  }, ref) => {
+    
+    // Subscription kontrolü - Pro bileşen
+    const { hasProAccess, isLoading } = useSubscription()
+    
+    // State'ler
+    const [files, setFiles] = useState<FileUploadItem[]>([])
+    const [isDragOver, setIsDragOver] = useState(false)
+    const [selectedIds, setSelectedIds] = useState<string[]>([])
+    const [previewFile, setPreviewFile] = useState<FileUploadItem | null>(null)
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const uploadQueue = useRef<Map<string, AbortController>>(new Map())
+    
+    // Pro lisans kontrolü
+    if (!isLoading && !hasProAccess) {
+      return (
+        <Card className={cn("w-full", className)}>
+          <CardContent className="py-12 text-center">
+            <div className="max-w-md mx-auto space-y-4">
+              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg mb-2">Pro Özellik</h3>
+                <p className="text-muted-foreground text-sm mb-4">
+                  Gelişmiş Dosya Yükleme sadece MoonUI Pro abonelerine özeldir.
+                </p>
+                <div className="flex gap-3 justify-center">
+                  <a href="/pricing">
+                    <Button size="sm">
+                      <Sparkles className="mr-2 h-4 w-4" />
+                      Pro'ya Yükseltin
+                    </Button>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )
+    }
+    
+    // Dosya validasyonu
+    const validateFile = useCallback(async (file: File): Promise<string | null> => {
+      // Boyut kontrolü
+      if (file.size > maxSize) {
+        return `Dosya boyutu ${formatFileSize(maxSize)} limitini aşıyor`
+      }
+      
+      // MIME type kontrolü
+      if (allowedMimeTypes.length > 0 && !allowedMimeTypes.includes(file.type)) {
+        return `Dosya türü ${file.type} desteklenmiyor`
+      }
+      
+      // Accept kontrolü
+      if (accept !== "*") {
+        const acceptTypes = accept.split(',').map(t => t.trim())
+        const isAccepted = acceptTypes.some(acceptType => {
+          if (acceptType.includes('*')) {
+            return file.type.startsWith(acceptType.replace('*', ''))
+          }
+          return file.type === acceptType
+        })
+        
+        if (!isAccepted) {
+          return `Dosya türü kabul edilmiyor`
+        }
+      }
+      
+      // Özel validasyon
+      if (customValidation) {
+        const customError = await customValidation(file)
+        if (customError) return customError
+      }
+      
+      return null
+    }, [maxSize, allowedMimeTypes, accept, customValidation])
+    
+    // Duplicate kontrolü
+    const checkDuplicate = useCallback(async (file: File): Promise<boolean> => {
+      if (!duplicateCheck) return false
+      
+      const hash = await generateFileHash(file)
+      return files.some(f => f.metadata?.hash === hash)
+    }, [files, duplicateCheck])
+    
+    // Dosya önizleme oluşturma
+    const createPreview = useCallback(async (file: File): Promise<FilePreview | undefined> => {
+      if (!showPreview) return undefined
+      
+      const fileType = file.type.split('/')[0] as 'image' | 'video' | 'audio'
+      
+      if (!previewTypes.includes(fileType)) return undefined
+      
+      try {
+        if (fileType === 'image') {
+          return await createImagePreview(file)
+        } else if (fileType === 'video') {
+          return await createVideoPreview(file)
+        } else if (fileType === 'audio') {
+          const url = URL.createObjectURL(file)
+          return {
+            type: 'audio',
+            url
+          }
+        }
+      } catch (error) {
+        console.warn('Önizleme oluşturulamadı:', error)
+      }
+      
+      return undefined
+    }, [showPreview, previewTypes])
+    
+    // Dosya metadata oluşturma
+    const createMetadata = useCallback(async (file: File): Promise<FileMetadata> => {
+      const metadata: FileMetadata = {
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        lastModified: file.lastModified
+      }
+      
+      if (duplicateCheck) {
+        metadata.hash = await generateFileHash(file)
+      }
+      
+      return metadata
+    }, [duplicateCheck])
+    
+    // Chunked upload simülasyonu
+    const uploadFileChunked = useCallback(async (fileItem: FileUploadItem) => {
+      const { file } = fileItem
+      const chunks: FileChunk[] = []
+      const chunkCount = Math.ceil(file.size / chunkSize)
+      
+      // Chunk'ları oluştur
+      for (let i = 0; i < chunkCount; i++) {
+        chunks.push({
+          index: i,
+          start: i * chunkSize,
+          end: Math.min((i + 1) * chunkSize, file.size),
+          status: 'pending',
+          attempts: 0
+        })
+      }
+      
+      // FileItem'i güncelle
+      setFiles(prev => prev.map(f => 
+        f.id === fileItem.id 
+          ? { ...f, chunks, status: 'uploading' }
+          : f
+      ))
+      
+      const abortController = new AbortController()
+      uploadQueue.current.set(fileItem.id, abortController)
+      
+      let uploadedBytes = 0
+      const startTime = Date.now()
+      
       try {
-        await onUpload(validFiles.map(f => f.file))
+        // Chunk'ları sırayla yükle
+        for (const chunk of chunks) {
+          if (abortController.signal.aborted) {
+            throw new Error('Upload cancelled')
+          }
+          
+          // Chunk upload simülasyonu
+          await new Promise(resolve => setTimeout(resolve, 100 + Math.random() * 200))
+          
+          uploadedBytes += (chunk.end - chunk.start)
+          const progress = Math.round((uploadedBytes / file.size) * 100)
+          const elapsedTime = (Date.now() - startTime) / 1000
+          const speed = uploadedBytes / elapsedTime
+          const estimatedTime = (file.size - uploadedBytes) / speed
+          
+          // Progress güncelle
+          setFiles(prev => prev.map(f => 
+            f.id === fileItem.id 
+              ? { 
+                  ...f, 
+                  progress, 
+                  uploadedBytes, 
+                  speed,
+                  estimatedTime: estimatedTime || 0,
+                  chunks: f.chunks?.map(c => 
+                    c.index === chunk.index 
+                      ? { ...c, status: 'success' }
+                      : c
+                  )
+                }
+              : f
+          ))
+          
+          onProgress?.(fileItem.id, progress)
+        }
         
-        // Update all files to success
+        // Upload tamamlandı
         setFiles(prev => prev.map(f => 
-          validFiles.find(vf => vf.id === f.id) 
-            ? { ...f, status: 'success' as const, progress: 100 }
+          f.id === fileItem.id 
+            ? { ...f, status: 'success', progress: 100 }
             : f
         ))
+        
+        onComplete?.(fileItem.id, { success: true })
+        
       } catch (error) {
-        // Update all files to error
         setFiles(prev => prev.map(f => 
-          validFiles.find(vf => vf.id === f.id) 
-            ? { ...f, status: 'error' as const, error: 'Upload failed' }
+          f.id === fileItem.id 
+            ? { ...f, status: 'error', error: error instanceof Error ? error.message : 'Upload failed' }
             : f
         ))
+        
+        onError?.(fileItem.id, error instanceof Error ? error.message : 'Upload failed')
+      } finally {
+        uploadQueue.current.delete(fileItem.id)
       }
-    } else {
-      // Simulate progress
-      for (const validFile of validFiles) {
-        const interval = setInterval(() => {
-          setFiles(prev => prev.map(f => 
-            f.id === validFile.id && f.progress < 100
-              ? { ...f, progress: f.progress + 10 }
-              : f
-          ))
-        }, 100)
-
-        setTimeout(() => {
-          clearInterval(interval)
-          setFiles(prev => prev.map(f => 
-            f.id === validFile.id
-              ? { ...f, status: 'success' as const, progress: 100 }
-              : f
-          ))
-        }, 1000)
+    }, [chunkSize, onProgress, onComplete, onError])
+    
+    // Dosya işleme
+    const processFiles = useCallback(async (fileList: FileList | File[]) => {
+      const fileArray = Array.from(fileList)
+      setError(null)
+      
+      // Toplam dosya sayısı kontrolü
+      if (files.length + fileArray.length > maxFiles) {
+        setError(`Maksimum ${maxFiles} dosya yükleyebilirsiniz`)
+        return
       }
-    }
-
-    setIsUploading(false)
-  }
-
-  const handleRemove = (fileToRemove: UploadedFile) => {
-    setFiles(prev => prev.filter(f => f.id !== fileToRemove.id))
-    if (onRemove) {
-      onRemove(fileToRemove.file)
-    }
-  }
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragOver(false)
-    handleFileSelect(e.dataTransfer.files)
-  }
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragOver(true)
-  }
-
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setIsDragOver(false)
-  }
-
-  const handleClick = () => {
-    if (!disabled) {
-      fileInputRef.current?.click()
-    }
-  }
-
-  return (
-    <Card className={cn("w-full", className)}>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Upload className="h-5 w-5" />
-          File Upload
-        </CardTitle>
-        <CardDescription>
-          {multiple ? `Upload up to ${maxFiles} files` : 'Upload a file'} (max {maxSize}MB each)
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Drop Zone */}
-        <div
+      
+      // Toplam boyut kontrolü
+      if (maxTotalSize) {
+        const currentSize = files.reduce((sum, f) => sum + f.file.size, 0)
+        const newSize = fileArray.reduce((sum, f) => sum + f.size, 0)
+        
+        if (currentSize + newSize > maxTotalSize) {
+          setError(`Toplam dosya boyutu ${formatFileSize(maxTotalSize)} limitini aşıyor`)
+          return
+        }
+      }
+      
+      const validFiles: File[] = []
+      const errors: string[] = []
+      
+      // Her dosyayı validate et
+      for (const file of fileArray) {
+        const validationError = await validateFile(file)
+        if (validationError) {
+          errors.push(`${file.name}: ${validationError}`)
+          continue
+        }
+        
+        const isDuplicate = await checkDuplicate(file)
+        if (isDuplicate) {
+          errors.push(`${file.name}: Dosya zaten mevcut`)
+          continue
+        }
+        
+        validFiles.push(file)
+      }
+      
+      if (errors.length > 0) {
+        setError(errors.join(', '))
+      }
+      
+      if (validFiles.length === 0) return
+      
+      // FileUploadItem'ları oluştur
+      const newFileItems: FileUploadItem[] = []
+      
+      for (const file of validFiles) {
+        const id = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`
+        const preview = await createPreview(file)
+        const metadata = await createMetadata(file)
+        
+        newFileItems.push({
+          id,
+          file,
+          status: 'pending',
+          progress: 0,
+          totalBytes: file.size,
+          preview,
+          metadata
+        })
+      }
+      
+      setFiles(prev => [...prev, ...newFileItems])
+      
+      // Upload işlemini başlat
+      if (onUpload) {
+        try {
+          await onUpload(newFileItems)
+        } catch (error) {
+          console.error('Upload failed:', error)
+        }
+      } else {
+        // Otomatik upload başlat
+        newFileItems.forEach(fileItem => {
+          uploadFileChunked(fileItem)
+        })
+      }
+    }, [
+      files, 
+      maxFiles, 
+      maxTotalSize, 
+      validateFile, 
+      checkDuplicate, 
+      createPreview, 
+      createMetadata, 
+      onUpload, 
+      uploadFileChunked
+    ])
+    
+    // Drag & Drop handlers
+    const handleDrop = useCallback((e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOver(false)
+      
+      if (disabled) return
+      
+      const droppedFiles = Array.from(e.dataTransfer.files)
+      if (droppedFiles.length > 0) {
+        processFiles(droppedFiles)
+      }
+    }, [processFiles, disabled])
+    
+    const handleDragOver = useCallback((e: React.DragEvent) => {
+      e.preventDefault()
+      if (!disabled) {
+        setIsDragOver(true)
+      }
+    }, [disabled])
+    
+    const handleDragLeave = useCallback((e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOver(false)
+    }, [])
+    
+    // Dosya seçimi
+    const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const selectedFiles = e.target.files
+      if (selectedFiles && selectedFiles.length > 0) {
+        processFiles(selectedFiles)
+      }
+      // Input'u temizle
+      e.target.value = ''
+    }, [processFiles])
+    
+    // Dosya kaldırma
+    const removeFile = useCallback((fileId: string) => {
+      const fileToRemove = files.find(f => f.id === fileId)
+      if (!fileToRemove) return
+      
+      // Upload'ı iptal et
+      const controller = uploadQueue.current.get(fileId)
+      if (controller) {
+        controller.abort()
+        uploadQueue.current.delete(fileId)
+      }
+      
+      // Preview URL'yi temizle
+      if (fileToRemove.preview?.url) {
+        URL.revokeObjectURL(fileToRemove.preview.url)
+      }
+      
+      setFiles(prev => prev.filter(f => f.id !== fileId))
+      setSelectedIds(prev => prev.filter(id => id !== fileId))
+      
+      onRemove?.(fileId)
+    }, [files, onRemove])
+    
+    // Upload'ı duraklat/devam ettir
+    const pauseResumeUpload = useCallback((fileId: string) => {
+      const file = files.find(f => f.id === fileId)
+      if (!file) return
+      
+      if (file.status === 'uploading') {
+        const controller = uploadQueue.current.get(fileId)
+        if (controller) {
+          controller.abort()
+          uploadQueue.current.delete(fileId)
+        }
+        
+        setFiles(prev => prev.map(f => 
+          f.id === fileId ? { ...f, status: 'paused' } : f
+        ))
+      } else if (file.status === 'paused' && resumable) {
+        uploadFileChunked(file)
+      }
+    }, [files, resumable, uploadFileChunked])
+    
+    // Bulk operations
+    const handleBulkSelect = useCallback((fileId: string, selected: boolean) => {
+      setSelectedIds(prev => 
+        selected 
+          ? [...prev, fileId]
+          : prev.filter(id => id !== fileId)
+      )
+    }, [])
+    
+    const handleSelectAll = useCallback(() => {
+      const allIds = files.map(f => f.id)
+      setSelectedIds(allIds)
+      onBulkSelect?.(allIds)
+    }, [files, onBulkSelect])
+    
+    const handleClearSelection = useCallback(() => {
+      setSelectedIds([])
+      onBulkSelect?.([])
+    }, [onBulkSelect])
+    
+    const handleBulkRemove = useCallback(() => {
+      selectedIds.forEach(id => removeFile(id))
+      setSelectedIds([])
+    }, [selectedIds, removeFile])
+    
+    const handleBulkDownload = useCallback(() => {
+      // Bulk download implementation
+      console.log('Bulk download:', selectedIds)
+    }, [selectedIds])
+    
+    // Preview
+    const handlePreview = useCallback((file: FileUploadItem) => {
+      setPreviewFile(file)
+      setIsPreviewOpen(true)
+      onPreview?.(file)
+    }, [onPreview])
+    
+    return (
+      <div ref={ref} className={cn("w-full space-y-4", className)} {...props}>
+        {/* Bulk Actions */}
+        <AnimatePresence>
+          {allowBulkOperations && selectedIds.length > 0 && (
+            <BulkActions
+              selectedIds={selectedIds}
+              onClearSelection={handleClearSelection}
+              onBulkRemove={handleBulkRemove}
+              onBulkDownload={handleBulkDownload}
+            />
+          )}
+        </AnimatePresence>
+        
+        {/* Upload Area */}
+        <motion.div
           className={cn(
-            "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
-            isDragOver ? "border-primary bg-primary/5" : "border-muted-foreground/25",
-            disabled && "cursor-not-allowed opacity-50"
+            fileUploadVariants({ 
+              variant, 
+              state: disabled ? "disabled" : isDragOver ? "dragover" : "idle" 
+            })
           )}
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
-          onClick={handleClick}
+          onClick={() => !disabled && fileInputRef.current?.click()}
+          animate={{
+            scale: isDragOver ? 1.02 : 1
+          }}
+          transition={{ duration: 0.2 }}
         >
-          <Upload className="h-10 w-10 mx-auto mb-4 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground mb-2">
-            Drag and drop files here, or click to select
-          </p>
-          <p className="text-xs text-muted-foreground">
-            {accept === '*' ? 'Any file type' : `Accepted types: ${accept}`}
-          </p>
-        </div>
-
-        {/* File Input */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          onChange={(e) => handleFileSelect(e.target.files)}
-          className="hidden"
-          disabled={disabled}
-        />
-
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={handleFileSelect}
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          />
+          
+          <div className="text-center space-y-4">
+            <motion.div
+              animate={{ 
+                scale: isDragOver ? 1.1 : 1,
+                rotate: isDragOver ? 5 : 0
+              }}
+              className="mx-auto h-12 w-12 text-muted-foreground"
+            >
+              <Upload className="h-full w-full" />
+            </motion.div>
+            
+            <div>
+              <h3 className="text-lg font-semibold">
+                {isDragOver ? 'Dosyaları buraya bırakın' : 'Dosya Yükleyin'}
+              </h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Dosyaları sürükleyip bırakın veya tıklayarak seçin
+              </p>
+              <div className="flex items-center justify-center gap-4 mt-3 text-xs text-muted-foreground">
+                <span>Maks {maxFiles} dosya</span>
+                <span>•</span>
+                <span>{formatFileSize(maxSize)} her dosya</span>
+                {resumable && (
+                  <>
+                    <span>•</span>
+                    <span>Devam ettirilebilir</span>
+                  </>
+                )}
+              </div>
+            </div>
+            
+            <Button variant="outline" disabled={disabled} type="button">
+              <Upload className="mr-2 h-4 w-4" />
+              Dosya Seç
+            </Button>
+          </div>
+        </motion.div>
+        
+        {/* Error Message */}
+        <AnimatePresence>
+          {error && (
+            <motion.div
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg"
+            >
+              <AlertCircle className="h-4 w-4 text-destructive flex-shrink-0" />
+              <span className="text-sm text-destructive">{error}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto h-6 w-6 p-0"
+                onClick={() => setError(null)}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        
         {/* File List */}
-        {files.length > 0 && (
-          <div className="space-y-2">
-            <h4 className="text-sm font-medium">Uploaded Files ({files.length})</h4>
-            {files.map((uploadedFile) => (
-              <div key={uploadedFile.id} className="flex items-center gap-3 p-3 border rounded-lg">
-                <div className="flex-shrink-0">
-                  {getFileIcon(uploadedFile.file.type)}
-                </div>
-                
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between">
-                    <p className="text-sm font-medium truncate">{uploadedFile.file.name}</p>
-                    <Badge variant={uploadedFile.status === 'success' ? 'success' : uploadedFile.status === 'error' ? 'destructive' : 'secondary'}>
-                      {uploadedFile.status === 'uploading' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
-                      {uploadedFile.status === 'success' && <CheckCircle2 className="h-3 w-3 mr-1" />}
-                      {uploadedFile.status === 'error' && <AlertCircle className="h-3 w-3 mr-1" />}
-                      {uploadedFile.status}
-                    </Badge>
-                  </div>
-                  
-                  <div className="flex items-center justify-between mt-1">
-                    <p className="text-xs text-muted-foreground">
-                      {formatFileSize(uploadedFile.file.size)}
-                    </p>
-                    {uploadedFile.status === 'uploading' && (
-                      <span className="text-xs text-muted-foreground">
-                        {uploadedFile.progress}%
-                      </span>
-                    )}
-                  </div>
-                  
-                  {uploadedFile.status === 'uploading' && (
-                    <div className="mt-2 h-2 bg-secondary rounded-full overflow-hidden">
-                      <div 
-                        className="h-full bg-primary transition-all duration-300 ease-out"
-                        style={{ width: `${uploadedFile.progress}%` }}
-                      />
-                    </div>
-                  )}
-                  
-                  {uploadedFile.error && (
-                    <p className="text-xs text-destructive mt-1">{uploadedFile.error}</p>
-                  )}
-                </div>
-
-                <div className="flex items-center gap-1">
-                  {uploadedFile.status === 'success' && showPreview && uploadedFile.file.type.startsWith('image/') && (
-                    <Button variant="ghost" size="sm">
-                      <Download className="h-4 w-4" />
-                    </Button>
-                  )}
-                  
-                  <Button
-                    variant="ghost"
+        <AnimatePresence>
+          {files.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="space-y-3"
+            >
+              {/* List Header */}
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-medium">
+                  Yüklenen Dosyalar ({files.length})
+                </h4>
+                {allowBulkOperations && files.length > 1 && (
+                  <Button 
+                    variant="ghost" 
                     size="sm"
-                    onClick={() => handleRemove(uploadedFile)}
-                    disabled={uploadedFile.status === 'uploading'}
+                    onClick={selectedIds.length === files.length ? handleClearSelection : handleSelectAll}
                   >
-                    <X className="h-4 w-4" />
+                    {selectedIds.length === files.length ? 'Seçimi Temizle' : 'Tümünü Seç'}
                   </Button>
-                </div>
+                )}
               </div>
-            ))}
-          </div>
-        )}
+              
+              {/* File Items */}
+              <div className={cn(
+                "space-y-2",
+                variant === 'grid' && "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 space-y-0"
+              )}>
+                <AnimatePresence>
+                  {files.map(file => (
+                    <FileUploadItem
+                      key={file.id}
+                      file={file}
+                      variant={variant}
+                      showPreview={showPreview}
+                      showProgress={showProgress}
+                      showMetadata={showMetadata}
+                      allowBulkOperations={allowBulkOperations}
+                      resumable={resumable}
+                      selected={selectedIds.includes(file.id)}
+                      onSelect={(selected) => handleBulkSelect(file.id, selected)}
+                      onRemove={() => removeFile(file.id)}
+                      onPauseResume={() => pauseResumeUpload(file.id)}
+                      onPreview={() => handlePreview(file)}
+                    />
+                  ))}
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        
+        {/* Preview Modal */}
+        <FilePreviewModal
+          file={previewFile}
+          isOpen={isPreviewOpen}
+          onClose={() => setIsPreviewOpen(false)}
+        />
+      </div>
+    )
+  }
+)
 
-        {/* Upload Status */}
-        {isUploading && (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Uploading files...
+// Tekil dosya bileşeni
+const FileUploadItem = ({ 
+  file, 
+  variant = 'default',
+  showPreview = true,
+  showProgress = true,
+  showMetadata = true,
+  allowBulkOperations = true,
+  resumable = true,
+  selected = false,
+  onSelect,
+  onRemove,
+  onPauseResume,
+  onPreview
+}: {
+  file: FileUploadItem
+  variant?: 'default' | 'compact' | 'grid'
+  showPreview?: boolean
+  showProgress?: boolean
+  showMetadata?: boolean
+  allowBulkOperations?: boolean
+  resumable?: boolean
+  selected?: boolean
+  onSelect?: (selected: boolean) => void
+  onRemove?: () => void
+  onPauseResume?: () => void
+  onPreview?: () => void
+}) => {
+  const canPauseResume = resumable && ['uploading', 'paused'].includes(file.status)
+  const canPreview = showPreview && file.preview && ['image', 'video', 'audio'].includes(file.preview.type)
+  
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10, scale: 0.95 }}
+      className={cn(
+        "group relative overflow-hidden rounded-lg border bg-card transition-all",
+        selected && "ring-2 ring-primary bg-primary/5",
+        variant === 'compact' && "p-3",
+        variant === 'default' && "p-4",
+        variant === 'grid' && "p-4"
+      )}
+    >
+      {/* Selection Checkbox */}
+      {allowBulkOperations && (
+        <div className="absolute top-3 left-3 z-10">
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={(e) => onSelect?.(e.target.checked)}
+            className="rounded border-muted-foreground/25"
+          />
+        </div>
+      )}
+      
+      {/* Preview/Thumbnail */}
+      {showPreview && file.preview && (
+        <div className={cn(
+          "relative overflow-hidden rounded bg-muted/20",
+          variant === 'grid' ? "aspect-video mb-3" : "w-12 h-12 float-left mr-3"
+        )}>
+          {file.preview.type === 'image' && file.preview.thumbnail && (
+            <img
+              src={file.preview.thumbnail}
+              alt={file.file.name}
+              className="w-full h-full object-cover"
+            />
+          )}
+          
+          {file.preview.type === 'video' && file.preview.thumbnail && (
+            <div className="relative w-full h-full">
+              <img
+                src={file.preview.thumbnail}
+                alt={file.file.name}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 flex items-center justify-center bg-black/20">
+                <Play className="h-6 w-6 text-white" />
+              </div>
+            </div>
+          )}
+          
+          {!file.preview.thumbnail && (
+            <div className="w-full h-full flex items-center justify-center">
+              {getFileIcon(file.file.type, variant === 'grid' ? 'lg' : 'md')}
+            </div>
+          )}
+          
+          {canPreview && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="absolute top-1 right-1 h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+              onClick={onPreview}
+            >
+              <Eye className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+      )}
+      
+      {/* File Info */}
+      <div className={cn(
+        "flex-1 min-w-0",
+        variant === 'grid' && "text-center"
+      )}>
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <h5 className={cn(
+              "font-medium truncate",
+              variant === 'compact' ? "text-sm" : "text-base"
+            )}>
+              {file.file.name}
+            </h5>
+            
+            {showMetadata && (
+              <div className={cn(
+                "flex items-center gap-2 mt-1 text-muted-foreground",
+                variant === 'compact' ? "text-xs" : "text-sm",
+                variant === 'grid' && "justify-center"
+              )}>
+                <span>{formatFileSize(file.file.size)}</span>
+                {file.preview?.dimensions && (
+                  <>
+                    <span>•</span>
+                    <span>{file.preview.dimensions.width} × {file.preview.dimensions.height}</span>
+                  </>
+                )}
+                {file.preview?.duration && (
+                  <>
+                    <span>•</span>
+                    <span>{formatTime(file.preview.duration)}</span>
+                  </>
+                )}
+              </div>
+            )}
           </div>
+          
+          {/* Status Badge */}
+          <Badge 
+            variant={
+              file.status === 'success' ? 'success' :
+              file.status === 'error' ? 'destructive' :
+              file.status === 'paused' ? 'secondary' : 'secondary'
+            }
+            className="flex-shrink-0"
+          >
+            {file.status === 'uploading' && <Loader2 className="h-3 w-3 mr-1 animate-spin" />}
+            {file.status === 'success' && <CheckCircle2 className="h-3 w-3 mr-1" />}
+            {file.status === 'error' && <AlertCircle className="h-3 w-3 mr-1" />}
+            {file.status === 'paused' && <Pause className="h-3 w-3 mr-1" />}
+            {file.status === 'pending' ? 'Bekliyor' :
+             file.status === 'uploading' ? 'Yükleniyor' :
+             file.status === 'paused' ? 'Duraklatıldı' :
+             file.status === 'success' ? 'Tamamlandı' :
+             file.status === 'error' ? 'Hata' : 'İptal'}
+          </Badge>
+        </div>
+        
+        {/* Progress */}
+        {showProgress && file.status === 'uploading' && (
+          <div className="mt-3 space-y-1">
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>{file.progress}%</span>
+              {file.speed && (
+                <span>{formatFileSize(file.speed)}/s</span>
+              )}
+              {file.estimatedTime && file.estimatedTime > 0 && (
+                <span>{formatTime(file.estimatedTime)} kaldı</span>
+              )}
+            </div>
+            <Progress value={file.progress} className="h-1" />
+          </div>
+        )}
+        
+        {/* Error Message */}
+        {file.status === 'error' && file.error && (
+          <p className="mt-2 text-xs text-destructive">{file.error}</p>
         )}
-      </CardContent>
-    </Card>
+        
+        {/* Actions */}
+        <div className={cn(
+          "flex items-center gap-1 mt-3",
+          variant === 'grid' && "justify-center"
+        )}>
+          {canPauseResume && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onPauseResume}
+              className="h-7 px-2"
+            >
+              {file.status === 'uploading' ? (
+                <Pause className="h-3 w-3" />
+              ) : (
+                <Play className="h-3 w-3" />
+              )}
+            </Button>
+          )}
+          
+          {file.status === 'error' && resumable && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onPauseResume}
+              className="h-7 px-2"
+            >
+              <RotateCcw className="h-3 w-3" />
+            </Button>
+          )}
+          
+          {file.status === 'success' && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2"
+            >
+              <Download className="h-3 w-3" />
+            </Button>
+          )}
+          
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
+                <MoreHorizontal className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {canPreview && (
+                <DropdownMenuItem onClick={onPreview}>
+                  <Eye className="mr-2 h-4 w-4" />
+                  Önizle
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem>
+                <Copy className="mr-2 h-4 w-4" />
+                Linki Kopyala
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Share className="mr-2 h-4 w-4" />
+                Paylaş
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onRemove} className="text-destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Sil
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </motion.div>
   )
 }
 
-export default FileUpload
+MoonUIFileUploadPro.displayName = "MoonUIFileUploadPro"
+
+export default MoonUIFileUploadPro