User Avatars with Supabase Storage

insert into storage.buckets (id, name, public)

values ('avatars', 'avatars', true)

on conflict (id) do nothing;

-- Allow authenticated users to upload to their folder

CREATE POLICY "Users can upload own avatar"

ON storage.objects FOR INSERT

WITH CHECK (

bucket_id = 'avatars' AND

auth.uid()::text = (storage.foldername(name))[1]

);

-- Allow public read

CREATE POLICY "Public read access"

ON storage.objects FOR SELECT

USING (bucket_id = 'avatars');

-- Allow users to update own

CREATE POLICY "Users can update own avatar"

ON storage.objects FOR UPDATE

USING (

bucket_id = 'avatars' AND

auth.uid()::text = (storage.foldername(name))[1]

);

-- Allow users to delete own

CREATE POLICY "Users can delete own avatar"

ON storage.objects FOR DELETE

USING (

bucket_id = 'avatars' AND

auth.uid()::text = (storage.foldername(name))[1]

);

// In Profile.tsx

const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {

const file = e.target.files?.[0];

if (!file) return;

if (!file.type.startsWith('image/')) {

setError('Please select an image file.');

return;

}

if (file.size > 5 * 1024 * 1024) {

setError('Image must be smaller than 5MB.');

return;

}

try {

setAvatarUploading(true);

const fileId = `${user.id}/${Date.now()}.${file.name.split('.').pop()}`;

const { data, error: uploadError } = await supabase.storage

.from('avatars')

.upload(fileId, file, { upsert: true });

if (uploadError) throw uploadError;

const { data: { publicUrl } } = supabase.storage

.from('avatars')

.getPublicUrl(data.path);

setAvatarUrl(publicUrl);

setMessage('Avatar uploaded! Click "Save Changes" to make it permanent.');

} catch (err) {

setError(err instanceof Error ? err.message : 'Failed to upload avatar.');

} finally {

setAvatarUploading(false);

}

};

https://xxx.supabase.co/storage/v1/object/public/avatars/user-id/timestamp.ext

{displayAvatar ? (

<img

src={displayAvatar}

alt="Avatar preview"

className="w-7xl h-7xl object-cover border border-border"

style={{ borderRadius: avatarShapeRadius }}

onError={(e) => {

(e.target as HTMLImageElement).style.display = 'none';

}}

/>

) : (

<div

className="w-7xl h-7xl bg-muted flex items-center justify-center border border-border text-regular"

style={{ borderRadius: avatarShapeRadius }}

>

<span className="text-5xl font-semibold">{avatarLetter}</span>

</div>

)}