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

Image Upload Button

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 11:37:32 +00:00
commit 8162188149
1 changed files with 29 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue
View file

@ -7,11 +7,11 @@
nudge-top="6" nudge-top="6"
:close-on-content-click="false" :close-on-content-click="false"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-btn <v-btn
color="accent" color="accent"
dark dark
v-bind="props" v-bind="activatorProps"
> >
<v-icon start> <v-icon start>
{{ $globals.icons.fileImage }} {{ $globals.icons.fileImage }}
@ -61,52 +61,42 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
const REFRESH_EVENT = "refresh"; const REFRESH_EVENT = "refresh";
const UPLOAD_EVENT = "upload"; const UPLOAD_EVENT = "upload";
export default defineNuxtComponent({ const props = defineProps<{ slug: string }>();
props: {
slug: {
type: String,
required: true,
},
},
setup(props, context) {
const state = reactive({
url: "",
loading: false,
menu: false,
});
function uploadImage(fileObject: File) { const emit = defineEmits<{
context.emit(UPLOAD_EVENT, fileObject); refresh: [];
state.menu = false; upload: [fileObject: File];
} }>();
const api = useUserApi(); const url = ref("");
async function getImageFromURL() { const loading = ref(false);
state.loading = true; const menu = ref(false);
if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
context.emit(REFRESH_EVENT);
}
state.loading = false;
state.menu = false;
}
const i18n = useI18n(); function uploadImage(fileObject: File) {
const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")]; emit(UPLOAD_EVENT, fileObject);
menu.value = false;
}
return { const api = useUserApi();
...toRefs(state), async function getImageFromURL() {
uploadImage, loading.value = true;
getImageFromURL, if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
messages, emit(REFRESH_EVENT);
}; }
}, loading.value = false;
}); menu.value = false;
}
const i18n = useI18n();
const messages = computed(() =>
props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
);
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>