4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T5a37,"use client"; import * as React from "react"; import type { UploadField as UploadFieldDef } from "@buildnbuzz/form-react"; import { useDataField } from "@buildnbuzz/form-react"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; // --------------------------------------------------------------------------- // UI Options defined inside the registry component // --------------------------------------------------------------------------- export interface UploadUi { /** Visual variant. Defaults to `"dropzone"`. */ variant?: "dropzone" | "avatar" | "inline" | "gallery"; /** Shape preset for avatar / dropzone preview. Defaults to `"rounded"`. */ shape?: "circle" | "square" | "rounded"; /** Size preset. Defaults to `"md"`. */ size?: "xs" | "sm" | "md" | "lg" | "xl"; /** Accepted mime types, e.g. "image/*,application/pdf". */ accept?: string; /** Overwrite standard placeholder / dropzone text. */ dropzoneText?: string; /** className applied to ``. */ className?: string; /** Inline width applied to ``. */ width?: string | number; /** Controls required asterisk visibility. */ asterisk?: boolean; /** Text and label overrides. */ labels?: { /** Action trigger text (gallery: "Add file", inline: "Attach File"). */ trigger?: React.ReactNode; /** Remove/delete action text. Defaults to "Remove". */ remove?: React.ReactNode; /** Avatar hover overlay text. Defaults to "Edit". */ edit?: React.ReactNode; /** Status when empty. Defaults to "No file selected". */ empty?: React.ReactNode; /** Status with files selected. Receives count. */ selected?: (count: number) => React.ReactNode; /** Format support hint. Receives accept string and formatted maxSize. */ formatHint?: (accept?: string, maxSize?: string) => React.ReactNode; }; } // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- function formatBytes(bytes: number, decimals = 1) { if (bytes === 0) return "0 Bytes"; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ["Bytes", "KB", "MB", "GB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]; } function FileTypeIcon({ name }: { name: string }) { const ext = name.split(".").pop()?.toLowerCase(); const isImage = ["png", "jpg", "jpeg", "webp", "gif", "svg"].includes( ext || "", ); const isPdf = ext === "pdf"; const isZip = ["zip", "rar", "tar", "gz", "7z"].includes(ext || ""); if (isImage) { return ( ); } if (isPdf) { return ( ); } if (isZip) { return ( ); } return ( ); } export function UploadField() { const { fieldApi, field, isDisabled, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleChange, } = useDataField(); const ui = field.ui as UploadUi | undefined; const hasMany = !!field.hasMany; const variant = ui?.variant || "dropzone"; const shape = ui?.shape || "rounded"; const size = ui?.size || "md"; const fileInputRef = React.useRef(null); const [isDragActive, setIsDragActive] = React.useState(false); const [previews, setPreviews] = React.useState< Array<{ name: string; size?: number; url?: string }> >([]); const rawValue = fieldApi.state.value; // Sync value from state to internal previews array React.useEffect(() => { if (!rawValue) { setPreviews([]); return; } const items = Array.isArray(rawValue) ? rawValue : [rawValue]; const newPreviews = items.map((item) => { if (typeof window !== "undefined" && item instanceof window.File) { return { name: item.name, size: item.size, url: item.type.startsWith("image/") ? URL.createObjectURL(item) : undefined, }; } if (typeof item === "string") { return { name: item.split("/").pop() || item, url: item, }; } return { name: "Unknown File" }; }); setPreviews(newPreviews); // Cleanup object URLs on unmount/re-sync return () => { newPreviews.forEach((p) => { if (p.url && p.url.startsWith("blob:")) { URL.revokeObjectURL(p.url); } }); }; }, [rawValue]); const onFilesSelected = (fileList: FileList | null) => { if (!fileList || fileList.length === 0) return; const newFiles = Array.from(fileList); if (hasMany) { const currentFiles = Array.isArray(rawValue) ? rawValue : rawValue ? [rawValue] : []; handleChange([...currentFiles, ...newFiles]); } else { handleChange(newFiles[0]); } }; const removeFile = (index: number) => { if (isDisabled) return; if (hasMany && Array.isArray(rawValue)) { const updated = rawValue.filter((_, i) => i !== index); handleChange(updated.length > 0 ? updated : []); } else { handleChange(null as unknown as File | File[] | string | string[]); } }; const handleDrag = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); if (isDisabled) return; if (e.type === "dragenter" || e.type === "dragover") { setIsDragActive(true); } else if (e.type === "dragleave") { setIsDragActive(false); } }; const handleDrop = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragActive(false); if (isDisabled) return; if (e.dataTransfer.files && e.dataTransfer.files[0]) { onFilesSelected(e.dataTransfer.files); } }; const triggerSelect = () => { if (isDisabled) return; fileInputRef.current?.click(); }; const width = ui?.width; const widthStyle = width ? { width: typeof width === "number" ? `${width}px` : width, flex: "0 1 auto", } : undefined; // Inline styling calculations const dropzoneText = ui?.dropzoneText || placeholder || (hasMany ? "Drop files here or click to upload" : "Drop file here or click to upload"); return ( {label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} )}

onFilesSelected(e.target.files)} className="hidden" aria-describedby={ariaDescribedBy} aria-invalid={isInvalid} /> {/* VARIANT: AVATAR */} {variant === "avatar" && (

{previews[0]?.url ? ( // eslint-disable-next-line @next/next/no-img-element Avatar

) : (

)} {/* Hover action overlay */}

{ui?.labels?.edit ?? "Edit"}

{previews.length > 0 && !isDisabled && ( )}

)} {/* VARIANT: DROPZONE (DEFAULT) */} {variant === "dropzone" && (

{dropzoneText}

{ui?.labels?.formatHint ? ui.labels.formatHint( ui.accept, field.maxSize ? formatBytes(field.maxSize) : undefined, ) : ( <> {ui?.accept ? `Supports: ${ui.accept}` : "All formats supported"} {field.maxSize ? ` up to ${formatBytes(field.maxSize)}` : ""} )}

{/* Render Selected Files List */} {previews.length > 0 && (

{previews.map((file, idx) => (

{file.name}

{file.size && (

{formatBytes(file.size)}

)}

{!isDisabled && ( )}

))}

)}

)} {/* VARIANT: INLINE */} {variant === "inline" && (

{previews.length === 0 ? (ui?.labels?.empty ?? "No file selected") : (ui?.labels?.selected?.(previews.length) ?? `${previews.length} file(s) attached`)}

{previews.length > 0 && (

{previews.map((file, idx) => (

{file.name} {!isDisabled && ( )}

))}

)}

)} {/* VARIANT: GALLERY */} {variant === "gallery" && (

{previews.map((file, idx) => (

{file.url ? ( // eslint-disable-next-line @next/next/no-img-element

) : (

{file.name}

)} {/* Delete overlay */} {!isDisabled && (

)}

))} {/* Add Box */} {(!hasMany && previews.length === 0) || (hasMany && (!field.max || previews.length < field.max)) ? (

{ui?.labels?.trigger ?? "Add file"}

) : null}

)}

{description && !isInvalid && ( {description} )} {isInvalid && } ); } 4b:["$","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,["$","$L4c",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","button","field"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/fields/upload.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/fields/upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]