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:T3880,'use client' import { IconPhoto, IconVideo, IconHeadphones, IconFileText, IconFileSpreadsheet, IconFileZip, IconUpload, IconCloudUpload, IconTrash, IconDownload, 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 { Badge } from '@/components/ui/badge' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' interface FileUploadItem extends FileWithPreview { progress: number status: 'uploading' | 'completed' | 'error' error?: string } interface TableUploadProps { maxFiles?: number maxSize?: number accept?: string multiple?: boolean className?: string onFilesChange?: (files: FileWithPreview[]) => void simulateUpload?: boolean } export default function Demo({ maxFiles = 10, maxSize = 50 * 1024 * 1024, // 50MB accept = '*', multiple = true, className, onFilesChange, simulateUpload = true, }: TableUploadProps) { // Create default files using FileMetadata type const defaultFiles: FileMetadata[] = [ { id: 'default-doc-1', name: 'document.pdf', size: 529254, type: 'application/pdf', url: '/media/files/document.pdf', }, { id: 'default-doc-2', name: 'intro.zip', size: 252846, type: 'application/zip', url: '/media/files/intro.zip', }, { id: 'default-doc-3', name: 'conclusion.xlsx', size: 353126, type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', url: '/media/files/conclusion.xlsx', }, { id: 'default-doc-4', name: 'package.json', size: 697, type: 'application/json', url: '/media/files/package.json', }, ] // Convert default files to FileUploadItem format const defaultUploadFiles: FileUploadItem[] = defaultFiles.map((file) => ({ id: file.id, file: { name: file.name, size: file.size, type: file.type, } 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?.(newFiles) }, }) // Simulate upload progress useEffect(() => { if (!simulateUpload) return const interval = setInterval(() => { setUploadFiles((prev) => prev.map((file) => { if (file.status !== 'uploading') return file const increment = Math.random() * 15 + 5 // 5-20% increment const newProgress = Math.min(file.progress + increment, 100) if (newProgress >= 100) { // Randomly decide if upload succeeds or fails const shouldFail = Math.random() < 0.1 // 10% chance to fail 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) }, [simulateUpload]) const removeUploadFile = (fileId: string) => { setUploadFiles((prev) => prev.filter((file) => file.id !== fileId)) removeFile(fileId) } 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 } const getFileTypeLabel = (file: File | FileMetadata) => { const type = file instanceof File ? file.type : file.type if (type.startsWith('image/')) return 'Image' if (type.startsWith('video/')) return 'Video' if (type.startsWith('audio/')) return 'Audio' if (type.includes('pdf')) return 'PDF' if (type.includes('word') || type.includes('doc')) return 'Word' if (type.includes('excel') || type.includes('sheet')) return 'Excel' if (type.includes('zip') || type.includes('rar')) return 'Archive' if (type.includes('json')) return 'JSON' if (type.includes('text')) return 'Text' return 'File' } return (

{/* Upload Area */}

Drop files here or{' '}

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

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

Files ({uploadFiles.length})

Name Type Size Actions {uploadFiles.map((fileItem) => (

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

{/* Circular progress background */} {/* File icon in center */}

{getFileIcon(fileItem.file)}

) : (

{getFileIcon(fileItem.file)}

)}

{fileItem.file.name} {fileItem.status === 'error' && ( Error )}

{getFileTypeLabel(fileItem.file)} {formatBytes(fileItem.file.size)}

{fileItem.preview && ( )} {fileItem.status === 'error' ? ( ) : ( )}

))}

)} {/* 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-badge.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-table.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/registry/demo/components/spaceui/file-upload/c-file-upload-06/index.tsx","content":"$4d","type":"registry:component","target":"components/spaceui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]