72 lines
2.1 KiB
React
72 lines
2.1 KiB
React
|
import React, { useRef, useState } from 'react';
|
||
|
|
|
||
|
|
export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
|
||
|
|
const [thumbUrl, setThumbUrl] = useState(initialThumbUrl || null);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [error, setError] = useState(null);
|
||
|
|
const inputRef = useRef(null);
|
||
|
|
|
||
|
|
function handleClick() {
|
||
|
|
inputRef.current?.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleChange(e) {
|
||
|
|
const file = e.target.files?.[0];
|
||
|
|
if (!file) return;
|
||
|
|
|
||
|
|
const fd = new FormData();
|
||
|
|
fd.append('avatar', file);
|
||
|
|
|
||
|
|
setLoading(true);
|
||
|
|
setError(null);
|
||
|
|
|
||
|
|
fetch(uploadUrl, { method: 'POST', body: fd })
|
||
|
|
.then(r => r.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.error) {
|
||
|
|
setError(data.error);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setThumbUrl(data.thumbUrl);
|
||
|
|
|
||
|
|
const navImg = document.querySelector('.hero-auth-avatar:not(.hero-auth-avatar--initials)');
|
||
|
|
const navInitials = document.querySelector('.hero-auth-avatar.hero-auth-avatar--initials');
|
||
|
|
if (navImg) {
|
||
|
|
navImg.src = data.thumbUrl;
|
||
|
|
} else if (navInitials) {
|
||
|
|
const img = document.createElement('img');
|
||
|
|
img.src = data.thumbUrl;
|
||
|
|
img.alt = navInitials.textContent.trim();
|
||
|
|
img.className = 'hero-auth-avatar';
|
||
|
|
navInitials.replaceWith(img);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => setError('Upload failed. Please try again.'))
|
||
|
|
.finally(() => setLoading(false));
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`profile-avatar${loading ? ' profile-avatar--loading' : ''}`}
|
||
|
|
title="Click to change profile picture"
|
||
|
|
onClick={handleClick}
|
||
|
|
>
|
||
|
|
{thumbUrl
|
||
|
|
? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
|
||
|
|
: <span className="profile-avatar__initials">{initials}</span>
|
||
|
|
}
|
||
|
|
<div className="profile-avatar__overlay">
|
||
|
|
<i className="fa fa-camera" />
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
ref={inputRef}
|
||
|
|
type="file"
|
||
|
|
accept="image/jpeg,image/png,image/gif,image/webp"
|
||
|
|
style={{ display: 'none' }}
|
||
|
|
onChange={handleChange}
|
||
|
|
/>
|
||
|
|
{error && <div className="profile-avatar__error">{error}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|