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

56
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: { const emit = defineEmits<{
type: String, refresh: [];
required: true, upload: [fileObject: File];
}, }>();
},
setup(props, context) { const url = ref("");
const state = reactive({ const loading = ref(false);
url: "", const menu = ref(false);
loading: false,
menu: false,
});
function uploadImage(fileObject: File) { function uploadImage(fileObject: File) {
context.emit(UPLOAD_EVENT, fileObject); emit(UPLOAD_EVENT, fileObject);
state.menu = false; menu.value = false;
} }
const api = useUserApi(); const api = useUserApi();
async function getImageFromURL() { async function getImageFromURL() {
state.loading = true; loading.value = true;
if (await api.recipes.updateImagebyURL(props.slug, state.url)) { if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
context.emit(REFRESH_EVENT); emit(REFRESH_EVENT);
} }
state.loading = false; loading.value = false;
state.menu = false; menu.value = false;
} }
const i18n = useI18n(); const i18n = useI18n();
const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")]; const messages = computed(() =>
props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
return { );
...toRefs(state),
uploadImage,
getImageFromURL,
messages,
};
},
});
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>