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 15

fix: Update image.vue script actions to update/remove 1 image at a time

Browse source
This commit is contained in:
SkepticMystic 2025-06-28 09:17:46 +00:00
commit 3e4f19da3a
1 changed files with 34 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,6 @@
<template>
<div>
<v-form
ref="domUrlForm"
@submit.prevent="createRecipe"
>
<v-form ref="domUrlForm" @submit.prevent="createRecipe">
<div>
<v-card-title class="headline">
{{ $t('recipe.create-recipe-from-an-image') }}
@ -12,44 +9,16 @@
<p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
<v-container class="pa-0">
<v-row>
<v-col
cols="auto"
align-self="center"
>
<AppButtonUpload
class="ml-auto"
url="none"
file-name="images"
accept="image/*"
multiple
:text="$t('recipe.upload-image')"
:text-btn="false"
:post="false"
@uploaded="uploadImages"
/>
<v-btn
v-if="uploadedImages.length > 0"
color="error"
@click="clearImages"
>
<v-icon start>
{{ $globals.icons.close }}
</v-icon>
{{ $t('recipe.remove-image') }}
</v-btn>
<v-col cols="auto" align-self="center">
<AppButtonUpload class="ml-auto" url="none" file-name="images" accept="image/*"
:text="$t('recipe.upload-image')" :text-btn="false" :post="false" @uploaded="uploadImage" />
</v-col>
<v-spacer />
</v-row>
<div
v-if="uploadedImages.length > 0"
class="mt-3"
>
<div v-if="uploadedImages.length > 0" class="mt-3">
<v-row>
<v-col
cols="12"
class="pb-0"
>
<v-col cols="12" class="pb-0">
<v-card-text class="pa-0">
<p class="mb-0">
{{ $t('recipe.crop-and-rotate-the-image') }}
@ -59,17 +28,16 @@
</v-row>
<v-row style="max-width: 600px;">
<v-spacer />
<v-col
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
:key="index"
cols="12"
>
<ImageCropper
:img="imageUrl"
cropper-height="50vh"
cropper-width="100%"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
/>
<v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
<ImageCropper :img="imageUrl" cropper-height="50vh" cropper-width="100%"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)" />
<v-btn color="error" @click="() => clearImage(index)">
<v-icon start>
{{ $globals.icons.close }}
</v-icon>
{{ $t('recipe.remove-image') }}
</v-btn>
</v-col>
<v-spacer />
</v-row>
@ -79,25 +47,13 @@
<v-card-actions v-if="uploadedImages.length > 0">
<div>
<p style="width: 250px">
<BaseButton
rounded
block
type="submit"
:loading="loading"
/>
<BaseButton rounded block type="submit" :loading="loading" />
</p>
<p>
<v-checkbox
v-model="shouldTranslate"
hide-details
:label="$t('recipe.should-translate-description')"
:disabled="loading"
/>
<v-checkbox v-model="shouldTranslate" hide-details :label="$t('recipe.should-translate-description')"
:disabled="loading" />
</p>
<p
v-if="loading"
class="mb-0"
>
<p v-if="loading" class="mb-0">
{{ $t('recipe.please-wait-image-procesing') }}
</p>
</div>
@ -130,16 +86,18 @@ export default defineNuxtComponent({
const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true);
function uploadImages(fileObjects: File[]) {
uploadedImages.value = fileObjects;
uploadedImageNames.value = fileObjects.map((file) => file.name);
uploadedImagesPreviewUrls.value = fileObjects.map((file) => URL.createObjectURL(file));
function uploadImage(fileObject: File) {
uploadedImages.value = [...uploadedImages.value, fileObject];
uploadedImageNames.value = [...uploadedImageNames.value, fileObject.name];
uploadedImagesPreviewUrls.value = [...uploadedImagesPreviewUrls.value, URL.createObjectURL(fileObject)];
}
function clearImages() {
uploadedImages.value = [];
uploadedImageNames.value = [];
uploadedImagesPreviewUrls.value = [];
function clearImage(index: number) {
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
}
async function createRecipe() {
@ -153,7 +111,8 @@ export default defineNuxtComponent({
if (error || !data) {
alert.error(i18n.t("events.something-went-wrong"));
state.loading = false;
} else {
}
else {
router.push(`/g/${groupSlug.value}/r/${data}`);
}
}
@ -168,8 +127,8 @@ export default defineNuxtComponent({
uploadedImages,
uploadedImagesPreviewUrls,
shouldTranslate,
uploadImages,
clearImages,
uploadImage,
clearImage,
createRecipe,
updateUploadedImage,
};