Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-05-24 01:12:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Upload recipe step images from mobile devices (#2025)

Browse Source 
* Upload recipe step images from mobile devices

This adds a button in the recipe step dropdown, as not all mobile
devices can drag and drop a file into the web page

See #885

* Add progress bar
This commit is contained in:
Philipp 2023-01-29 02:27:40 +01:00 committed by GitHub
parent 0acc260447
commit 59f43a58d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
View File

@ -146,6 +146,10 @@
text: 'Merge Above',
event: 'merge-above',
},
{
text: 'Upload image',
event: 'upload-image'
},
{
icon: previewStates[index] ? $globals.icons.edit : $globals.icons.eye,
text: previewStates[index] ? 'Edit Markdown' : 'Preview Markdown',
@ -158,6 +162,7 @@
@toggle-section="toggleShowTitle(step.id)"
@link-ingredients="openDialog(index, step.text, step.ingredientReferences)"
@preview-step="togglePreviewState(index)"
@upload-image="openImageUpload(index)"
@delete="value.splice(index, 1)"
/>
</div>
@ -169,6 +174,8 @@
</v-fade-transition>
</v-card-title>
<v-progress-linear v-if="isEditForm && loadingStates[index]" :active="true" :indeterminate="true" />
<!-- Content -->
<DropZone @drop="(f) => handleImageDrop(index, f)">
<v-card-text
@ -548,6 +555,8 @@ export default defineComponent({
}
});
const loadingStates = ref<{ [key: number]: boolean }>({});
async function handleImageDrop(index: number, files: File[]) {
if (!files) {
return;
@ -559,6 +568,8 @@ export default defineComponent({
return;
}
loadingStates.value[index] = true;
const { data } = await api.recipes.createAsset(props.recipe.slug, {
name: file.name,
icon: "mdi-file-image",
@ -566,6 +577,8 @@ export default defineComponent({
extension: file.name.split(".").pop() || "",
});
loadingStates.value[index] = false;
if (!data) {
return; // TODO: Handle error
}
@ -576,11 +589,26 @@ export default defineComponent({
props.value[index].text += text;
}
function openImageUpload(index: number) {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = async () => {
if (input.files) {
await handleImageDrop(index, Array.from(input.files));
input.remove();
}
};
input.click();
}
return {
// Image Uploader
toggleDragMode,
handleImageDrop,
imageUploadMode,
openImageUpload,
loadingStates,
// Rest
drag,