86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
// components/account/AvatarUploader.tsx
|
|
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
|
|
export default function AvatarUploader({
|
|
avatarId,
|
|
onUpdated,
|
|
}: {
|
|
avatarId?: string | null;
|
|
onUpdated?: () => void;
|
|
}) {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [msg, setMsg] = useState<string | null>(null);
|
|
|
|
const API_BASE = useMemo(
|
|
() => (process.env.NEXT_PUBLIC_API_BASE_URL || "").replace(/\/$/, ""),
|
|
[]
|
|
);
|
|
const currentUrl = avatarId ? `${API_BASE}/assets/${avatarId}` : null;
|
|
|
|
const onUpload = async () => {
|
|
setMsg(null);
|
|
if (!file) {
|
|
setMsg("Choose a file first.");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
const fd = new FormData();
|
|
fd.set("file", file, file.name);
|
|
|
|
const r = await fetch("/api/account/avatar", { method: "POST", body: fd });
|
|
if (r.status === 401) {
|
|
location.assign(`/auth/sign-in?reauth=1&next=${encodeURIComponent("/portal/account")}`);
|
|
return;
|
|
}
|
|
const j = await r.json().catch(() => ({}));
|
|
if (!r.ok) {
|
|
setMsg(j?.error || "Upload failed");
|
|
return;
|
|
}
|
|
setMsg("Avatar updated.");
|
|
setFile(null);
|
|
onUpdated?.();
|
|
} catch (e: any) {
|
|
setMsg(e?.message || "Upload failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-md border p-4 space-y-3">
|
|
<h3 className="font-semibold">Avatar</h3>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-16 w-16 rounded-full overflow-hidden border bg-muted flex items-center justify-center">
|
|
{currentUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={currentUrl} alt="Avatar" className="h-full w-full object-cover" />
|
|
) : (
|
|
<span className="text-xs opacity-60">No Avatar</span>
|
|
)}
|
|
</div>
|
|
|
|
<input
|
|
className="text-sm"
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) => setFile(e.currentTarget.files?.[0] ?? null)}
|
|
/>
|
|
<button
|
|
onClick={onUpload}
|
|
disabled={busy || !file}
|
|
className="rounded-md bg-black text-white px-3 py-2 text-sm disabled:opacity-60"
|
|
>
|
|
{busy ? "Uploading…" : "Upload"}
|
|
</button>
|
|
</div>
|
|
|
|
{msg && <div className="text-sm opacity-80">{msg}</div>}
|
|
</div>
|
|
);
|
|
}
|