Fix app links icon upload

dashboard/src/components/ApplinkDialog.vue

@@ -7,6 +7,7 @@ const t = i18n.t;
 import { computed, ref, useTemplateRef } from 'vue';
 import { Dialog, FormGroup, InputDialog, MultiSelect, Radiobutton, TagInput, TextInput } from '@cloudron/pankow';
 import { API_ORIGIN } from '../constants.js';
+import { getDataURLFromFile } from '../utils.js';
 import ImagePicker from './ImagePicker.vue';
 import ApplinksModel from '../models/ApplinksModel.js';
 import UsersModel from '../models/UsersModel.js';
@@ -30,7 +31,7 @@ const id = ref('');
 const upstreamUri = ref('');
 const label = ref('');
 const tags = ref([]);
-const iconFile = ref(null); // if set to '' we will reset
+const iconFile = ref(null);
 const iconUrl = ref('');
 const accessRestrictionOption = ref('');
 const accessRestriction = ref({
@@ -52,30 +53,10 @@ const isValid = computed(() => {
   return true;
 });
 
-function getDataURLFromFile(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-
-    reader.onload = function(event) {
-      resolve(event.target.result);
-    };
-
-    reader.onerror = function(event) {
-      reject(event.target.error);
-    };
-
-    reader.readAsDataURL(file);
-  });
-}
-
 function onIconChanged(file) {
   iconFile.value = file;
 }
 
-function onResetIcon() {
-  iconFile.value = '';
-}
-
 async function onSubmit() {
   busy.value = true;
 
@@ -92,9 +73,9 @@ async function onSubmit() {
     data.accessRestriction.groups = accessRestriction.value.groups.map(function (g) { return g.id; });
   }
 
-  if (iconFile.value === '') { // user reset the icon
+  if (iconFile.value === 'fallback') { // user reset the icon
     data.icon = '';
-  } else if (iconFile.value) { // user loaded custom icon
+  } else if (iconFile.value !== 'src') { // user loaded custom icon
     data.icon = (await getDataURLFromFile(iconFile.value)).replace(/^data:image\/[a-z]+;base64,/, '');
   }
 
@@ -110,8 +91,6 @@ async function onSubmit() {
   emits('success');
   applinkDialog.value.close();
 
-  // clear this to retrigger ImagePicker loading
-  iconUrl.value = '';
   busy.value = false;
 }
 
@@ -139,7 +118,7 @@ defineExpose({
     upstreamUri.value = applink ? applink.upstreamUri : '';
     label.value = applink ? applink.label : '';
     iconUrl.value = applink ? applink.iconUrl : 'fallback';
-    iconFile.value = null;
+    iconFile.value = applink?.iconUrl ? 'src' : 'fallback';
     tags.value = applink ? applink.tags : [];
     accessRestrictionOption.value = applink && applink.accessRestriction ? 'groups' : 'any';
     accessRestriction.value = applink && applink.accessRestriction ? applink.accessRestriction : { users: [], groups: [] };
@@ -193,7 +172,7 @@ defineExpose({
 
         <div>
           <label for="previewIcon">{{ $t('app.display.icon') }}</label>
-          <ImagePicker ref="imagePicker" mode="simple" v-if="iconUrl" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" :unset-handler="mode === 'new' ? null : onResetIcon" @changed="onIconChanged" size="512" display-height="80px" style="width: 80px"/>
+          <ImagePicker ref="imagePicker" mode="simple" :src="iconUrl" :fallback-src="`${API_ORIGIN}/img/appicon_fallback.png`" @changed="onIconChanged" size="512" display-height="80px" style="width: 80px"/>
         </div>
 
         <FormGroup>