fix: ignore profile picture cache after profile picture gets updated

This commit is contained in:
Elias Schneider
2025-04-09 15:51:58 +02:00
parent 658a9ca6dd
commit 4ba68938dd
5 changed files with 62 additions and 7 deletions

View File

@@ -2,10 +2,11 @@
import FileInput from '$lib/components/form/file-input.svelte';
import * as Avatar from '$lib/components/ui/avatar';
import Button from '$lib/components/ui/button/button.svelte';
import { LucideLoader, LucideRefreshCw, LucideUpload } from 'lucide-svelte';
import { openConfirmDialog } from '../confirm-dialog';
import { m } from '$lib/paraglide/messages';
import type UserService from '$lib/services/user-service';
import { getProfilePictureUrl } from '$lib/utils/profile-picture-util';
import { LucideLoader, LucideRefreshCw, LucideUpload } from 'lucide-svelte';
import { onMount } from 'svelte';
import { openConfirmDialog } from '../confirm-dialog';
let {
userId,
@@ -20,7 +21,12 @@
} = $props();
let isLoading = $state(false);
let imageDataURL = $state(`/api/users/${userId}/profile-picture.png`);
let imageDataURL = $state('');
onMount(() => {
// The "skipCache" query will only be added to the profile picture url on client-side
// because of that we need to set the imageDataURL after the component is mounted
imageDataURL = getProfilePictureUrl(userId);
});
async function onImageChange(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0] || null;
@@ -35,7 +41,7 @@
reader.readAsDataURL(file);
await updateCallback(file).catch(() => {
imageDataURL = `/api/users/${userId}/profile-picture.png`;
imageDataURL = getProfilePictureUrl(userId);
});
isLoading = false;
}

View File

@@ -4,6 +4,7 @@
import { m } from '$lib/paraglide/messages';
import WebAuthnService from '$lib/services/webauthn-service';
import userStore from '$lib/stores/user-store';
import { getProfilePictureUrl } from '$lib/utils/profile-picture-util';
import { LucideLogOut, LucideUser } from 'lucide-svelte';
const webauthnService = new WebAuthnService();
@@ -17,7 +18,7 @@
<DropdownMenu.Root>
<DropdownMenu.Trigger
><Avatar.Root class="h-9 w-9">
<Avatar.Image src="/api/users/{$userStore?.id}/profile-picture.png" />
<Avatar.Image src={getProfilePictureUrl($userStore?.id)} />
</Avatar.Root></DropdownMenu.Trigger
>
<DropdownMenu.Content class="min-w-40" align="start">