fix: Update image.vue script actions to update/remove 1 image at a time

frontend/pages/g/[groupSlug]/r/create/image.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <v-form
+    <v-form ref="domUrlForm" @submit.prevent="createRecipe">
-      ref="domUrlForm"
-      @submit.prevent="createRecipe"
-    >
       <div>
         <v-card-title class="headline">
           {{ $t('recipe.create-recipe-from-an-image') }}
@@ -12,44 +9,16 @@
           <p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
           <v-container class="pa-0">
             <v-row>
-              <v-col
+              <v-col cols="auto" align-self="center">
-                cols="auto"
+                <AppButtonUpload class="ml-auto" url="none" file-name="images" accept="image/*"
-                align-self="center"
+                  :text="$t('recipe.upload-image')" :text-btn="false" :post="false" @uploaded="uploadImage" />
-              >
-                <AppButtonUpload
-                  class="ml-auto"
-                  url="none"
-                  file-name="images"
-                  accept="image/*"
-                  multiple
-                  :text="$t('recipe.upload-image')"
-                  :text-btn="false"
-                  :post="false"
-                  @uploaded="uploadImages"
-                />
-                <v-btn
-                  v-if="uploadedImages.length > 0"
-                  color="error"
-                  @click="clearImages"
-                >
-                  <v-icon start>
-                    {{ $globals.icons.close }}
-                  </v-icon>
-                  {{ $t('recipe.remove-image') }}
-                </v-btn>
               </v-col>
               <v-spacer />
             </v-row>
 
-            <div
+            <div v-if="uploadedImages.length > 0" class="mt-3">
-              v-if="uploadedImages.length > 0"
-              class="mt-3"
-            >
               <v-row>
-                <v-col
+                <v-col cols="12" class="pb-0">
-                  cols="12"
-                  class="pb-0"
-                >
                   <v-card-text class="pa-0">
                     <p class="mb-0">
                       {{ $t('recipe.crop-and-rotate-the-image') }}
@@ -59,17 +28,16 @@
               </v-row>
               <v-row style="max-width: 600px;">
                 <v-spacer />
-                <v-col
+                <v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
-                  v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
+                  <ImageCropper :img="imageUrl" cropper-height="50vh" cropper-width="100%"
-                  :key="index"
+                    @save="(croppedImage) => updateUploadedImage(index, croppedImage)" />
-                  cols="12"
+
-                >
+                  <v-btn color="error" @click="() => clearImage(index)">
-                  <ImageCropper
+                    <v-icon start>
-                    :img="imageUrl"
+                      {{ $globals.icons.close }}
-                    cropper-height="50vh"
+                    </v-icon>
-                    cropper-width="100%"
+                    {{ $t('recipe.remove-image') }}
-                    @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
+                  </v-btn>
-                  />
                 </v-col>
                 <v-spacer />
               </v-row>
@@ -79,25 +47,13 @@
         <v-card-actions v-if="uploadedImages.length > 0">
           <div>
             <p style="width: 250px">
-              <BaseButton
+              <BaseButton rounded block type="submit" :loading="loading" />
-                rounded
-                block
-                type="submit"
-                :loading="loading"
-              />
             </p>
             <p>
-              <v-checkbox
+              <v-checkbox v-model="shouldTranslate" hide-details :label="$t('recipe.should-translate-description')"
-                v-model="shouldTranslate"
+                :disabled="loading" />
-                hide-details
-                :label="$t('recipe.should-translate-description')"
-                :disabled="loading"
-              />
             </p>
-            <p
+            <p v-if="loading" class="mb-0">
-              v-if="loading"
-              class="mb-0"
-            >
               {{ $t('recipe.please-wait-image-procesing') }}
             </p>
           </div>
@@ -130,16 +86,18 @@ export default defineNuxtComponent({
     const uploadedImagesPreviewUrls = ref<string[]>([]);
     const shouldTranslate = ref(true);
 
-    function uploadImages(fileObjects: File[]) {
+    function uploadImage(fileObject: File) {
-      uploadedImages.value = fileObjects;
+      uploadedImages.value = [...uploadedImages.value, fileObject];
-      uploadedImageNames.value = fileObjects.map((file) => file.name);
+      uploadedImageNames.value = [...uploadedImageNames.value, fileObject.name];
-      uploadedImagesPreviewUrls.value = fileObjects.map((file) => URL.createObjectURL(file));
+      uploadedImagesPreviewUrls.value = [...uploadedImagesPreviewUrls.value, URL.createObjectURL(fileObject)];
     }
 
-    function clearImages() {
+    function clearImage(index: number) {
-      uploadedImages.value = [];
+      URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
-      uploadedImageNames.value = [];
+
-      uploadedImagesPreviewUrls.value = [];
+      uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
+      uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
+      uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
     }
 
     async function createRecipe() {
@@ -153,7 +111,8 @@ export default defineNuxtComponent({
       if (error || !data) {
         alert.error(i18n.t("events.something-went-wrong"));
         state.loading = false;
-      } else {
+      }
+      else {
         router.push(`/g/${groupSlug.value}/r/${data}`);
       }
     }
@@ -168,8 +127,8 @@ export default defineNuxtComponent({
       uploadedImages,
       uploadedImagesPreviewUrls,
       shouldTranslate,
-      uploadImages,
+      uploadImage,
-      clearImages,
+      clearImage,
       createRecipe,
       updateUploadedImage,
     };