50: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"] 51: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"] 52:T949,'use client'; import { FileInput, FileUploader, FileUploaderContent, FileUploaderItem, } from '@/components/ui/file-upload'; import { Paperclip } from 'lucide-react'; import { useState } from 'react'; const FileSvgDraw = () => { return ( <>

Click to upload or drag and drop

SVG, PNG, JPG or GIF

); }; const FileUploaderTest = () => { const [files, setFiles] = useState(null); const dropZoneConfig = { maxFiles: 5, maxSize: 1024 * 1024 * 4, multiple: true, }; return (

{files && files.length > 0 && files.map((file, i) => (

{file.name}

))}

); }; export default FileUploaderTest; 53:T26e8,'use client'; import { cn } from '@/lib/utils'; import { Trash2 as RemoveIcon } from 'lucide-react'; import { type Dispatch, type SetStateAction, createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from 'react'; import { type DropzoneOptions, type DropzoneState, type FileRejection, useDropzone, } from 'react-dropzone'; import { toast } from 'sonner'; type DirectionOptions = 'rtl' | 'ltr' | undefined; type FileUploaderContextType = { dropzoneState: DropzoneState; isLOF: boolean; isFileTooBig: boolean; removeFileFromSet: (index: number) => void; activeIndex: number; setActiveIndex: Dispatch>; orientation: 'horizontal' | 'vertical'; direction: DirectionOptions; }; const FileUploaderContext = createContext(null); export const useFileUpload = () => { const context = useContext(FileUploaderContext); if (!context) { throw new Error('useFileUpload must be used within a FileUploaderProvider'); } return context; }; type FileUploaderProps = { value: File[] | null; reSelect?: boolean; onValueChange: (value: File[] | null) => void; dropzoneOptions: DropzoneOptions; orientation?: 'horizontal' | 'vertical'; }; /** * File upload Docs: {@link: https://localhost:3000/docs/file-upload} */ export const FileUploader = forwardRef< HTMLDivElement, FileUploaderProps & React.HTMLAttributes >( ( { className, dropzoneOptions, value, onValueChange, reSelect, orientation = 'vertical', children, dir, ...props }, ref ) => { const [isFileTooBig, setIsFileTooBig] = useState(false); const [isLOF, setIsLOF] = useState(false); const [activeIndex, setActiveIndex] = useState(-1); const { accept = { 'image/*': ['.jpg', '.jpeg', '.png', '.gif'], 'video/*': ['.mp4', '.MOV', '.AVI'], }, maxFiles = 1, maxSize = 4 * 1024 * 1024, multiple = true, } = dropzoneOptions; const reSelectAll = maxFiles === 1 ? true : reSelect; const direction: DirectionOptions = dir === 'rtl' ? 'rtl' : 'ltr'; const removeFileFromSet = useCallback( (i: number) => { if (!value) return; const newFiles = value.filter((_, index) => index !== i); onValueChange(newFiles); }, [value, onValueChange] ); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { e.preventDefault(); e.stopPropagation(); if (!value) return; const moveNext = () => { const nextIndex = activeIndex + 1; setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex); }; const movePrev = () => { const nextIndex = activeIndex - 1; setActiveIndex(nextIndex < 0 ? value.length - 1 : nextIndex); }; const prevKey = orientation === 'horizontal' ? direction === 'ltr' ? 'ArrowLeft' : 'ArrowRight' : 'ArrowUp'; const nextKey = orientation === 'horizontal' ? direction === 'ltr' ? 'ArrowRight' : 'ArrowLeft' : 'ArrowDown'; if (e.key === nextKey) { moveNext(); } else if (e.key === prevKey) { movePrev(); } else if (e.key === 'Enter' || e.key === 'Space') { if (activeIndex === -1) { dropzoneState.inputRef.current?.click(); } } else if (e.key === 'Delete' || e.key === 'Backspace') { if (activeIndex !== -1) { removeFileFromSet(activeIndex); if (value.length - 1 === 0) { setActiveIndex(-1); return; } movePrev(); } } else if (e.key === 'Escape') { setActiveIndex(-1); } }, // eslint-disable-next-line react-hooks/exhaustive-deps [value, activeIndex, removeFileFromSet] ); const onDrop = useCallback( (acceptedFiles: File[], rejectedFiles: FileRejection[]) => { const files = acceptedFiles; if (!files) { toast.error('file error , probably too big'); return; } const newValues: File[] = value ? [...value] : []; if (reSelectAll) { newValues.splice(0, newValues.length); } files.forEach((file) => { if (newValues.length < maxFiles) { newValues.push(file); } }); onValueChange(newValues); if (rejectedFiles.length > 0) { for (let i = 0; i < rejectedFiles.length; i++) { if (rejectedFiles[i].errors[0]?.code === 'file-too-large') { toast.error(`File is too large. Max size is ${maxSize / 1024 / 1024}MB`); break; } if (rejectedFiles[i].errors[0]?.message) { toast.error(rejectedFiles[i].errors[0].message); break; } } } }, // eslint-disable-next-line react-hooks/exhaustive-deps [reSelectAll, value] ); useEffect(() => { if (!value) return; if (value.length === maxFiles) { setIsLOF(true); return; } setIsLOF(false); }, [value, maxFiles]); const opts = dropzoneOptions ? dropzoneOptions : { accept, maxFiles, maxSize, multiple }; const dropzoneState = useDropzone({ ...opts, onDrop, onDropRejected: () => setIsFileTooBig(true), onDropAccepted: () => setIsFileTooBig(false), }); return (

0, })} dir={dir} {...props} > {children}

); } ); FileUploader.displayName = 'FileUploader'; export const FileUploaderContent = forwardRef>( ({ children, className, ...props }, ref) => { const { orientation } = useFileUpload(); const containerRef = useRef(null); return (

{children}

); } ); FileUploaderContent.displayName = 'FileUploaderContent'; export const FileUploaderItem = forwardRef< HTMLDivElement, { index: number } & React.HTMLAttributes >(({ className, index, children, ...props }, ref) => { const { removeFileFromSet, activeIndex, direction } = useFileUpload(); const isSelected = index === activeIndex; return (

{children}

); }); FileUploaderItem.displayName = 'FileUploaderItem'; interface FileInputProps extends React.HTMLAttributes { parentclass?: string; dropmsg?: string; } export const FileInput = forwardRef( ({ className, parentclass, dropmsg, children, ...props }, ref) => { const { dropzoneState, isFileTooBig, isLOF } = useFileUpload(); const rootProps = isLOF ? {} : dropzoneState.getRootProps(); return (

{children} {dropzoneState.isDragActive && (

Drop an image here.

)}

); } ); 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"./registry/components/form/file-upload/index.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/file-upload.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]