Add pic upload for hunt admins

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { createImageURL } from '#shared/utils/image';
 import ClickableImage from '~/components/ClickableImage.vue';
 import MultilineString from '~/components/MultilineString.vue';
 import { useI18nKey } from '~/composables/useI18nKey';
@@ -102,8 +103,6 @@ async function submit() {
 
   uploading.value = false;
 }
-
-const createImageURL = (file: File) => URL.createObjectURL(file);
 </script>
 
 <template>

app/pages/hunt/[huntSlug]/admin.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { createImageURL } from '#shared/utils/image';
 import superjson, { type SuperJSONResult } from 'superjson';
 import { useI18nKey } from '~/composables/useI18nKey';
 import { useTitleStore } from '~/stores/title';
@@ -153,6 +154,52 @@ async function addUser() {
   newUser.value = undefined;
   loading.value = false;
 }
+
+const newImage = ref<File>();
+const uploading = ref(false);
+const imageError = ref('');
+
+async function updateImage() {
+  if (!newImage.value) {
+    return;
+  }
+  uploading.value = true;
+  imageError.value = '';
+
+  const body = new FormData();
+  body.set('image', newImage.value);
+
+  try {
+    await $fetch(`/api/admin/hunt/${id}/image`, {
+      method: 'POST',
+      body
+    });
+
+    await refresh();
+    newImage.value = undefined;
+  } catch (e) {
+    imageError.value = parseError(e);
+  }
+  uploading.value = false;
+}
+
+async function deleteImage() {
+  uploading.value = true;
+  imageError.value = '';
+
+  try {
+    await $fetch(`/api/admin/hunt/${id}/image`, {
+      method: 'DELETE'
+    });
+
+    await refresh();
+    newImage.value = undefined;
+  } catch (e) {
+    imageError.value = parseError(e);
+  }
+
+  uploading.value = false;
+}
 </script>
 
 <template>
@@ -267,6 +314,50 @@ async function addUser() {
         >
       </VaButtonGroup>
     </VaForm>
+    <VaDivider />
+    <h2 class="text-2xl">Image</h2>
+    <div>
+      <VaImage
+        v-if="newImage"
+        :src="createImageURL(newImage)"
+        class="max-h-60 w-full"
+        fit="contain"
+        lazy
+      />
+      <VaImage
+        v-else-if="data?.picture"
+        :src="data?.picture?.url"
+        class="max-h-60 w-full"
+        fit="contain"
+        lazy
+      >
+        <template #loader> <VaProgressCircle indeterminate /> </template
+      ></VaImage>
+      <VaFileUpload
+        v-model="newImage"
+        :disabled="uploading || pending"
+        type="single"
+        file-types="jpg,png,jpeg"
+      />
+      <VaAlert
+        v-if="imageError.length > 0"
+        color="danger"
+        class="w-full text-center"
+        >{{ t(imageError) }}</VaAlert
+      >
+      <VaButtonGroup :disabled="uploading || pending">
+        <VaButton color="success" :disabled="!newImage" @click="updateImage">
+          Upload new image
+        </VaButton>
+        <VaButton
+          color="danger"
+          icon="delete"
+          :disabled="!data?.picture"
+          @click="deleteImage"
+          >Delete image</VaButton
+        >
+      </VaButtonGroup>
+    </div>
 
     <VaDivider />
     <h2 class="text-2xl">Hunt admin members:</h2>