4c: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"] 4d: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"] 4e:T355d,'use client' import { IconGripVertical, IconX, IconCloudUpload, IconPhoto, IconCircleX, IconAlertCircle } from '@tabler/icons-react' import { useCallback, useEffect, useState } from 'react' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Sortable, SortableItem, SortableItemHandle } from '@/components/spaceui/sortable' import { toast } from 'sonner' 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 } type SortableImage = { id: string src: string alt: string type: 'default' | 'uploaded' } interface ImageUploadProps { maxFiles?: number maxSize?: number accept?: string className?: string onImagesChange?: (images: ImageFile[]) => void onUploadComplete?: (images: ImageFile[]) => void } export default function Demo({ maxFiles = 5, // Changed to 5 as per UI reference maxSize = 10 * 1024 * 1024, // 10MB as per UI reference accept = 'image/*', className, onImagesChange, onUploadComplete, }: ImageUploadProps) { const [images, setImages] = useState([]) const [isDragging, setIsDragging] = useState(false) const [errors, setErrors] = useState([]) const [allImages, setAllImages] = useState([ { id: 'default-1', src: 'https://picsum.photos/1000/800?grayscale&random=6', alt: 'Product view 1', type: 'default', }, { id: 'default-2', src: 'https://picsum.photos/1000/800?grayscale&random=7', alt: 'Product view 2', type: 'default', }, { id: 'default-3', src: 'https://picsum.photos/1000/800?grayscale&random=8', alt: 'Product view 3', type: 'default', }, { id: 'default-4', src: 'https://picsum.photos/1000/800?grayscale&random=9', alt: 'Product view 4', type: 'default', }, { id: 'default-5', src: 'https://picsum.photos/1000/800?grayscale&random=10', alt: 'Product view 5', type: 'default', }, ]) // Helper function to create SortableImage from ImageFile const createSortableImage = useCallback( (imageFile: ImageFile): SortableImage => ({ id: imageFile.id, src: imageFile.preview, alt: imageFile.file.name, type: 'uploaded', }), [], ) // Ensure arrays never contain undefined items useEffect(() => { setAllImages((prev) => prev.filter((item) => item && item.id)) setImages((prev) => prev.filter((item) => item && item.id)) }, []) 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) // Add new images to allImages for sorting const newSortableImages = newImages.map(createSortableImage) setAllImages((prev) => [...prev, ...newSortableImages]) // Simulate upload progress newImages.forEach((imageFile) => { simulateUpload(imageFile) }) } }, [images, maxSize, maxFiles, onImagesChange, createSortableImage], ) 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) => { // Remove from allImages setAllImages((prev) => prev.filter((img) => img.id !== id)) // If it's an uploaded image, also remove from images array and revoke URL const uploadedImage = images.find((img) => img.id === id) if (uploadedImage) { URL.revokeObjectURL(uploadedImage.preview) setImages((prev) => prev.filter((img) => img.id !== id)) } }, [images], ) 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 (

{/* Instructions */}

Upload up to {maxFiles} images (JPG, PNG, GIF, WebP, max {formatBytes(maxSize)} each).
Drag and drop images to reorder. {images.length > 0 && ` ${images.length}/${maxFiles} uploaded.`}

{/* Image Grid with Sortable */}

{/* Combined Images Sortable */} item.id)} onValueChange={(newItemIds) => { // Reconstruct the allImages array based on the new order const newAllImages = newItemIds .map((itemId) => { // First try to find in allImages (default images) const existingImage = allImages.find((img) => img.id === itemId) if (existingImage) return existingImage // If not found, it's a newly uploaded image const uploadedImage = images.find((img) => img.id === itemId) if (uploadedImage) { return createSortableImage(uploadedImage) } return null }) .filter((item): item is SortableImage => item !== null) setAllImages(newAllImages) toast.success('Images reordered successfully!', { duration: 3000, }) }} getItemValue={(item) => item} strategy="grid" className="grid auto-rows-fr grid-cols-5 gap-2.5" > {allImages.map((item) => (

{/* Drag Handle */} {/* 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}

))} )}

) } 4b:["$","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"}]]}]}],["$","li","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","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":"sonner"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-sortable.json","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]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/components/spaceui/file-upload/c-file-upload-08/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]