From a30ce140d23de1ecc7de0b279aa5f46e745a6b3f Mon Sep 17 00:00:00 2001
From: Thaum Rystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:42:26 +0200
Subject: [PATCH] Used file input for character portrait and avatar

---
 .../client/ui/creature/CreatureForm.vue       | 46 ++++++++++++-------
 .../ui/files/userImages/ImageInputDialog.vue  |  3 ++
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/imports/client/ui/creature/CreatureForm.vue b/app/imports/client/ui/creature/CreatureForm.vue
index e4532296..7c1b2533 100644
--- a/app/imports/client/ui/creature/CreatureForm.vue
+++ b/app/imports/client/ui/creature/CreatureForm.vue
@@ -21,22 +21,34 @@
       :error-messages="errors.gender"
       @change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
     />
-    <text-field
-      label="Picture URL"
-      hint="A link to a high resolution image"
-      :disabled="!editPermission"
-      :value="model.picture"
-      :error-messages="errors.picture"
-      @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
-    />
-    <text-field
-      label="Avatar picture URL"
-      hint="A link to a smaller, square image to use as an avatar"
-      :disabled="!editPermission"
-      :value="model.avatarPicture"
-      :error-messages="errors.avatarPicture"
-      @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
-    />
+    <v-row>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <smart-image-input
+          label="Picture"
+          hint="A link to a high resolution image"
+          :disabled="!editPermission"
+          :value="model.picture"
+          :error-messages="errors.picture"
+          @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <smart-image-input
+          label="Avatar"
+          hint="A link to a smaller, square image to use as an avatar"
+          :disabled="!editPermission"
+          :value="model.avatarPicture"
+          :error-messages="errors.avatarPicture"
+          @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
+        />
+      </v-col>
+    </v-row>
     <form-sections>
       <form-section name="Settings">
         <v-switch
@@ -155,12 +167,14 @@ import LibraryList from '/imports/client/ui/library/LibraryList.vue';
 import LibraryCollections from '/imports/api/library/LibraryCollections';
 import { changeAllowedLibraries, toggleAllUserLibraries } from '/imports/api/creature/creatures/methods/changeAllowedLibraries';
 import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions';
+import SmartImageInput from '/imports/client/ui/components/global/SmartImageInput.vue';
 
 export default {
   components: {
     FormSection,
     FormSections,
     LibraryList,
+    SmartImageInput,
   },
   props: {
     stored: {
diff --git a/app/imports/client/ui/files/userImages/ImageInputDialog.vue b/app/imports/client/ui/files/userImages/ImageInputDialog.vue
index 480f6c12..7e2af7b9 100644
--- a/app/imports/client/ui/files/userImages/ImageInputDialog.vue
+++ b/app/imports/client/ui/files/userImages/ImageInputDialog.vue
@@ -114,6 +114,9 @@ export default {
     };
   },
   meteor: {
+    $subscribe: {
+      'userImages': [],
+    },
     userImages() {
       const userId = Meteor.userId();
       return UserImages.find(