From e70ea6f2020d9ef558114598b8a875b13ee04d96 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 19 Mar 2025 01:22:13 +0100
Subject: [PATCH] Use ImagePicker also in profile view

---
 dashboard/src/components/ImagePicker.vue |  2 +-
 dashboard/src/views/ProfileView.vue      | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/components/ImagePicker.vue b/dashboard/src/components/ImagePicker.vue
index 9120fbad9..01b3ba216 100644
--- a/dashboard/src/components/ImagePicker.vue
+++ b/dashboard/src/components/ImagePicker.vue
@@ -51,7 +51,7 @@ function onChanged(event) {
   fr.onload = function () {
     const image = new Image();
     image.onload = function () {
-      const size = props.size ? parseInt(props.size) : 0;
+      const size = props.size ? parseInt(props.size) : 512;
       const maxSize = props.maxSize ? parseInt(props.maxSize) : 0;
 
       const canvas = document.createElement('canvas');
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 3df4a13d7..3d9ffbfb1 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -11,6 +11,7 @@ import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import Section from '../components/Section.vue';
 import ApiTokens from '../components/ApiTokens.vue';
+import ImagePicker from '../components/ImagePicker.vue';
 
 import DashboardModel from '../models/DashboardModel.js';
 import ProfileModel from '../models/ProfileModel.js';
@@ -106,11 +107,10 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
   await refreshProfile();
 }
 
-const avatarFileInput = useTemplateRef('avatarFileInput');
-async function onAvatarChanged() {
-  if (!avatarFileInput.value.files[0]) return;
-  await profileModel.setAvatar(avatarFileInput.value.files[0]);
+async function onAvatarChanged(file) {
+  await profileModel.setAvatar(file);
 
+  // TODO we somehow need to do this globally
   // invalidate and refresh profile avatar url
   const u = new URL(user.value.avatarUrl);
   u.searchParams.set('ts', Date.now());
@@ -268,10 +268,7 @@ onMounted(async () => {
 
       <div style="display: flex; flex-wrap: wrap">
         <div style="width: 150px;">
-          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
-          <div class="profile-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
-            <i class="profile-avatar-edit-indicator fa fa-pencil-alt"></i>
-          </div>
+          <ImagePicker :src="user.avatarUrl" fallback-src="/img/appicon_fallback.png" size="512" @changed="onAvatarChanged" display-height="128px"/>
         </div>
         <div style="flex-grow: 1;">
           <SettingsItem>