Merge remote-tracking branch 'upstream/mealie-next' into upgrade-create-from-image-visuals

frontend/components/Layout/DefaultLayout.vue

@@ -231,7 +231,7 @@ export default defineNuxtComponent({
       {
         insertDivider: false,
         icon: $globals.icons.fileImage,
-        title: i18n.t("recipe.create-from-image"),
+        title: i18n.t("recipe.create-from-images"),
         subtitle: i18n.t("recipe.create-recipe-from-an-image"),
         to: `/g/${groupSlug.value}/r/create/image`,
         restricted: true,

frontend/components/global/AppButtonUpload.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-form ref="file">
+  <v-form ref="files">
     <input
       ref="uploader"
       class="d-none"
       type="file"
       :accept="accept"
+      :multiple="multiple"
       @change="onFileChanged"
     >
     <slot v-bind="{ isSelecting, onButtonClick }">
@@ -72,9 +73,13 @@ export default defineNuxtComponent({
       type: Boolean,
       default: false,
     },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props, context) {
-    const file = ref<File | null>(null);
+    const files = ref<File[]>([]);
     const uploader = ref<HTMLInputElement | null>(null);
     const isSelecting = ref(false);
 
@@ -86,35 +91,52 @@ export default defineNuxtComponent({
 
     const api = useUserApi();
     async function upload() {
-      if (file.value != null) {
-        isSelecting.value = true;
-
-        if (!props.post) {
-          context.emit(UPLOAD_EVENT, file.value);
-          isSelecting.value = false;
-          return;
-        }
-
-        const formData = new FormData();
-        formData.append(props.fileName, file.value);
-        try {
-          const response = await api.upload.file(props.url, formData);
-          if (response) {
-            context.emit(UPLOAD_EVENT, response);
-          }
-        }
-        catch (e) {
-          console.error(e);
-          context.emit(UPLOAD_EVENT, null);
-        }
-        isSelecting.value = false;
+      if (files.value.length === 0) {
+        return;
       }
+
+      isSelecting.value = true;
+
+      if (!props.post) {
+        // NOTE: To preserve behaviour for other parents of this component,
+        // we emit a single File if !props.multiple.
+        context.emit(UPLOAD_EVENT, props.multiple ? files.value : files.value[0]);
+        isSelecting.value = false;
+        return;
+      }
+
+      // WARN: My change is only for !props.post.
+      // I have not added support for multiple files in the API.
+      // Existing call-sites never passed the `multiple` prop,
+      // so this case will only be hit if the prop is set to true.
+      if (props.multiple && files.value.length > 1) {
+        console.warn("Multiple file uploads are not supported by the API.");
+        return;
+      }
+
+      const file = files.value[0];
+      const formData = new FormData();
+      formData.append(props.fileName, file);
+
+      try {
+        const response = await api.upload.file(props.url, formData);
+        if (response) {
+          context.emit(UPLOAD_EVENT, response);
+        }
+      }
+      catch (e) {
+        console.error(e);
+        context.emit(UPLOAD_EVENT, null);
+      }
+
+      isSelecting.value = false;
     }
 
     function onFileChanged(e: Event) {
       const target = e.target as HTMLInputElement;
-      if (target.files !== null && target.files.length > 0 && file.value !== null) {
-        file.value = target.files[0];
+
+      if (target.files !== null && target.files.length > 0) {
+        files.value = Array.from(target.files);
         upload();
       }
     }
@@ -132,7 +154,7 @@ export default defineNuxtComponent({
     }
 
     return {
-      file,
+      files,
       uploader,
       isSelecting,
       effIcon,

frontend/composables/api/api-client.ts

@@ -1,16 +1,17 @@
-import type { AxiosInstance, AxiosResponse } from "axios";
+import type { AxiosInstance, AxiosResponse, AxiosRequestConfig } from "axios";
 import type { ApiRequestInstance, RequestResponse } from "~/lib/api/types/non-generated";
 import { AdminAPI, PublicApi, UserApi } from "~/lib/api";
 import { PublicExploreApi } from "~/lib/api/client-public";
 
 const request = {
   async safe<T, U>(
-    funcCall: (url: string, data: U) => Promise<AxiosResponse<T>>,
+    funcCall: (url: string, data: U, config?: AxiosRequestConfig) => Promise<AxiosResponse<T>>,
     url: string,
     data: U,
+    config?: AxiosRequestConfig,
   ): Promise<RequestResponse<T>> {
     let error = null;
-    const response = await funcCall(url, data).catch(function (e) {
+    const response = await funcCall(url, data, config).catch(function (e) {
       console.log(e);
       // Insert Generic Error Handling Here
       error = e;
@@ -22,9 +23,9 @@ const request = {
 
 function getRequests(axiosInstance: AxiosInstance): ApiRequestInstance {
   return {
-    async get<T>(url: string, params = {}): Promise<RequestResponse<T>> {
+    async get<T>(url: string, params = {}, config?: AxiosRequestConfig): Promise<RequestResponse<T>> {
       let error = null;
-      const response = await axiosInstance.get<T>(url, params).catch((e) => {
+      const response = await axiosInstance.get<T>(url, { ...config, params }).catch((e) => {
         error = e;
       });
       if (response != null) {
@@ -33,20 +34,20 @@ function getRequests(axiosInstance: AxiosInstance): ApiRequestInstance {
       return { response: null, error, data: null };
     },
 
-    async post<T, U>(url: string, data: U) {
-      return await request.safe<T, U>(axiosInstance.post, url, data);
+    async post<T, U>(url: string, data: U, config?: AxiosRequestConfig) {
+      return await request.safe<T, U>(axiosInstance.post, url, data, config);
     },
 
-    async put<T, U = T>(url: string, data: U) {
-      return await request.safe<T, U>(axiosInstance.put, url, data);
+    async put<T, U = T>(url: string, data: U, config?: AxiosRequestConfig) {
+      return await request.safe<T, U>(axiosInstance.put, url, data, config);
     },
 
-    async patch<T, U = Partial<T>>(url: string, data: U) {
-      return await request.safe<T, U>(axiosInstance.patch, url, data);
+    async patch<T, U = Partial<T>>(url: string, data: U, config?: AxiosRequestConfig) {
+      return await request.safe<T, U>(axiosInstance.patch, url, data, config);
     },
 
-    async delete<T>(url: string) {
-      return await request.safe<T, undefined>(axiosInstance.delete, url, undefined);
+    async delete<T>(url: string, config?: AxiosRequestConfig) {
+      return await request.safe<T, undefined>(axiosInstance.delete, url, undefined, config);
     },
   };
 }

frontend/lang/messages/en-US.json

@@ -596,12 +596,13 @@
     "create-recipe-description": "Create a new recipe from scratch.",
     "create-recipes": "Create Recipes",
     "import-with-zip": "Import with .zip",
-    "create-recipe-from-an-image": "Create Recipe from an Image",
-    "create-recipe-from-an-image-description": "Create a recipe by uploading an image of it. Mealie will attempt to extract the text from the image using AI and create a recipe from it.",
+    "create-recipe-from-an-image": "Create Recipe from Images",
+    "create-recipe-from-an-image-description": "Create a recipe by uploading images of the recipe text. Mealie will attempt to extract the text from the images using AI and create a new recipe from it.",
     "crop-and-rotate-the-image": "Crop and rotate the image so that only the text is visible, and it's in the correct orientation.",
-    "create-from-image": "Create from Image",
+    "create-from-images": "Create from Images",
     "should-translate-description": "Translate the recipe into my language",
     "please-wait-image-procesing": "Please wait, the image is processing. This may take some time.",
+    "please-wait-images-processing": "Please wait, the images are processing. This may take some time.",
     "bulk-url-import": "Bulk URL Import",
     "debug-scraper": "Debug Scraper",
     "create-a-recipe-by-providing-the-name-all-recipes-must-have-unique-names": "Create a recipe by providing the name. All recipes must have unique names.",
@@ -660,7 +661,10 @@
       "no-food": "No Food"
     },
     "reset-servings-count": "Reset Servings Count",
-    "not-linked-ingredients": "Additional Ingredients"
+    "not-linked-ingredients": "Additional Ingredients",
+    "upload-another-image": "Upload another image",
+    "upload-images": "Upload images",
+    "upload-more-images": "Upload more images"
   },
   "recipe-finder": {
     "recipe-finder": "Recipe Finder",

frontend/lib/api/types/non-generated.ts

@@ -1,4 +1,4 @@
-import type { AxiosResponse } from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
 
 export type NoUndefinedField<T> = { [P in keyof T]-?: NoUndefinedField<NonNullable<T[P]>> };
 
@@ -9,11 +9,11 @@ export interface RequestResponse<T> {
 }
 
 export interface ApiRequestInstance {
-  get<T>(url: string, data?: unknown): Promise<RequestResponse<T>>;
-  post<T>(url: string, data: unknown): Promise<RequestResponse<T>>;
-  put<T, U = T>(url: string, data: U): Promise<RequestResponse<T>>;
-  patch<T, U = Partial<T>>(url: string, data: U): Promise<RequestResponse<T>>;
-  delete<T>(url: string): Promise<RequestResponse<T>>;
+  get<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<RequestResponse<T>>;
+  post<T>(url: string, data: unknown, config?: AxiosRequestConfig): Promise<RequestResponse<T>>;
+  put<T, U = T>(url: string, data: U, config?: AxiosRequestConfig): Promise<RequestResponse<T>>;
+  patch<T, U = Partial<T>>(url: string, data: U, config?: AxiosRequestConfig): Promise<RequestResponse<T>>;
+  delete<T>(url: string, config?: AxiosRequestConfig): Promise<RequestResponse<T>>;
 }
 
 export interface PaginationData<T> {

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

@@ -157,17 +157,19 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return await this.requests.post<string>(routes.recipesCreateUrlBulk, payload);
   }
 
-  async createOneFromImage(fileObject: Blob | File, fileName: string, translateLanguage: string | null = null) {
+  async createOneFromImages(fileObjects: (Blob | File)[], translateLanguage: string | null = null) {
     const formData = new FormData();
-    formData.append("images", fileObject);
-    formData.append("extension", fileName.split(".").pop() ?? "");
+
+    fileObjects.forEach((file) => {
+      formData.append("images", file);
+    });
 
     let apiRoute = routes.recipesCreateFromImage;
     if (translateLanguage) {
       apiRoute = `${apiRoute}?translateLanguage=${translateLanguage}`;
     }
 
-    return await this.requests.post<string>(apiRoute, formData);
+    return await this.requests.post<string>(apiRoute, formData, { timeout: 120000 });
   }
 
   async parseIngredients(parser: Parser, ingredients: Array<string>) {

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

@@ -80,7 +80,7 @@ export default defineNuxtComponent({
       },
       {
         icon: $globals.icons.fileImage,
-        text: i18n.t("recipe.create-from-image"),
+        text: i18n.t("recipe.create-from-images"),
         value: "image",
         hide: !enableOpenAIImages.value,
       },

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

@@ -13,17 +13,16 @@
               url="none"
               file-name="images"
               accept="image/*"
-              :text="$t('recipe.upload-image')"
+              :text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
               :text-btn="false"
               :post="false"
-              @uploaded="uploadImage"
+              :multiple="true"
+              @uploaded="uploadImages"
             />
-
             <div v-if="uploadedImages.length > 0" class="mt-3">
               <p class="my-2">
                 {{ $t("recipe.crop-and-rotate-the-image") }}
               </p>
-
               <v-row>
                 <v-col
                   v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
@@ -46,7 +45,7 @@
             </div>
           </v-container>
         </v-card-text>
-        <v-card-actions v-if="uploadedImages.length > 0">
+        <v-card-actions v-if="uploadedImages.length">
           <div class="w-100 d-flex flex-column align-center">
             <p style="width: 250px">
               <BaseButton rounded block type="submit" :loading="loading" />
@@ -60,7 +59,11 @@
               />
             </p>
             <p v-if="loading" class="mb-0">
-              {{ $t("recipe.please-wait-image-procesing") }}
+              {{
+                uploadedImages.length > 1
+                  ? $t("recipe.please-wait-images-processing")
+                  : $t("recipe.please-wait-image-procesing")
+              }}
             </p>
           </div>
         </v-card-actions>
@@ -92,10 +95,13 @@ export default defineNuxtComponent({
     const uploadedImagesPreviewUrls = ref<string[]>([]);
     const shouldTranslate = ref(true);
 
-    function uploadImage(fileObject: File) {
-      uploadedImages.value = [...uploadedImages.value, fileObject];
-      uploadedImageNames.value = [...uploadedImageNames.value, fileObject.name];
-      uploadedImagesPreviewUrls.value = [...uploadedImagesPreviewUrls.value, URL.createObjectURL(fileObject)];
+    function uploadImages(files: File[]) {
+      uploadedImages.value = [...uploadedImages.value, ...files];
+      uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
+      uploadedImagesPreviewUrls.value = [
+        ...uploadedImagesPreviewUrls.value,
+        ...files.map(file => URL.createObjectURL(file)),
+      ];
     }
 
     function clearImage(index: number) {
@@ -133,7 +139,7 @@ export default defineNuxtComponent({
       uploadedImages,
       uploadedImagesPreviewUrls,
       shouldTranslate,
-      uploadImage,
+      uploadImages,
       clearImage,
       createRecipe,
       updateUploadedImage,