Merge pull request #5113 from nextcloud/backport/4535/stable20.1

[stable20.1] Add upload editor in files sidebar mode

src/FilesSidebarTabApp.vue

@@ -41,6 +41,7 @@
 		<template v-else>
 			<CallButton class="call-button" />
 			<ChatView :token="token" />
+			<UploadEditor />
 		</template>
 	</div>
 </template>
@@ -60,6 +61,7 @@ import { signalingKill } from './utils/webrtc/index'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import Axios from '@nextcloud/axios'
+import UploadEditor from './components/UploadEditor'
 import CallButton from './components/TopBar/CallButton'
 import ChatView from './components/ChatView'
 import duplicateSessionHandler from './mixins/duplicateSessionHandler'
@@ -73,6 +75,7 @@ export default {
 	components: {
 		CallButton,
 		ChatView,
+		UploadEditor,
 	},
 
 	mixins: [

src/components/UploadEditor.vue

@@ -79,12 +79,6 @@ export default {
 		Plus,
 	},
 
-	data() {
-		return {
-			modalDismissed: false,
-		}
-	},
-
 	computed: {
 		token() {
 			return this.$store.getters.getToken()
@@ -101,33 +95,22 @@ export default {
 			return []
 		},
 
-		showUploadEditor() {
-			return this.$store.getters.showUploadEditor
-		},
-
 		showModal() {
-			return this.showUploadEditor && !this.modalDismissed
+			return !!this.currentUploadId
 		},
 
 		addMoreAriaLabel() {
 			return t('spreed', 'Add more files')
 		},
 	},
 
-	watch: {
-		currentUploadId() {
-			this.modalDismissed = false
-		},
-	},
-
 	methods: {
 		handleDismiss() {
-			this.modalDismissed = true
+			this.$store.dispatch('discardUpload', this.currentUploadId)
 		},
 
 		handleUpload() {
 			this.$store.dispatch('uploadFiles', this.currentUploadId)
-			this.modalDismissed = true
 		},
 		/**
 		 * Clicks the hidden file input when clicking the correspondent ActionButton,

src/store/fileUploadStore.js

@@ -34,7 +34,6 @@ const state = {
 	uploads: {
 	},
 	currentUploadId: undefined,
-	showUploadEditor: false,
 }
 
 const getters = {
@@ -87,10 +86,6 @@ const getters = {
 	currentUploadId: (state) => {
 		return state.currentUploadId
 	},
-
-	showUploadEditor: (state) => {
-		return state.showUploadEditor
-	},
 }
 
 const mutations = {
@@ -168,11 +163,6 @@ const mutations = {
 		state.currentUploadId = currentUploadId
 	},
 
-	// Shows hides the upload editor
-	showUploadEditor(state, show) {
-		state.showUploadEditor = show
-	},
-
 	removeFileFromSelection(state, fileId) {
 		const uploadId = state.currentUploadId
 		for (const key in state.uploads[uploadId].files) {
@@ -181,15 +171,17 @@ const mutations = {
 			}
 		}
 	},
+
+	discardUpload(state, uploadId) {
+		Vue.delete(state.uploads, uploadId)
+	},
 }
 
 const actions = {
 
 	initialiseUpload({ commit, dispatch }, { uploadId, token, files }) {
 		// Set last upload id
 		commit('setCurrentUploadId', uploadId)
-		// Show upload editor
-		commit('showUploadEditor', true)
 
 		files.forEach(file => {
 			// Get localurl for previews
@@ -204,12 +196,29 @@ const actions = {
 		})
 	},
 
+	/**
+	 * Discards an upload
+	 * @param {object} param0 Commit and state
+	 * @param {object} uploadId The unique uploadId
+	 */
+	discardUpload({ commit, state, getters }, uploadId) {
+		if (state.currentUploadId === uploadId) {
+			commit('setCurrentUploadId', undefined)
+		}
+
+		commit('discardUpload', { uploadId })
+	},
+
 	/**
 	 * Uploads the files to the root directory of the user
 	 * @param {object} param0 Commit, state and getters
 	 * @param {object} uploadId The unique uploadId
 	 */
 	async uploadFiles({ commit, dispatch, state, getters }, uploadId) {
+		if (state.currentUploadId === uploadId) {
+			commit('setCurrentUploadId', undefined)
+		}
+
 		EventBus.$emit('uploadStart')
 
 		// Tag the previously indexed files and add the temporary messages to the