50: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"] 51:T1fbe,/** biome-ignore-all lint/correctness/useExhaustiveDependencies: */ import type React from 'react' import { type ChangeEvent, type DragEvent, type InputHTMLAttributes, useCallback, useRef, useState, } from 'react' export type FileMetadata = { name: string size: number type: string url: string id: string } export type FileWithPreview = { file: File | FileMetadata id: string preview?: string } export type FileUploadOptions = { maxFiles?: number // Only used when multiple is true, defaults to Infinity maxSize?: number // in bytes accept?: string multiple?: boolean // Defaults to false initialFiles?: FileMetadata[] onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added } export type FileUploadState = { files: FileWithPreview[] isDragging: boolean errors: string[] } export type FileUploadActions = { addFiles: (files: FileList | File[]) => void removeFile: (id: string) => void clearFiles: () => void clearErrors: () => void handleDragEnter: (e: DragEvent) => void handleDragLeave: (e: DragEvent) => void handleDragOver: (e: DragEvent) => void handleDrop: (e: DragEvent) => void handleFileChange: (e: ChangeEvent) => void openFileDialog: () => void getInputProps: ( props?: InputHTMLAttributes, ) => InputHTMLAttributes & { ref: React.Ref } } export const useFileUpload = ( options: FileUploadOptions = {}, ): [FileUploadState, FileUploadActions] => { const { maxFiles = Infinity, maxSize = Infinity, accept = '*', multiple = false, initialFiles = [], onFilesChange, onFilesAdded, } = options const [state, setState] = useState({ files: initialFiles.map((file) => ({ file, id: file.id, preview: file.url, })), isDragging: false, errors: [], }) const inputRef = useRef(null) const createPreview = useCallback( (file: File | FileMetadata): string | undefined => { if (file instanceof File) { return URL.createObjectURL(file) } return file.url }, [], ) const generateUniqueId = useCallback((file: File | FileMetadata): string => { if (file instanceof File) { return `${file.name}-${crypto.randomUUID()}` } return file.id }, []) const clearFiles = useCallback(() => { setState((prev) => { // Clean up object URLs prev.files.forEach((file) => { if ( file.preview && file.file instanceof File && file.file.type.startsWith('image/') ) { URL.revokeObjectURL(file.preview) } }) if (inputRef.current) { inputRef.current.value = '' } const newState = { ...prev, files: [], errors: [], } onFilesChange?.(newState.files) return newState }) }, [onFilesChange]) const addFiles = useCallback( (newFiles: FileList | File[]) => { if (!newFiles || newFiles.length === 0) return const newFilesArray = Array.from(newFiles) const errors: string[] = [] // Clear existing errors when new files are uploaded setState((prev) => ({ ...prev, errors: [] })) // In single file mode, clear existing files first if (!multiple) { clearFiles() } // Check if adding these files would exceed maxFiles (only in multiple mode) if ( multiple && maxFiles !== Infinity && state.files.length + newFilesArray.length > maxFiles ) { errors.push(`You can only upload a maximum of ${maxFiles} files.`) setState((prev) => ({ ...prev, errors })) return } const validFiles: FileWithPreview[] = [] newFilesArray.forEach((file) => { // Only check for duplicates if multiple files are allowed if (multiple) { const isDuplicate = state.files.some( (existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size, ) // Skip duplicate files silently if (isDuplicate) { return } } validFiles.push({ file, id: generateUniqueId(file), preview: createPreview(file), }) }) // Only update state if we have valid files to add if (validFiles.length > 0) { // Call the onFilesAdded callback with the newly added valid files onFilesAdded?.(validFiles) setState((prev) => { const newFiles = !multiple ? validFiles : [...prev.files, ...validFiles] onFilesChange?.(newFiles) return { ...prev, files: newFiles, errors, } }) } else if (errors.length > 0) { setState((prev) => ({ ...prev, errors, })) } // Reset input value after handling files if (inputRef.current) { inputRef.current.value = '' } }, [ state.files, maxFiles, multiple, maxSize, // validateFile, createPreview, generateUniqueId, clearFiles, onFilesChange, onFilesAdded, ], ) const removeFile = useCallback( (id: string) => { setState((prev) => { const fileToRemove = prev.files.find((file) => file.id === id) if ( fileToRemove && fileToRemove.preview && fileToRemove.file instanceof File && fileToRemove.file.type.startsWith('image/') ) { URL.revokeObjectURL(fileToRemove.preview) } const newFiles = prev.files.filter((file) => file.id !== id) onFilesChange?.(newFiles) return { ...prev, files: newFiles, errors: [], } }) }, [onFilesChange], ) const clearErrors = useCallback(() => { setState((prev) => ({ ...prev, errors: [], })) }, []) const handleDragEnter = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() setState((prev) => ({ ...prev, isDragging: true })) }, []) const handleDragLeave = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() if (e.currentTarget.contains(e.relatedTarget as Node)) { return } setState((prev) => ({ ...prev, isDragging: false })) }, []) const handleDragOver = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() }, []) const handleDrop = useCallback( (e: DragEvent) => { e.preventDefault() e.stopPropagation() setState((prev) => ({ ...prev, isDragging: false })) // Don't process files if the input is disabled if (inputRef.current?.disabled) { return } if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { // In single file mode, only use the first file if (!multiple) { const file = e.dataTransfer.files[0] addFiles([file]) } else { addFiles(e.dataTransfer.files) } } }, [addFiles, multiple], ) const handleFileChange = useCallback( (e: ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { addFiles(e.target.files) } }, [addFiles], ) const openFileDialog = useCallback(() => { if (inputRef.current) { inputRef.current.click() } }, []) const getInputProps = useCallback( (props: InputHTMLAttributes = {}) => { return { ...props, type: 'file' as const, onChange: handleFileChange, accept: props.accept || accept, multiple: props.multiple !== undefined ? props.multiple : multiple, ref: inputRef, } }, [accept, multiple, handleFileChange], ) return [ state, { addFiles, removeFile, clearFiles, clearErrors, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, handleFileChange, openFileDialog, getInputProps, }, ] } // Helper function to format bytes to human-readable format export const formatBytes = (bytes: number, decimals = 2): string => { if (bytes === 0) return '0 Bytes' const k = 1024 const dm = decimals < 0 ? 0 : decimals const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i] } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"src/form-builder/hooks/use-file-upload.tsx","content":"$51","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]