fixed image import in URL import

This commit is contained in:
vabene1111
2024-12-22 13:18:46 +01:00
parent 55ee575c9c
commit 3f7c22cfe0
2 changed files with 19 additions and 8 deletions

View File

@@ -48,11 +48,20 @@ export function useFileApi() {
}) })
} }
function updateRecipeImage(recipeId: number, file: File|null){ /**
* update a recipes image either by a given file or given url
* @param recipeId ID of recipe to update
* @param file file object to upload or null to delete image (if no imageUrl is given)
* @param imageUrl url of an image to download by server
*/
function updateRecipeImage(recipeId: number, file: File|null, imageUrl?: string){
let formData = new FormData() let formData = new FormData()
if (file != null) { if (file != null) {
formData.append('image', file) formData.append('image', file)
} }
if (imageUrl) {
formData.append('image_url', imageUrl)
}
return fetch(getDjangoUrl(`api/recipe/${recipeId}/image/`), { return fetch(getDjangoUrl(`api/recipe/${recipeId}/image/`), {
method: 'PUT', method: 'PUT',

View File

@@ -147,7 +147,7 @@
</v-stepper-window-item> </v-stepper-window-item>
<v-stepper-window-item value="5"> <v-stepper-window-item value="5">
<v-card :loading="loading"> <v-card :loading="loading || fileApiLoading">
<v-card-title>{{ importResponse.recipe.name }}</v-card-title> <v-card-title>{{ importResponse.recipe.name }}</v-card-title>
<v-row> <v-row>
<v-col cols="12" md="6"> <v-col cols="12" md="6">
@@ -159,7 +159,7 @@
<v-text-field :label="$t('ServingsText')" v-model="importResponse.recipe.servingsText"></v-text-field> <v-text-field :label="$t('ServingsText')" v-model="importResponse.recipe.servingsText"></v-text-field>
<v-textarea :label="$t('Description')" v-model="importResponse.recipe.description" clearable></v-textarea> <v-textarea :label="$t('Description')" v-model="importResponse.recipe.description" clearable></v-textarea>
<v-btn class="mt-5" size="large" @click="createRecipeFromImport()" color="success" :loading="loading">{{ $t('Import') }}</v-btn> <v-btn class="mt-5" size="large" @click="createRecipeFromImport()" color="success" :loading="loading || fileApiLoading">{{ $t('Import') }}</v-btn>
</v-col> </v-col>
</v-row> </v-row>
@@ -194,8 +194,10 @@ import {VueDraggable} from "vue-draggable-plus";
import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue"; import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
import KeywordsBar from "@/components/display/KeywordsBar.vue"; import KeywordsBar from "@/components/display/KeywordsBar.vue";
import {VNumberInput} from 'vuetify/labs/VNumberInput' import {VNumberInput} from 'vuetify/labs/VNumberInput'
import {useFileApi} from "@/composables/useFileApi";
const router = useRouter() const router = useRouter()
const {updateRecipeImage, fileApiLoading} = useFileApi()
const stepper = ref("1") const stepper = ref("1")
const dialog = ref(false) const dialog = ref(false)
@@ -234,14 +236,14 @@ function createRecipeFromImport() {
loading.value = true loading.value = true
importResponse.value.recipe.keywords = importResponse.value.recipe.keywords.filter(k => k.importKeyword) importResponse.value.recipe.keywords = importResponse.value.recipe.keywords.filter(k => k.importKeyword)
api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(r => { api.apiRecipeCreate({recipe: importResponse.value.recipe}).then(recipe => {
api.apiRecipeImageUpdate({id: r.id, imageUrl: importResponse.value.recipe?.imageUrl}).then(rI => { updateRecipeImage(recipe.id!, null, importResponse.value.recipe?.imageUrl).then(r => {
router.push({name: 'view_recipe', params: {id: r.id}}) router.push({name: 'view_recipe', params: {id: recipe.id}})
}).finally(() => {
loading.value = false
}) })
}).catch(err => { }).catch(err => {
useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err) useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
}).finally(() => {
loading.value = false
}) })
} }
} }