5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:T2624,'use client'; import type React from 'react'; import { useCallback, useRef, useState, type ChangeEvent, type DragEvent, type InputHTMLAttributes, } 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 = { /** Only read when `multiple` is true. Defaults to Infinity. */ maxFiles?: number; /** In bytes. */ maxSize?: number; accept?: string; multiple?: boolean; initialFiles?: FileMetadata[]; onFilesChange?: (files: FileWithPreview[]) => void; onFilesAdded?: (addedFiles: FileWithPreview[]) => void; }; 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; }; }; function sizeErrorOf(isMultiple: boolean, maxSize: number) { const readableSize = formatBytes(maxSize); if (isMultiple) { return `Some files exceed the maximum size of ${readableSize}.`; } return `File exceeds the maximum size of ${readableSize}.`; } 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 validateFile = useCallback( (file: File | FileMetadata): string | null => { if (file.size > maxSize) { return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`; } if (accept !== '*') { const acceptedTypes = accept.split(',').map((type) => type.trim()); const fileType = file.type; const extension = file.name.split('.').pop(); const fileExtension = `.${extension}`; const isAccepted = acceptedTypes.some((type) => { if (type.startsWith('.')) { return fileExtension.toLowerCase() === type.toLowerCase(); } if (type.endsWith('/*')) { const baseType = type.split('/')[0]; return fileType.startsWith(`${baseType}/`); } return fileType === type; }); if (!isAccepted) { return `File "${file.name}" is not an accepted file type.`; } } return null; }, [accept, maxSize] ); 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}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`; } return file.id; }, []); const clearFiles = useCallback(() => { setState((prev) => { 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[] = []; setState((prev) => ({ ...prev, errors: [] })); if (!multiple) { clearFiles(); } 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) => { if (multiple) { const isDuplicate = state.files.some( (existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size ); if (isDuplicate) { return; } } if (file.size > maxSize) { errors.push(sizeErrorOf(multiple, maxSize)); return; } const error = validateFile(file); if (error) { errors.push(error); } else { validFiles.push({ file, id: generateUniqueId(file), preview: createPreview(file), }); } }); if (validFiles.length > 0) { onFilesAdded?.(validFiles); setState((prev) => { let nextFiles = validFiles; if (multiple) { nextFiles = [...prev.files, ...validFiles]; } onFilesChange?.(nextFiles); return { ...prev, files: nextFiles, errors, }; }); } else if (errors.length > 0) { setState((prev) => ({ ...prev, errors, })); } 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 })); if (inputRef.current?.disabled) { return; } if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { 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 ?? multiple, ref: inputRef, }; }, [accept, multiple, handleFileChange] ); return [ state, { addFiles, removeFile, clearFiles, clearErrors, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, handleFileChange, openFileDialog, getInputProps, }, ]; }; export const formatBytes = (bytes: number, decimals = 2): string => { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = Math.max(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]; }; 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5f",null,{"files":[{"path":"registry/ndeko/hooks/use-file-upload.ts","content":"$60","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]