4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T2ca8,'use client' import { IconX, IconCloudUpload, IconPhoto, IconCircleX, IconAlertCircle } from '@tabler/icons-react' import { useCallback, useState } from 'react' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' interface ImageFile { id: string file: File preview: string progress: number status: 'uploading' | 'completed' | 'error' error?: string } interface ImageUploadProps { maxFiles?: number maxSize?: number accept?: string className?: string onImagesChange?: (images: ImageFile[]) => void onUploadComplete?: (images: ImageFile[]) => void } export default function Demo({ maxFiles = 10, maxSize = 2 * 1024 * 1024, // 2MB accept = 'image/*', className, onImagesChange, onUploadComplete, }: ImageUploadProps) { const [images, setImages] = useState([]) const [isDragging, setIsDragging] = useState(false) const [errors, setErrors] = useState([]) const [visibleDefaultImages, setVisibleDefaultImages] = useState([ { id: 'default-1', src: 'https://picsum.photos/1000/800?grayscale&random=4', alt: 'Product view 1', }, { id: 'default-2', src: 'https://picsum.photos/1000/800?grayscale&random=5', alt: 'Product view 2', }, { id: 'default-3', src: 'https://picsum.photos/1000/800?grayscale&random=6', alt: 'Product view 3', }, { id: 'default-4', src: 'https://picsum.photos/1000/800?grayscale&random=7', alt: 'Product view 4', }, ]) const validateFile = (file: File): string | null => { if (!file.type.startsWith('image/')) { return 'File must be an image' } if (file.size > maxSize) { return `File size must be less than ${(maxSize / 1024 / 1024).toFixed(1)}MB` } if (images.length >= maxFiles) { return `Maximum ${maxFiles} files allowed` } return null } const addImages = useCallback( (files: FileList | File[]) => { const newImages: ImageFile[] = [] const newErrors: string[] = [] Array.from(files).forEach((file) => { const error = validateFile(file) if (error) { newErrors.push(`${file.name}: ${error}`) return } const imageFile: ImageFile = { id: `${Date.now()}-${Math.random()}`, file, preview: URL.createObjectURL(file), progress: 0, status: 'uploading', } newImages.push(imageFile) }) if (newErrors.length > 0) { setErrors((prev) => [...prev, ...newErrors]) } if (newImages.length > 0) { const updatedImages = [...images, ...newImages] setImages(updatedImages) onImagesChange?.(updatedImages) // Simulate upload progress newImages.forEach((imageFile) => { simulateUpload(imageFile) }) } }, [images, maxSize, maxFiles, onImagesChange], ) const simulateUpload = (imageFile: ImageFile) => { let progress = 0 const interval = setInterval(() => { progress += Math.random() * 20 if (progress >= 100) { progress = 100 clearInterval(interval) setImages((prev) => prev.map((img) => (img.id === imageFile.id ? { ...img, progress: 100, status: 'completed' as const } : img)), ) // Check if all uploads are complete const updatedImages = images.map((img) => img.id === imageFile.id ? { ...img, progress: 100, status: 'completed' as const } : img, ) if (updatedImages.every((img) => img.status === 'completed')) { onUploadComplete?.(updatedImages) } } else { setImages((prev) => prev.map((img) => (img.id === imageFile.id ? { ...img, progress } : img))) } }, 100) } const removeImage = useCallback((id: string) => { // If it's a default image, remove it from visible defaults if (id.startsWith('default-')) { setVisibleDefaultImages((prev) => prev.filter((img) => img.id !== id)) return } // Remove uploaded image setImages((prev) => { const image = prev.find((img) => img.id === id) if (image) { URL.revokeObjectURL(image.preview) } return prev.filter((img) => img.id !== id) }) }, []) const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) }, []) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) const files = e.dataTransfer.files if (files.length > 0) { addImages(files) } }, [addImages], ) const openFileDialog = useCallback(() => { const input = document.createElement('input') input.type = 'file' input.multiple = true input.accept = accept input.onchange = (e) => { const target = e.target as HTMLInputElement if (target.files) { addImages(target.files) } } input.click() }, [accept, addImages]) const formatBytes = (bytes: number): string => { 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(1)) + ' ' + sizes[i] } return (

{/* Image Grid - Moved to top */}

{/* Always show all visible default images first */} {visibleDefaultImages.map((defaultImg) => ( {defaultImg.alt}

{/* Remove Button Overlay for default images too */} ))}

{/* Show uploaded images in a separate grid below */} {images.length > 0 && (

{images.map((imageFile, index) => ( {`Product

{/* Remove Button Overlay */} ))}

)}

{/* Upload Area */}

Choose a file or drag & drop here.

JPEG, PNG, up to {formatBytes(maxSize)}. {/* Upload Progress Cards */} {images.length > 0 && (

{images.map((imageFile) => (

{imageFile.file.name} {formatBytes(imageFile.file.size)} {imageFile.status === 'uploading' && (

Uploading... {Math.round(imageFile.progress)}%

)}

div]:bg-zinc-950 dark:[&>div]:bg-zinc-50')} />

))}

)} {/* Error Messages */} {errors.length > 0 && ( File upload error(s) {errors.map((error, index) => (

{error}

))} )}

) } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}]]}],["$","$L4b",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-alert.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-card.json","https://www.spaceui.one/r/primitives-progress.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/registry/demo/components/spaceui/file-upload/c-file-upload-07/index.tsx","content":"$4d","type":"registry:component","target":"components/spaceui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]