From 59f43a58d3680c411d63068f650c8feac979b3af Mon Sep 17 00:00:00 2001
From: Philipp <xarantolus@protonmail.com>
Date: Sun, 29 Jan 2023 02:27:40 +0100
Subject: [PATCH] Upload recipe step images from mobile devices (#2025)

* Upload recipe step images from mobile devices

This adds a button in the recipe step dropdown, as not all mobile
devices can drag and drop a file into the web page

See #885

* Add progress bar
---
 .../RecipePageInstructions.vue                | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 57cecb355..8e73c1767 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -146,6 +146,10 @@
                               text: 'Merge Above',
                               event: 'merge-above',
                             },
+                            {
+                              text: 'Upload image',
+                              event: 'upload-image'
+                            },
                             {
                               icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
                               text: previewStates[index] ? 'Edit Markdown' : 'Preview Markdown',
@@ -158,6 +162,7 @@
                       @toggle-section="toggleShowTitle(step.id)"
                       @link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
                       @preview-step="togglePreviewState(index)"
+                      @upload-image="openImageUpload(index)"
                       @delete="value.splice(index, 1)"
                     />
                   </div>
@@ -169,6 +174,8 @@
                 </v-fade-transition>
               </v-card-title>
 
+              <v-progress-linear v-if="isEditForm && loadingStates[index]" :active="true" :indeterminate="true" />
+
               <!-- Content -->
               <DropZone @drop="(f) => handleImageDrop(index, f)">
                 <v-card-text
@@ -548,6 +555,8 @@ export default defineComponent({
       }
     });
 
+    const loadingStates = ref<{ [key: number]: boolean }>({});
+
     async function handleImageDrop(index: number, files: File[]) {
       if (!files) {
         return;
@@ -559,6 +568,8 @@ export default defineComponent({
         return;
       }
 
+      loadingStates.value[index] = true;
+
       const { data } = await api.recipes.createAsset(props.recipe.slug, {
         name: file.name,
         icon: "mdi-file-image",
@@ -566,6 +577,8 @@ export default defineComponent({
         extension: file.name.split(".").pop() || "",
       });
 
+      loadingStates.value[index] = false;
+
       if (!data) {
         return; // TODO: Handle error
       }
@@ -576,11 +589,26 @@ export default defineComponent({
       props.value[index].text += text;
     }
 
+    function openImageUpload(index: number) {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = async () => {
+        if (input.files) {
+          await handleImageDrop(index, Array.from(input.files));
+          input.remove();
+        }
+      };
+      input.click();
+    }
+
     return {
       // Image Uploader
       toggleDragMode,
       handleImageDrop,
       imageUploadMode,
+      openImageUpload,
+      loadingStates,
 
       // Rest
       drag,