[chore] better filepicker for images

src/components/CalculationTable.vue

@@ -37,9 +37,13 @@
     </template>
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
-
         <q-card>
-          <q-img v-if="showPic && props.row.has_image" style="max-height: 256px" :src="image(props.row.id)" fit="contain">
+          <q-img
+            v-if="showPic && props.row.has_image"
+            style="max-height: 256px"
+            :src="image(props.row.id)"
+            fit="contain"
+          >
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -84,7 +88,12 @@
               </div>
             </template>
           </q-img>
-          <q-img v-if="showPic && !props.row.has_image" class="bg-white" style="max-height: 256px" src="no-image.svg">
+          <q-img
+            v-if="showPic && !props.row.has_image"
+            class="bg-white"
+            style="max-height: 256px"
+            src="no-image.svg"
+          >
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -214,7 +223,7 @@ import { filter, Search } from '../utils/filter';
 import SearchInput from './SearchInput.vue';
 import DrinkModify from './DrinkModify.vue';
 import { DeleteObjects } from '../utils/utils';
-import { setNewImage, getNewImage} from '../utils/image';
+import { setNewImage, getNewImage } from '../utils/image';
 import { PERMISSIONS } from '../permissions';
 import { Notify } from 'quasar';
 
@@ -546,10 +555,10 @@ export default defineComponent({
           editDrink.value.id = _drink.id;
         }
       }
-      if (drinkPic instanceof File) {
+      if (drinkPic instanceof File && drinkPic.name) {
         await savePicture(drinkPic);
         if (drink.id > 0) {
-          setNewImage(drink.id)
+          setNewImage(drink.id);
         }
       }
       editDrink.value = undefined;
@@ -565,15 +574,13 @@ export default defineComponent({
 
     function image(id: number | undefined) {
       if (id) {
-        const _newImage = getNewImage(id)
+        const _newImage = getNewImage(id);
         if (_newImage) {
           return `${
             api.defaults.baseURL || ''
-          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`
+          }/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`;
         }
-        return `${
-          api.defaults.baseURL || ''
-        }/pricelist/drinks/${id}/picture?thumbnail`;
+        return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
       }
       return 'no-image.svg';
     }

src/components/DrinkModify.vue

@@ -24,28 +24,30 @@
       </div>
     </q-card-section>
     <q-card-section>
-      <q-img :src="image" style="max-height: 256px" fit="contain" />
       <div class="full-width row">
         <div class="col-10 q-pa-sm">
           <q-file
             v-model="drinkPic"
             filled
-            clearable
+            :clearable="drinkPic.name != ''"
             dense
+            accept=".jpg, .jpeg, .png, image/*"
             @update:model-value="imagePreview"
-            @clear="imgsrc = undefined"
+            @clear="clear"
           >
-            <template #prepend>
-              <q-icon name="mdi-image" />
+            <template #file>
+              <q-img :src="image" style="max-height: 256px" fit="contain" />
             </template>
           </q-file>
         </div>
-        <div class="col-2 q-pa-sm text-right">
+        <div class="column justify-center">
+          <div class="col-2 q-pa-sm">
             <q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
               <q-tooltip> Bild entfernen </q-tooltip>
             </q-btn>
           </div>
         </div>
+      </div>
     </q-card-section>
     <q-card-section>
       <q-select
@@ -241,7 +243,7 @@ export default defineComponent({
       edit_drink.value?.receipt?.splice(event, 1);
     }
 
-    const drinkPic = ref<File | undefined>();
+    const drinkPic = ref<File>(new File([], '', {}));
     const imgsrc = ref();
 
     const deletePic = ref(false);
@@ -249,7 +251,7 @@ export default defineComponent({
     function delete_pic() {
       deletePic.value = true;
       imgsrc.value = undefined;
-      drinkPic.value = undefined;
+      drinkPic.value = new File([], '', {});
       if (edit_drink.value) {
         edit_drink.value.has_image = false;
       }
@@ -276,9 +278,11 @@ export default defineComponent({
         return 'no-image.svg';
       }
       if (edit_drink.value?.has_image) {
-        const _image = getNewImage(edit_drink.value?.id)
+        const _image = getNewImage(edit_drink.value?.id);
         if (_image) {
-          return `${api.defaults.baseURL || ''}/pricelist/drinks/${edit_drink.value.id}/picture?thumbnail?t=${_image.lastModified.toString()}`
+          return `${api.defaults.baseURL || ''}/pricelist/drinks/${
+            edit_drink.value.id
+          }/picture?thumbnail?t=${_image.lastModified.toString()}`;
         }
         return `${api.defaults.baseURL || ''}/pricelist/drinks/${
           edit_drink.value.id
@@ -331,6 +335,11 @@ export default defineComponent({
       edit_volumes.value?.some((a) => a.ingredients.length > 0)
     );
 
+    function clear(val: File) {
+      drinkPic.value = new File([], '', {});
+      imgsrc.value = undefined;
+    }
+
     return {
       edit_drink,
       save,
@@ -357,6 +366,7 @@ export default defineComponent({
       hasIngredients,
       hasPermission,
       PERMISSIONS,
+      clear,
     };
   },
 });

src/utils/image.ts

@@ -13,8 +13,8 @@ export function getNewImage(id: number) {
 export function setNewImage(id: number) {
   const image = newImage.value.find((a) => a.id === id);
   if (image) {
-    image.lastModified = new Date()
+    image.lastModified = new Date();
   } else {
-    newImage.value.push({id, lastModified: new Date()})
+    newImage.value.push({ id, lastModified: new Date() });
   }
 }