feat: Add delete button to recipe image modal

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -9,7 +9,7 @@
           {{ $t("general.image") }}
         </v-btn>
       </template>
-      <v-card width="400">
+      <v-card width="450">
         <v-card-title class="headline flex mb-0">
           <div>
             {{ $t("recipe.recipe-image") }}
@@ -22,6 +22,10 @@
             :post="false"
             @uploaded="uploadImage"
           />
+          <v-btn class="ml-2" color="error" :loading="loading" :disabled="!slug" @click="deleteImage">
+            <v-icon> {{ $globals.icons.delete }} </v-icon>
+            {{ $t("general.delete") }}
+          </v-btn>
         </v-card-title>
         <v-card-text class="mt-n5">
           <div>
@@ -45,6 +49,7 @@ import { useUserApi } from "~/composables/api";
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
+const DELETE_EVENT = "delete";
 
 export default defineComponent({
   props: {
@@ -65,6 +70,11 @@ export default defineComponent({
       state.menu = false;
     }
 
+    function deleteImage() {
+      context.emit(DELETE_EVENT);
+      state.menu = false;
+    }
+
     const api = useUserApi();
     async function getImageFromURL() {
       state.loading = true;
@@ -81,6 +91,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       uploadImage,
+      deleteImage,
       getImageFromURL,
       messages,
     };

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex justify-start align-top py-2">
-    <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @refresh="imageKey++" />
+    <RecipeImageUploadBtn class="my-1" :slug="recipe.slug" @upload="uploadImage" @delete = "deleteImage" @refresh="imageKey++" />
     <RecipeSettingsMenu
       class="my-1 mx-1"
       :value="recipe.settings"
@@ -59,7 +59,6 @@ export default defineComponent({
     const { user } = usePageUser();
     const api = useUserApi();
     const { imageKey } = usePageState(props.recipe.slug);
-
     const canEditOwner = computed(() => {
       return user.id === props.recipe.userId || user.admin;
     })
@@ -86,10 +85,21 @@ export default defineComponent({
       imageKey.value++;
     }
 
+    async function deleteImage() {
+      if (props.recipe.image == null) {
+        return;
+      }
+      const response = await api.recipes.deleteImage(props.recipe.slug);
+      if (response) {
+        props.recipe.image = null
+      }
+    }
+
     return {
       user,
       canEditOwner,
       uploadImage,
+      deleteImage,
       imageKey,
       allUsers,
       ownerHousehold,

frontend/lib/api/user/recipes/recipe.ts

@@ -136,6 +136,10 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return this.requests.put<UpdateImageResponse, FormData>(routes.recipesRecipeSlugImage(slug), formData);
   }
 
+  deleteImage(slug: string) {
+    return this.requests.delete<UpdateImageResponse>(routes.recipesRecipeSlugImage(slug));
+  }
+
   updateImagebyURL(slug: string, url: string) {
     return this.requests.post<UpdateImageResponse>(routes.recipesRecipeSlugImage(slug), { url });
   }

mealie/repos/repository_recipes.py

@@ -107,7 +107,12 @@ def update_image(self, slug: str, _: str | None = None) -> int:
         entry: RecipeModel = self._query_one(match_value=slug)
         entry.image = randint(0, 255)
         self.session.commit()
+        return entry.image
 
+    def delete_image(self, slug: str) -> None:
+        entry: RecipeModel = self._query_one(match_value=slug)
+        entry.image = None
+        self.session.commit()
         return entry.image
 
     def count_uncategorized(self, count=True, override_schema=None):

mealie/routes/recipe/recipe_crud_routes.py

@@ -526,10 +526,16 @@ def update_recipe_image(self, slug: str, image: bytes = File(...), extension: st
         recipe = self.mixins.get_one(slug)
         data_service = RecipeDataService(recipe.id)
         data_service.write_image(image, extension)
-
         new_version = self.recipes.update_image(slug, extension)
         return UpdateImageResponse(image=new_version)
 
+    @router.delete("/{slug}/image", tags=["Recipe: Images and Assets"])
+    def delete_recipe_image(self, slug: str):
+        recipe = self.mixins.get_one(slug)
+        data_service = RecipeDataService(recipe.id)
+        data_service.delete_image()
+        self.recipes.delete_image(slug)
+
     @router.post("/{slug}/assets", response_model=RecipeAsset, tags=["Recipe: Images and Assets"])
     def upload_recipe_asset(
         self,

mealie/services/recipe/recipe_data_service.py

@@ -108,6 +108,14 @@ def write_image(self, file_data: bytes | Path, extension: str, image_dir: Path |
 
         return image_path
 
+    def delete_image(self) -> None:
+        image_dir = self.dir_image
+
+        try:
+            shutil.rmtree(image_dir)
+        except Exception as e:
+            self.logger.exception(f"Failed to delete image data: {e}")
+
     async def scrape_image(self, image_url: str | dict[str, str] | list[str]) -> None:
         self.logger.info(f"Image URL: {image_url}")