github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 22:43:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

feat: Accept multiple images on create/image.vue

Browse source
This commit is contained in:
SkepticMystic 2025-06-27 20:53:26 +02:00
commit 64d257a9e0
2 changed files with 53 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/lib/api/user/recipes/recipe.ts
View file

@ -170,6 +170,21 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
return await this.requests.post<string>(apiRoute, formData); return await this.requests.post<string>(apiRoute, formData);
} }
async createOneFromImages(fileObjects: (Blob | File)[], translateLanguage: string | null = null) {
const formData = new FormData();
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);
}
async parseIngredients(parser: Parser, ingredients: Array<string>) { async parseIngredients(parser: Parser, ingredients: Array<string>) {
parser = parser || "nlp"; parser = parser || "nlp";
return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients }); return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients });

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

@ -17,20 +17,20 @@
align-self="center" align-self="center"
> >
<AppButtonUpload <AppButtonUpload
v-if="!uploadedImage"
class="ml-auto" class="ml-auto"
url="none" url="none"
file-name="image" file-name="images"
accept="image/*" accept="image/*"
multiple
:text="$t('recipe.upload-image')" :text="$t('recipe.upload-image')"
:text-btn="false" :text-btn="false"
:post="false" :post="false"
@uploaded="uploadImage" @uploaded="uploadImages"
/> />
<v-btn <v-btn
v-if="!!uploadedImage" v-if="uploadedImages.length > 0"
color="error" color="error"
@click="clearImage" @click="clearImages"
> >
<v-icon start> <v-icon start>
{{ $globals.icons.close }} {{ $globals.icons.close }}
@ -42,7 +42,7 @@
</v-row> </v-row>
<div <div
v-if="uploadedImage && uploadedImagePreviewUrl" v-if="uploadedImages.length > 0"
class="mt-3" class="mt-3"
> >
<v-row> <v-row>
@ -59,12 +59,16 @@
</v-row> </v-row>
<v-row style="max-width: 600px;"> <v-row style="max-width: 600px;">
<v-spacer /> <v-spacer />
<v-col cols="12"> <v-col
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
:key="index"
cols="12"
>
<ImageCropper <ImageCropper
:img="uploadedImagePreviewUrl" :img="imageUrl"
cropper-height="50vh" cropper-height="50vh"
cropper-width="100%" cropper-width="100%"
@save="updateUploadedImage" @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
/> />
</v-col> </v-col>
<v-spacer /> <v-spacer />
@ -72,7 +76,7 @@
</div> </div>
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-card-actions v-if="uploadedImage"> <v-card-actions v-if="uploadedImages.length > 0">
<div> <div>
<p style="width: 250px"> <p style="width: 250px">
<BaseButton <BaseButton
@ -121,55 +125,53 @@ export default defineNuxtComponent({
const groupSlug = computed(() => route.params.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug || "");
const domUrlForm = ref<VForm | null>(null); const domUrlForm = ref<VForm | null>(null);
const uploadedImage = ref<Blob | File>(); const uploadedImages = ref<(Blob | File)[]>([]);
const uploadedImageName = ref<string>(""); const uploadedImageNames = ref<string[]>([]);
const uploadedImagePreviewUrl = ref<string>(); const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true); const shouldTranslate = ref(true);
function uploadImage(fileObject: File) { function uploadImages(fileObjects: File[]) {
uploadedImage.value = fileObject; uploadedImages.value = fileObjects;
uploadedImageName.value = fileObject.name; uploadedImageNames.value = fileObjects.map((file) => file.name);
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject); uploadedImagesPreviewUrls.value = fileObjects.map((file) => URL.createObjectURL(file));
} }
function updateUploadedImage(fileObject: Blob) { function clearImages() {
uploadedImage.value = fileObject; uploadedImages.value = [];
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject); uploadedImageNames.value = [];
} uploadedImagesPreviewUrls.value = [];
function clearImage() {
uploadedImage.value = undefined;
uploadedImageName.value = "";
uploadedImagePreviewUrl.value = undefined;
} }
async function createRecipe() { async function createRecipe() {
if (!uploadedImage.value) { if (uploadedImages.value.length === 0) {
return; return;
} }
state.loading = true; state.loading = true;
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined; const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage?.value); const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) { if (error || !data) {
alert.error(i18n.t("events.something-went-wrong")); alert.error(i18n.t("events.something-went-wrong"));
state.loading = false; state.loading = false;
} } else {
else {
router.push(`/g/${groupSlug.value}/r/${data}`); router.push(`/g/${groupSlug.value}/r/${data}`);
}; }
}
function updateUploadedImage(index: number, croppedImage: Blob) {
uploadedImages.value[index] = croppedImage;
} }
return { return {
...toRefs(state), ...toRefs(state),
domUrlForm, domUrlForm,
uploadedImage, uploadedImages,
uploadedImagePreviewUrl, uploadedImagesPreviewUrls,
shouldTranslate, shouldTranslate,
uploadImage, uploadImages,
updateUploadedImage, clearImages,
clearImage,
createRecipe, createRecipe,
updateUploadedImage,
}; };
}, },
}); });