Merge f54ff4f27d into 89ab7fac25

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -1,5 +1,6 @@
-<template>
-  <div class="text-center">
+
+ <template>
+  <div class = "text-center">
   <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
     <template #activator="{ on, attrs }">
       <v-btn color="accent" dark v-bind="attrs" v-on="on">
@@ -36,12 +37,13 @@
       </v-card-text>
     </v-card>
   </v-menu>
-  </div>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast"; // Import the alert functions
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
@@ -58,31 +60,81 @@ export default defineComponent({
       url: "",
       loading: false,
       menu: false,
-    })
+      messages: [],
+    });
 
+
+   // Function to upload the image file
    function uploadImage(fileObject: File) {
+    try{
+       // Check if the file has an acceptable extension
+       const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp",".heic",".avif"];
+       const fileExtension = fileObject.name.split(".").pop()?.toLowerCase();
+
+      // If the file extension is not in the allowed extensions list, show an error message
+      if (!fileExtension || !allowedExtensions.includes(`.${fileExtension}`)) {
+        alert.error(i18n.tc("general.invalid-image-extension"));
+        return;
+      }
+
       context.emit(UPLOAD_EVENT, fileObject);
       state.menu = false;
+
+      // Show success message for image upload
+      alert.success(i18n.tc("general.image-uploaded"));
+    }
+      catch(error){
+        alert.error(i18n.tc("general.image-upload-failed"));
+      }
     }
 
+
     const api = useUserApi();
+    const { i18n } = useContext();
+
+    // Function to check if the URL is reachable
+    async function isURLReachable(url: string) {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        return response.ok; // If status is 200, response.ok will be true
+      } catch (error) {
+        return false; // Network error or invalid URL
+      }
+    }
+
+    // Function to get image from URL
     async function getImageFromURL() {
       state.loading = true;
-      if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
-        context.emit(REFRESH_EVENT);
+
+      // Check if the URL is reachable it uses HTTP codes
+      const isReachable = await isURLReachable(state.url);
+
+      if (!isReachable) {
+        alert.error(i18n.tc("general.invalid-url"));
+        state.loading = false;
+        return;
       }
+
+      // If the URL is reachable, make the API request to update the image using the URL
+      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
+
+      // Check the response from the API and show appropriate alert
+      if (response) {
+        alert.success(i18n.tc("general.image-uploaded"));
+        context.emit(REFRESH_EVENT);
+      } else {
+        alert.error(i18n.tc("general.invalid-url"));
+      }
+
+      // Finalize loading state and menu visibility
       state.loading = false;
       state.menu = false;
     }
 
-    const { i18n } = useContext();
-    const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
-
     return {
       ...toRefs(state),
       uploadImage,
       getImageFromURL,
-      messages,
     };
   },
 });

frontend/lang/messages/en-US.json

@@ -114,6 +114,9 @@
     "home": "Home",
     "image": "Image",
     "image-upload-failed": "Image upload failed",
+    "image-uploaded": "Image Uploaded",
+    "invalid-url": "The provided URL is invalid. Please check and try again.",
+    "invalid-image-extension": "Invalid file extension",
     "import": "Import",
     "json": "JSON",
     "keyword": "Keyword",