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:T3998,'use client' import { IconPhoto, IconVideo, IconHeadphones, IconFileText, IconFileSpreadsheet, IconFileZip, IconUpload, IconCloudUpload, IconTrash, IconX, IconRefreshDot, IconAlertCircle, } from '@tabler/icons-react' import { useEffect, useState } from 'react' import { formatBytes } from '@/utils/format-bytes' import { useFileUpload, type FileMetadata, type FileWithPreview } from '@/hooks/use-file-upload' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' // Extend FileWithPreview to include upload status and progress interface FileUploadItem extends FileWithPreview { progress: number status: 'uploading' | 'completed' | 'error' error?: string } interface CardUploadProps { maxFiles?: number maxSize?: number accept?: string multiple?: boolean className?: string onFilesChange?: (files: FileUploadItem[]) => void simulateUpload?: boolean } export default function Demo({ maxFiles = 10, maxSize = 50 * 1024 * 1024, // 50MB accept = '*', multiple = true, className, onFilesChange, simulateUpload = true, }: CardUploadProps) { // Create default files using FileMetadata type const defaultFiles: FileMetadata[] = [ { id: 'default-card-1', name: 'intro.zip', size: 252846, type: 'application/zip', url: '/media/files/intro.zip', }, { id: 'default-card-2', name: 'image-01.jpg', size: 1536000, type: 'image/jpeg', url: 'https://picsum.photos/1000/800?grayscale&random=3', }, { id: 'default-card-3', name: 'audio.mp3', size: 1536000, type: 'audio/mpeg', url: '/media/files/audio.mp3', }, ] // Convert default files to FileUploadItem format const defaultUploadFiles: FileUploadItem[] = defaultFiles.map((file) => ({ id: file.id, file: { id: file.id, name: file.name, size: file.size, type: file.type, } as unknown as File, preview: file.url, progress: 100, status: 'completed' as const, })) const [uploadFiles, setUploadFiles] = useState(defaultUploadFiles) const [ { isDragging, errors }, { removeFile, clearFiles, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, openFileDialog, getInputProps, }, ] = useFileUpload({ maxFiles, maxSize, accept, multiple, initialFiles: defaultFiles, onFilesChange: (newFiles) => { // Convert to upload items when files change, preserving existing status const newUploadFiles = newFiles.map((file) => { // Check if this file already exists in uploadFiles const existingFile = uploadFiles.find((existing) => existing.id === file.id) if (existingFile) { // Preserve existing file status and progress return { ...existingFile, ...file, // Update any changed properties from the file } } else { // New file - set to uploading return { ...file, progress: 0, status: 'uploading' as const, } } }) setUploadFiles(newUploadFiles) onFilesChange?.(newUploadFiles) }, }) // Simulate upload progress for new files useEffect(() => { if (!simulateUpload) return const uploadingFiles = uploadFiles.filter((file) => file.status === 'uploading') if (uploadingFiles.length === 0) return const interval = setInterval(() => { setUploadFiles((prev) => prev.map((file) => { if (file.status !== 'uploading') return file const increment = Math.random() * 20 + 5 // Random increment between 5-25% const newProgress = Math.min(file.progress + increment, 100) if (newProgress >= 100) { // Simulate occasional failures (10% chance) const shouldFail = Math.random() < 0.1 return { ...file, progress: 100, status: shouldFail ? ('error' as const) : ('completed' as const), error: shouldFail ? 'Upload failed. Please try again.' : undefined, } } return { ...file, progress: newProgress } }), ) }, 500) return () => clearInterval(interval) }, [uploadFiles, simulateUpload]) const removeUploadFile = (fileId: string) => { const fileToRemove = uploadFiles.find((f) => f.id === fileId) if (fileToRemove) { removeFile(fileToRemove.id) } } const retryUpload = (fileId: string) => { setUploadFiles((prev) => prev.map((file) => file.id === fileId ? { ...file, progress: 0, status: 'uploading' as const, error: undefined, } : file, ), ) } const getFileIcon = (file: File | FileMetadata) => { const type = file instanceof File ? file.type : file.type if (type.startsWith('image/')) return if (type.startsWith('video/')) return if (type.startsWith('audio/')) return if (type.includes('pdf')) return if (type.includes('word') || type.includes('doc')) return if (type.includes('excel') || type.includes('sheet')) return if (type.includes('zip') || type.includes('rar')) return return } return (

{/* Upload Area */}

Drop files here or{' '}

Maximum file size: {formatBytes(maxSize)} • Maximum files: {maxFiles}

{/* Files Grid */} {uploadFiles.length > 0 && (

Files ({uploadFiles.length})

{uploadFiles.map((fileItem) => (

{/* Remove button */} {/* Wrapper */}

{/* Image preview or file icon area */}

{fileItem.file.type.startsWith('image/') && fileItem.preview ? ( <> {/* Image cover */} {fileItem.file.name}

{/* Progress overlay for uploading images */} {fileItem.status === 'uploading' && (

)} ) : ( /* File icon area for non-images */

{fileItem.status === 'uploading' ? (

{getFileIcon(fileItem.file)}

) : (

{getFileIcon(fileItem.file)}

)}

{/* File info footer */}

{fileItem.file.name}

{formatBytes(fileItem.file.size)} {fileItem.status === 'error' && fileItem.error && ( retryUpload(fileItem.id)} variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10 hover:text-destructive absolute end-0 -top-1.25 size-6" /> } > Upload failed. Retry )}

))}

)} {/* 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/hooks-form-use-file-upload.json","https://www.spaceui.one/r/hooks-utils-format-bytes.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-tooltip.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/registry/demo/components/spaceui/file-upload/c-file-upload-09/index.tsx","content":"$4d","type":"registry:component","target":"components/spaceui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]