🐛 (#2345): fix upload state reactivity

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

3 files changed, 46 insertions, 23 deletions

diff --git a/src/components/EditorDraggable.provider.js b/src/components/EditorDraggable.provider.js
index 2bb879a3d..8fd955e56 100644
--- a/src/components/EditorDraggable.provider.js
+++ b/src/components/EditorDraggable.provider.js
@@ -1,10 +1,16 @@
-export const IS_UPLOADING_IMAGES = Symbol('editor:is-uploading-images')
+export const STATE_UPLOADING = Symbol('state:uploading-state')
 export const ACTION_IMAGE_PROMPT = Symbol('editor:action:image-prompt')
 export const ACTION_CHOOSE_LOCAL_IMAGE = Symbol('editor:action:upload-image')
 
-export const useIsUploadingImagesMixin = {
+export const useUploadingStateMixin = {
 	inject: {
-		$isUploadingImages: { from: IS_UPLOADING_IMAGES, default: false },
+		$uploadingState: {
+			from: STATE_UPLOADING,
+			default: {
+				x: true,
+				isUploadingImages: false,
+			},
+		},
 	},
 }
 
diff --git a/src/components/EditorDraggable.vue b/src/components/EditorDraggable.vue
index d4580d45a..aee9d62ff 100644
--- a/src/components/EditorDraggable.vue
+++ b/src/components/EditorDraggable.vue
@@ -53,7 +53,7 @@ import {
 import {
 	ACTION_IMAGE_PROMPT,
 	ACTION_CHOOSE_LOCAL_IMAGE,
-	IS_UPLOADING_IMAGES,
+	STATE_UPLOADING,
 } from './EditorDraggable.provider.js'
 
 const IMAGE_MIMES = [
@@ -81,17 +81,22 @@ export default {
 			[ACTION_CHOOSE_LOCAL_IMAGE]: {
 				get: () => this.chooseLocalImage,
 			},
-			[IS_UPLOADING_IMAGES]: {
-				get: () => this.isUploadingImages,
+			[STATE_UPLOADING]: {
+				get: () => this.state,
 			},
 		})
 
 		return val
 	},
-	data: () => ({
-		draggedOver: false,
-		isUploadingImages: false,
-	}),
+	data() {
+		return {
+			draggedOver: false,
+			// make it reactive to be used inject/provide
+			state: {
+				isUploadingImages: false,
+			},
+		}
+	},
 	computed: {
 		imagePath() {
 			return this.$file.relativePath.split('/').slice(0, -1).join('/')
@@ -143,12 +148,19 @@ export default {
 				return
 			}
 
-			return this.$syncService.uploadImage(file).then((response) => {
-				this.insertAttachmentImage(response.data?.name, response.data?.id, position, response.data?.dirname)
-			}).catch((error) => {
-				console.error(error)
-				showError(error?.response?.data?.error)
-			})
+			this.state.isUploadingImages = true
+
+			return this.$syncService.uploadImage(file)
+				.then((response) => {
+					this.insertAttachmentImage(response.data?.name, response.data?.id, position, response.data?.dirname)
+				})
+				.catch((error) => {
+					console.error(error)
+					showError(error?.response?.data?.error)
+				})
+				.then(() => {
+					this.state.isUploadingImages = false
+				})
 		},
 		showImagePrompt() {
 			const currentUser = getCurrentUser()
@@ -161,7 +173,7 @@ export default {
 			}, false, [], true, undefined, this.imagePath)
 		},
 		insertImagePath(imagePath) {
-			this.isUploadingImages = true
+			this.state.isUploadingImages = true
 
 			return this.$syncService.insertImageFile(imagePath).then((response) => {
 				this.insertAttachmentImage(response.data?.name, response.data?.id, null, response.data?.dirname)
@@ -169,7 +181,7 @@ export default {
 				console.error(error)
 				showError(error?.response?.data?.error || error.message)
 			}).then(() => {
-				this.isUploadingImages = false
+				this.state.isUploadingImages = false
 			})
 		},
 		insertAttachmentImage(name, fileId, position = null, dirname = '') {
diff --git a/src/components/Menu/ActionImageUpload.vue b/src/components/Menu/ActionImageUpload.vue
index 3033bc9b2..ae359f2db 100644
--- a/src/components/Menu/ActionImageUpload.vue
+++ b/src/components/Menu/ActionImageUpload.vue
@@ -26,13 +26,13 @@
 		:aria-label="actionEntry.label"
 		aria-haspopup>
 		<template #icon>
-			<component :is="$isUploadingImages ? 'Loading' : actionEntry.icon"
+			<component :is="isUploadingImages ? 'Loading' : actionEntry.icon"
 				:title="actionEntry.label"
 				:aria-label="actionEntry.label"
 				aria-haspopup />
 		</template>
 		<ActionButton close-after-click
-			:disabled="$isUploadingImages"
+			:disabled="isUploadingImages"
 			:data-text-action-entry="`${actionEntry._key}-upload`"
 			@click="$callChooseLocalImage">
 			<template #icon>
@@ -42,7 +42,7 @@
 		</ActionButton>
 		<ActionButton v-if="!$isPublic"
 			close-after-click
-			:disabled="$isUploadingImages"
+			:disabled="isUploadingImages"
 			:data-text-action-entry="`${actionEntry._key}-insert`"
 			@click="$callImagePrompt">
 			<template #icon>
@@ -62,7 +62,7 @@ import { useIsPublicMixin } from '../EditorWrapper.provider.js'
 import { BaseActionEntry } from './ActionEntry.mixin.js'
 import {
 	useActionImagePromptMixin,
-	useIsUploadingImagesMixin,
+	useUploadingStateMixin,
 	useActionChooseLocalImageMixin,
 } from '../EditorDraggable.provider.js'
 
@@ -79,8 +79,13 @@ export default {
 	mixins: [
 		useIsPublicMixin,
 		useActionImagePromptMixin,
-		useIsUploadingImagesMixin,
+		useUploadingStateMixin,
 		useActionChooseLocalImageMixin,
 	],
+	computed: {
+		isUploadingImages() {
+			return this.$uploadingState.isUploadingImages
+		},
+	},
 }
 </script>