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:T2abd,"use client" import * as React from "react" import { BorderBeam } from "border-beam" import { cn } from "@/lib/utils" import { Card } from "@/components/ui/card" import { FileThumbnail } from "@/components/extend/file-thumbnail" import { IconPlaceholder } from "@/components/icon-placeholder" function FileImageGlyph(props: InlineRegistryIconProps) { return ( ) } function FileSpreadsheetGlyph(props: InlineRegistryIconProps) { return ( ) } function FileUploadGlyph(props: InlineRegistryIconProps) { return ( ) } type FileUploadItem = { id: string name: string type: string size: number url: string } type AcceptedFileType = { label: string icon: React.ComponentType } type FileUploadProps = { accept?: string acceptedFileTypes?: AcceptedFileType[] borderBeamTheme?: React.ComponentProps["theme"] browseLabel?: string className?: string description?: string draggingLabel?: string multiple?: boolean showBorderBeam?: boolean showFileList?: boolean title?: string onFilesAccepted?: (files: File[]) => void onFilesChange?: (files: FileUploadItem[]) => void } const ACCEPTED_FILE_TYPES: AcceptedFileType[] = [ { label: "Image", icon: FileImageGlyph }, { label: "PDF", icon: FileUploadGlyph }, { label: "Sheet", icon: FileSpreadsheetGlyph }, ] const DEFAULT_ACCEPT = [ ".pdf", ".doc", ".docx", ".xlsx", ".csv", ".png", ".jpg", ".jpeg", "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/csv", "image/png", "image/jpeg", ].join(",") const ICON_TRANSFORMS = [ { idle: "translate(-78%, -50%) rotate(-8deg)", active: "translate(-114%, -50%) rotate(-12deg) scale(1.08)", }, { idle: "translate(-50%, -50%) rotate(0deg)", active: "translate(-50%, -50%) rotate(0deg) scale(1.18)", }, { idle: "translate(-22%, -50%) rotate(8deg)", active: "translate(14%, -50%) rotate(12deg) scale(1.08)", }, ] function formatBytes(bytes: number) { if (bytes === 0) return "0 B" const units = ["B", "KB", "MB", "GB"] const index = Math.min( Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1 ) return `${(bytes / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}` } function matchesAccept(file: File, accept?: string) { if (!accept) return true return accept.split(",").some((rawToken) => { const token = rawToken.trim().toLowerCase() if (!token) return false if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token) if (token.endsWith("/*")) { return file.type.toLowerCase().startsWith(token.slice(0, -1)) } return file.type.toLowerCase() === token }) } function toUploadItems(files: FileList | File[]): FileUploadItem[] { return Array.from(files).map((file) => ({ id: `${file.name}-${file.size}-${file.lastModified}`, name: file.name, type: file.type || "Unknown type", size: file.size, url: URL.createObjectURL(file), })) } function UploadIconCluster({ acceptedFileTypes, isDragging, }: { acceptedFileTypes: AcceptedFileType[] isDragging: boolean }) { const singleIcon = acceptedFileTypes.length === 1 return (

{acceptedFileTypes.map((item, index) => ( ))}

) } export function FileUpload({ accept = DEFAULT_ACCEPT, acceptedFileTypes = ACCEPTED_FILE_TYPES, borderBeamTheme = "light", browseLabel = "Browse files", className, description = "PDF, DOC/DOCX, XLSX, CSV, PNG, or JPG", draggingLabel = "Drop to add", multiple = true, showBorderBeam = true, showFileList = true, title = "Click to upload or drop files", onFilesAccepted, onFilesChange, }: FileUploadProps) { const dragDepthRef = React.useRef(0) const inputRef = React.useRef(null) const [isDragging, setIsDragging] = React.useState(false) const [files, setFiles] = React.useState([]) const [rejectionMessage, setRejectionMessage] = React.useState( null ) const commitFiles = React.useCallback( (nextFiles: FileList | File[]) => { const acceptedFiles = Array.from(nextFiles) .filter((file) => matchesAccept(file, accept)) .slice(0, multiple ? undefined : 1) if (acceptedFiles.length === 0) { setRejectionMessage("This file type is not supported here.") return } setRejectionMessage(null) onFilesAccepted?.(acceptedFiles) const items = toUploadItems(acceptedFiles) setFiles((previousFiles) => { previousFiles.forEach((file) => URL.revokeObjectURL(file.url)) return items }) onFilesChange?.(items) }, [accept, multiple, onFilesAccepted, onFilesChange] ) React.useEffect(() => { return () => { files.forEach((file) => URL.revokeObjectURL(file.url)) } }, [files]) const openFileDialog = React.useCallback(() => { inputRef.current?.click() }, []) const dropzone = (

{ event.preventDefault() dragDepthRef.current += 1 setIsDragging(true) }} onDragLeave={(event) => { event.preventDefault() dragDepthRef.current = Math.max(0, dragDepthRef.current - 1) if (dragDepthRef.current === 0) setIsDragging(false) }} onDragOver={(event) => event.preventDefault()} onDrop={(event) => { event.preventDefault() dragDepthRef.current = 0 setIsDragging(false) if (event.dataTransfer.files.length > 0) { commitFiles(event.dataTransfer.files) } }} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault() openFileDialog() } }} >

{title}

{description}

{rejectionMessage ? (

{rejectionMessage}

) : null}

{isDragging ? draggingLabel : browseLabel}

{ if (event.target.files) { commitFiles(event.target.files) event.currentTarget.value = "" } }} />

) return (

{showBorderBeam ? ( {dropzone} ) : ( dropzone )} {showFileList && files.length > 0 ? (

{files.map((file) => (

{file.name}

{file.type} - {formatBytes(file.size)}

Ready

))}

) : null}

) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number } 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","border-beam@^1.0.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/border-beam","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":"border-beam@^1.0.1"}]]}]}]]}],["$","$L50",null,{"namespace":"@extend","registryDependencies":["@extend/file-thumbnail","utils","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/file-upload.tsx","content":"$52","type":"registry:ui","target":"@components/extend/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]