import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, router } from '@inertiajs/react'; import { Upload, Trash2, Search, Filter, Image as ImageIcon, FileText, MoreVertical, CheckCircle2, X } from 'lucide-react'; import { useState, useRef } from 'react'; import { toast } from 'sonner'; interface MediaItem { id: number; file_name: string; path: string; mime_type: string; file_size: number; url: string; title: string; created_at: string; } interface Props { media: { data: MediaItem[]; links: any; }; } export default function Index({ media }: Props) { const [isUploading, setIsUploading] = useState(false); const [uploadProgress, setUploadProgress] = useState(0); const fileInputRef = useRef(null); const [selectedItems, setSelectedItems] = useState([]); const [previewItem, setPreviewItem] = useState(null); const handleFileUpload = (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []); if (files.length === 0) return; setIsUploading(true); setUploadProgress(0); const formData = new FormData(); files.forEach(file => formData.append('files[]', file)); router.post(route('admin.media.store'), formData, { forceFormData: true, onProgress: (progress) => { if (progress?.percentage) setUploadProgress(progress.percentage); }, onSuccess: () => { toast.success('Upload complete'); setIsUploading(false); if (fileInputRef.current) fileInputRef.current.value = ''; }, onError: () => { toast.error('Upload failed'); setIsUploading(false); }, }); }; const deleteMedia = (id: number) => { if (!confirm('Are you sure you want to delete this file? This cannot be undone.')) return; router.delete(route('admin.media.destroy', id), { onSuccess: () => { toast.success('File deleted'); if (previewItem?.id === id) setPreviewItem(null); }, }); }; const toggleSelect = (item: MediaItem) => { setPreviewItem(item); setSelectedItems(prev => prev.includes(item.id) ? prev.filter(i => i !== item.id) : [...prev, item.id] ); }; const formatSize = (bytes: number) => { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); toast.success('URL copied to clipboard'); }; return (

Media Library

Manage all your assets and files centrally.

{media.data.length === 0 ? (

No media found

Upload some files to get started.

) : ( media.data.map((item) => (
setPreviewItem(item)} >
{item.mime_type.startsWith('image/') ? ( {item.title} ) : ( )}
{selectedItems.includes(item.id) && (
)}
)) )}
{/* Preview Modal */} {previewItem && (
setPreviewItem(null)} />
{/* Close button */} {/* Media Section */}
{previewItem.mime_type.startsWith('image/') ? ( {previewItem.file_name} ) : (

{previewItem.file_name}

)}
{/* Details Section */}

File Information

{previewItem.file_name}

{formatSize(previewItem.file_size)}

{previewItem.mime_type.split('/')[1]}

{new Date(previewItem.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}

)} ); }