4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1b4a,'use client' import { AlertCircleIcon, FileIcon, ImageIcon, UploadIcon, XIcon, } from 'lucide-react' import { Button } from '@/components/ui/button' import { useFileUpload } from '@/registry/hooks/use-file-upload' export interface FileDropzoneProps { accept?: string maxSizeMB?: number maxFiles?: number multiple?: boolean onUpload?: (file: File) => Promise | void } export const FileDropzone = ({ accept, maxSizeMB = 2, maxFiles, multiple = false, onUpload, }: FileDropzoneProps) => { const maxSize = maxSizeMB * 1024 * 1024 const finalMaxFiles = maxFiles ?? (multiple ? 5 : 1) const { files, isDragging, errors, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, openFileDialog, removeFile, getInputProps, } = useFileUpload({ accept, maxSize, maxFiles: finalMaxFiles, onUpload, }) const previewUrl = files[0]?.preview || null const uploadedFile = files[0]?.file || null const hasFiles = files.length > 0 return (

{/* Drop area */}

{/* Single file mode: show file inside drop area */} {!multiple && uploadedFile ? (

{previewUrl ? (

) : (

{uploadedFile.name}

{uploadedFile.size < 1024 * 1024 ? `${(uploadedFile.size / 1024).toFixed(0)} KB` : `${(uploadedFile.size / 1024 / 1024).toFixed(2)} MB`}

)}

) : (

Drop your {multiple ? 'files' : 'file'} here

{accept ? `${accept.split(',').join(', ')} ` : 'Any file type '} (max. {maxSizeMB}MB) {multiple && finalMaxFiles > 1 && ` · Up to ${finalMaxFiles} files`}

)}

{/* Remove button for single file mode */} {!multiple && uploadedFile && (

)}

{/* Error messages */} {errors.length > 0 && (

{errors[0]}

)} {/* Uploaded files list for multiple mode */} {multiple && hasFiles && (

{files.map((fileWithPreview) => { const { id, file, preview } = fileWithPreview return (

{preview ? (

) : (

)}

{file.name}

{file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(0)} KB` : `${(file.size / 1024 / 1024).toFixed(2)} MB`}

) })}

)}

) } 51:T1492,import { useCallback, useId, useRef, useState } from 'react' export interface FileWithPreview { id: string file: File preview?: string } export interface UseFileUploadOptions { accept?: string maxSize?: number maxFiles?: number onUpload?: (file: File) => Promise | void } export interface UseFileUploadReturn { files: FileWithPreview[] errors: string[] isDragging: boolean removeFile: (id: string) => void openFileDialog: () => void getInputProps: () => { ref: React.RefObject type: 'file' id: string accept?: string multiple: boolean onChange: (event: React.ChangeEvent) => Promise } handleDragEnter: (e: React.DragEvent) => void handleDragLeave: (e: React.DragEvent) => void handleDragOver: (e: React.DragEvent) => void handleDrop: (e: React.DragEvent) => void } export function useFileUpload( options: UseFileUploadOptions = {} ): UseFileUploadReturn { const { accept, maxSize, maxFiles = 1, onUpload } = options const id = useId() const inputRef = useRef(null) const dragCounterRef = useRef(0) const [files, setFiles] = useState([]) const [errors, setErrors] = useState([]) const [isDragging, setIsDragging] = useState(false) const validateFile = useCallback( (file: File): string | null => { if (accept) { const acceptedTypes = accept.split(',').map((t) => t.trim()) const fileType = file.type const isAccepted = acceptedTypes.some((type) => { if (type.endsWith('/*')) { return fileType.startsWith(type.replace('/*', '')) } return fileType === type }) if (!isAccepted) { return `File type not accepted. Allowed: ${accept}` } } if (maxSize && file.size > maxSize) { const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1) return `File too large. Max size: ${maxSizeMB}MB` } return null }, [accept, maxSize] ) const createPreview = useCallback( (file: File): Promise => { return new Promise((resolve) => { if (file.type.startsWith('image/')) { const reader = new FileReader() reader.onloadend = () => resolve(reader.result as string) reader.onerror = () => resolve(undefined) reader.readAsDataURL(file) } else { resolve(undefined) } }) }, [] ) const processFiles = useCallback( async (fileList: FileList | File[]) => { const filesArray = Array.from(fileList) const newErrors: string[] = [] const validFiles: FileWithPreview[] = [] for (const file of filesArray) { const error = validateFile(file) if (error) { newErrors.push(error) continue } const preview = await createPreview(file) validFiles.push({ id: `${Date.now()}-${Math.random()}`, file, preview, }) if (onUpload) { await onUpload(file) } } setErrors(newErrors) setFiles((prev) => { const combined = [...prev, ...validFiles] return combined.slice(0, maxFiles) }) }, [validateFile, createPreview, onUpload, maxFiles] ) const removeFile = useCallback((fileId: string) => { setFiles((prev) => prev.filter((f) => f.id !== fileId)) }, []) const openFileDialog = useCallback(() => { inputRef.current?.click() }, []) const handleFileChange = useCallback( async (event: React.ChangeEvent) => { const fileList = event.target.files if (fileList && fileList.length > 0) { await processFiles(fileList) } event.target.value = '' }, [processFiles] ) const getInputProps = useCallback(() => { return { ref: inputRef, type: 'file' as const, id: `${id}-file-input`, accept, multiple: maxFiles > 1, onChange: handleFileChange, } }, [id, accept, maxFiles, handleFileChange]) const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() dragCounterRef.current++ if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { setIsDragging(true) } }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() dragCounterRef.current-- if (dragCounterRef.current === 0) { setIsDragging(false) } }, []) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() }, []) const handleDrop = useCallback( async (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) dragCounterRef.current = 0 const fileList = e.dataTransfer.files if (fileList && fileList.length > 0) { await processFiles(fileList) } }, [processFiles] ) return { files, errors, isDragging, removeFile, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, } } 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@joyco","registryDependencies":["@joyco/button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/file-dropzone.tsx","content":"$50","type":"registry:component"},{"path":"registry/hooks/use-file-upload.tsx","content":"$51","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]