"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CameraIcon, TrashIcon } from "@kineticui/icons"; export type AvatarUploaderProps = { value?: string | null; /** Receives the chosen file. Return a promise to show upload progress; call `progress(0–1)` to update the ring. */ onUpload: (file: File, progress: (p: number) => void) => Promise | string | void; onRemove?: () => void; /** Accepted image types. */ accept?: string; maxSizeMB?: number; size?: number; fallback?: React.ReactNode; className?: string; }; /** Click or drop an image onto a round avatar; shows an upload progress ring and remove option. */ export function AvatarUploader({ value, onUpload, onRemove, accept = "image/png,image/jpeg,image/webp", maxSizeMB = 5, size = 96, fallback, className }: AvatarUploaderProps) { const input = React.useRef(null); const [preview, setPreview] = React.useState(null); const [progress, setProgress] = React.useState(null); const [error, setError] = React.useState(null); const [over, setOver] = React.useState(false); const shown = preview ?? value ?? null; const r = size / 2 + 4; const c = 2 * Math.PI * r; const handle = async (file?: File) => { if (!file) return; setError(null); if (!accept.split(",").some((t) => file.type === t.trim())) return setError("Use a PNG, JPG or WebP image."); if (file.size > maxSizeMB * 1024 * 1024) return setError(`Max ${maxSizeMB} MB.`); const local = URL.createObjectURL(file); setPreview(local); setProgress(0); try { const out = await onUpload(file, (p) => setProgress(p)); if (typeof out === "string") setPreview(out); } catch { setError("Upload failed. Try again."); setPreview(null); } finally { setProgress(null); } }; return (

{shown && onRemove ? ( ) : null}

{error ?? (progress !== null ? `Uploading… ${Math.round(progress * 100)}%` : `PNG, JPG or WebP, up to ${maxSizeMB} MB. Drop a file on the avatar.`)}

); }

Avatar Uploader

Installation

Exports