From 722fe35aab6d497303499e975350f731e6266dee Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Tue, 28 Jul 2020 18:08:40 +0200
Subject: [PATCH 01/12] Store current upload id

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/store/fileUploadStore.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index b7c7d498451..2c765c83de2 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -32,6 +32,7 @@ const state = {
 	attachmentFolder: loadState('talk', 'attachment_folder'),
 	uploads: {
 	},
+	currentUploadId: undefined,
 }
 
 const getters = {
@@ -64,6 +65,10 @@ const getters = {
 			return 0
 		}
 	},
+
+	currentUploadId: (state) => {
+		return state.currentUploadId
+	},
 }
 
 const mutations = {
@@ -131,6 +136,11 @@ const mutations = {
 		console.debug('uploadId: ' + uploadId + ' index: ' + index)
 		Vue.set(state.uploads[uploadId].files[index], 'temporaryMessage', temporaryMessage)
 	},
+
+	// Sets the id of the current upload operation
+	setCurrentUploadId(state, currentUploadId) {
+		state.currentUploadId = currentUploadId
+	},
 }
 
 const actions = {
@@ -147,6 +157,8 @@ const actions = {
 
 		// Add temporary messages
 		for (const index in state.uploads[uploadId].files) {
+			// Set last upload id
+			commit('setCurrentUploadId', { uploadId })
 			// Mark file as uploading to prevent a second function call to start a
 			// second upload for the same file
 			commit('markFileAsUploading', { uploadId, index })

From 6ef9611ebc68901b6416b19f742aaaf098ef988e Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Tue, 28 Jul 2020 18:08:40 +0200
Subject: [PATCH 02/12] Store visibility of the upload editor

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/store/fileUploadStore.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index 2c765c83de2..cd073665d64 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -33,6 +33,7 @@ const state = {
 	uploads: {
 	},
 	currentUploadId: undefined,
+	showUploadEditor: false,
 }
 
 const getters = {
@@ -69,6 +70,10 @@ const getters = {
 	currentUploadId: (state) => {
 		return state.currentUploadId
 	},
+
+	showUploadEditor: (state) => {
+		return state.showUploadEditor
+	},
 }
 
 const mutations = {
@@ -141,6 +146,11 @@ const mutations = {
 	setCurrentUploadId(state, currentUploadId) {
 		state.currentUploadId = currentUploadId
 	},
+
+	// Shows hides the upload editor
+	showUploadEditor(state, show) {
+		state.showUploadEditor = show
+	},
 }
 
 const actions = {

From 661348eddb5828c10b450a5a7f726601e59782ab Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Tue, 28 Jul 2020 18:09:05 +0200
Subject: [PATCH 03/12] Add uploadeditor component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/App.vue                     |   3 +
 src/components/UploadEditor.vue | 122 ++++++++++++++++++++++++++++++++
 2 files changed, 125 insertions(+)
 create mode 100644 src/components/UploadEditor.vue

diff --git a/src/App.vue b/src/App.vue
index 655be16cd52..d2efc9e5fb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,7 @@
 		<RightSidebar
 			:show-chat-in-sidebar="isInCall" />
 		<PreventUnload :when="warnLeaving" />
+		<UploadEditor />
 	</Content>
 </template>
 
@@ -61,6 +62,7 @@ import duplicateSessionHandler from './mixins/duplicateSessionHandler'
 import isInCall from './mixins/isInCall'
 import talkHashCheck from './mixins/talkHashCheck'
 import { generateUrl } from '@nextcloud/router'
+import UploadEditor from './components/UploadEditor'
 
 export default {
 	name: 'App',
@@ -70,6 +72,7 @@ export default {
 		LeftSidebar,
 		PreventUnload,
 		RightSidebar,
+		UploadEditor,
 	},
 
 	mixins: [
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
new file mode 100644
index 00000000000..02ecd1d60c8
--- /dev/null
+++ b/src/components/UploadEditor.vue
@@ -0,0 +1,122 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<Modal v-if="showModal"
+		@close="handleDismiss">
+		<div class="upload-editor">
+			<div class="upload-editor__previews">
+				<template v-for="file in files">
+					<FilePreview
+						:key="file.temporaryMessage.id"
+						v-bind="file.temporaryMessage.messageParameters.file"
+						:is-upload-editor="true" />
+				</template>
+			</div>
+			<div class="upload-editor__actions">
+				<button @click="handleDismiss">
+					Dismiss
+				</button>
+				<button class="primary" @click="handleUpload">
+					Upload
+				</button>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
+
+export default {
+	name: 'UploadEditor',
+
+	components: {
+		Modal,
+		FilePreview,
+	},
+
+	data() {
+		return {
+			modalDismissed: false,
+		}
+	},
+
+	computed: {
+		currentUploadId() {
+			return this.$store.getters.currentUploadId
+		},
+
+		files() {
+			if (this.currentUploadId) {
+				return this.$store.getters.getShareableFiles(this.currentUploadId)
+			}
+			return []
+		},
+
+		showUploadEditor() {
+			return this.$store.getters.showUploadEditor
+		},
+
+		showModal() {
+			return this.showUploadEditor && !this.modalDismissed
+		},
+	},
+
+	watch: {
+		currentUploadId() {
+			this.modalDismissed = false
+		},
+	},
+
+	methods: {
+		handleDismiss() {
+			this.modalDismissed = true
+		},
+
+		handleUpload() {
+			this.$store.dispatch('uploadFiles', this.currentUploadId)
+			this.modalDismissed = true
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+.upload-editor {
+	height: 100%;
+	&__previews {
+		display: flex;
+		flex-wrap: wrap;
+		overflow: auto;
+	}
+	&__actions {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 16px;
+		margin-top: 16px;
+	}
+}
+
+</style>

From 07fee78682b7daf7958b201409ee0a353402295d Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Mon, 3 Aug 2020 12:08:38 +0200
Subject: [PATCH 04/12] Create initialiseduploads store entry and split
 uploadfiles logic

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/UploadEditor.vue |  2 +-
 src/store/fileUploadStore.js    | 62 +++++++++++++++++++++++++--------
 src/utils/fileUpload.js         |  2 +-
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 02ecd1d60c8..6200771a083 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -69,7 +69,7 @@ export default {
 
 		files() {
 			if (this.currentUploadId) {
-				return this.$store.getters.getShareableFiles(this.currentUploadId)
+				return this.$store.getters.getInitialisedUploads(this.currentUploadId)
 			}
 			return []
 		},
diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index cd073665d64..0bd95cc6a26 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -37,6 +37,22 @@ const state = {
 }
 
 const getters = {
+
+	getInitialisedUploads: (state) => (uploadId) => {
+		if (state.uploads[uploadId]) {
+			const initialisedUploads = {}
+			for (const index in state.uploads[uploadId].files) {
+				const currentFile = state.uploads[uploadId].files[index]
+				if (currentFile.status === 'initialised') {
+					initialisedUploads[index] = (currentFile)
+				}
+			}
+			return initialisedUploads
+		} else {
+			return {}
+		}
+	},
+
 	// Returns all the files that have been successfully uploaded provided an
 	// upload id
 	getShareableFiles: (state) => (uploadId) => {
@@ -106,6 +122,11 @@ const mutations = {
 		Vue.set(state.uploads[uploadId].files[index], 'sharePath', sharePath)
 	},
 
+	// Marks a given file as initialised
+	markFileAsInitialised(state, { uploadId, index }) {
+		state.uploads[uploadId].files[index].status = 'initialised'
+	},
+
 	// Marks a given file as uploading
 	markFileAsUploading(state, { uploadId, index }) {
 		state.uploads[uploadId].files[index].status = 'uploading'
@@ -154,36 +175,47 @@ const mutations = {
 }
 
 const actions = {
-	/**
-	 * Uploads the files to the root directory of the user
-	 * @param {object} param0 Commit, state and getters
-	 * @param {object} param1 The unique uploadId, the conversation token and the
-	 * files array
-	 */
-	async uploadFiles({ commit, dispatch, state, getters }, { uploadId, token, files }) {
+
+	initialiseUpload({ commit, dispatch }, { uploadId, token, files }) {
+		// Set last upload id
+		commit('setCurrentUploadId', uploadId)
+		// Show upload editor
+		commit('showUploadEditor', true)
 		files.forEach(file => {
 			commit('addFileToBeUploaded', { uploadId, token, file })
 		})
 
 		// Add temporary messages
 		for (const index in state.uploads[uploadId].files) {
-			// Set last upload id
-			commit('setCurrentUploadId', { uploadId })
-			// Mark file as uploading to prevent a second function call to start a
-			// second upload for the same file
-			commit('markFileAsUploading', { uploadId, index })
+			// Mark file as initialised
+			commit('markFileAsInitialised', { uploadId, index })
 			// currentFile to be uploaded
 			const currentFile = state.uploads[uploadId].files[index].file
 			// Create temporary message for the file and add it to the message list
 			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile)
-			dispatch('addTemporaryMessage', temporaryMessage)
-			// Scroll the message list
-			EventBus.$emit('scrollChatToBottom')
+			// Add the temporary messages to the store
 			commit('setTemporaryMessageForFile', { uploadId, index, temporaryMessage })
 		}
+	},
+
+	/**
+	 * 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) {
 
 		// Iterate through the previously indexed files for a given conversation (token)
 		for (const index in state.uploads[uploadId].files) {
+			// Mark file as uploading to prevent a second function call to start a
+			// second upload for the same file
+			commit('markFileAsInitialised', { uploadId, index })
+			// Store the previously created temporary message
+			const temporaryMessage = state.uploads[uploadId].files[index].temporaryMessage
+			// Add temporary messages (files) to the messages list
+			dispatch('addTemporaryMessage', temporaryMessage)
+			// Scroll the message list
+			EventBus.$emit('scrollChatToBottom')
 			// currentFile to be uploaded
 			const currentFile = state.uploads[uploadId].files[index].file
 			// userRoot path
diff --git a/src/utils/fileUpload.js b/src/utils/fileUpload.js
index 5488e44f195..4fc5e5c33a9 100644
--- a/src/utils/fileUpload.js
+++ b/src/utils/fileUpload.js
@@ -69,7 +69,7 @@ const findUniquePath = async function(client, userRoot, path) {
  */
 const processFiles = async function(files, token, uploadId) {
 	// Process these files in the store
-	await store.dispatch('uploadFiles', { uploadId, token, files })
+	await store.dispatch('initialiseUpload', { uploadId, token, files })
 	// Get the files that have successfully been uploaded from the store
 	const shareableFiles = store.getters.getShareableFiles(uploadId)
 

From 551305d3c92be066b32d1f0d7d3371bcea4197f3 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Mon, 3 Aug 2020 15:45:37 +0200
Subject: [PATCH 05/12] Add ability to add more files to the current upload

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/UploadEditor.vue | 45 +++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 6200771a083..6a69ae51f70 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -22,6 +22,13 @@
 <template>
 	<Modal v-if="showModal"
 		@close="handleDismiss">
+		<!--native file picker, hidden -->
+		<input id="file-upload"
+			ref="fileUploadInput"
+			multiple
+			type="file"
+			class="hidden-visually"
+			@change="handleFileInput">
 		<div class="upload-editor">
 			<div class="upload-editor__previews">
 				<template v-for="file in files">
@@ -30,6 +37,9 @@
 						v-bind="file.temporaryMessage.messageParameters.file"
 						:is-upload-editor="true" />
 				</template>
+				<button class="upload-editor__add-more primary" @click="clickImportInput">
+					<Plus :size="48" class="upload-editor__plus-icon" />
+				</button>
 			</div>
 			<div class="upload-editor__actions">
 				<button @click="handleDismiss">
@@ -47,6 +57,8 @@
 
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
+import Plus from 'vue-material-design-icons/Plus'
+import { processFiles } from '../utils/fileUpload'
 
 export default {
 	name: 'UploadEditor',
@@ -54,6 +66,7 @@ export default {
 	components: {
 		Modal,
 		FilePreview,
+		Plus,
 	},
 
 	data() {
@@ -63,6 +76,10 @@ export default {
 	},
 
 	computed: {
+		token() {
+			return this.$store.getters.getToken()
+		},
+
 		currentUploadId() {
 			return this.$store.getters.currentUploadId
 		},
@@ -98,11 +115,24 @@ export default {
 			this.$store.dispatch('uploadFiles', this.currentUploadId)
 			this.modalDismissed = true
 		},
+		/**
+		 * Clicks the hidden file input when clicking the correspondent ActionButton,
+		 * thus opening the file-picker
+		 */
+		clickImportInput() {
+			this.$refs.fileUploadInput.click()
+		},
+
+		handleFileInput(event) {
+			const files = Object.values(event.target.files)
+			processFiles(files, this.token, this.currentUploadId)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/variables.scss';
 
 .upload-editor {
 	height: 100%;
@@ -117,6 +147,21 @@ export default {
 		margin-bottom: 16px;
 		margin-top: 16px;
 	}
+	&__add-more {
+		width: 100px;
+		height: 100px;
+		border: none;
+		border-radius: var(--border-radius-large);
+		position: relative;
+		z-index: 2;
+		box-shadow: 0 0 4px var(--color-box-shadow);
+		padding: 0;
+		margin: 0;
+		&__plus {
+			color: var(--color-primary-text);
+			z-index: 3;
+		}
+	}
 }
 
 </style>

From d1166438e3e1e26011d568c57418f52e1c1031dc Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Mon, 3 Aug 2020 15:46:38 +0200
Subject: [PATCH 06/12] Make the filepreview component compatible with upload
 editing

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Message/MessagePart/FilePreview.vue       | 62 +++++++++++++------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index fc0c4a74328..9c65e6d3d64 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -1,7 +1,9 @@
 <!--
   - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
   -
   - @author Joas Schilling <coding@schilljs.com>
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,11 +22,9 @@
 -->
 
 <template>
-	<a :href="link"
+	<file-preview v-bind="filePreview"
 		class="container"
-		:class="{ 'is-viewer-available': isViewerAvailable }"
-		target="_blank"
-		rel="noopener noreferrer"
+		:class="{ 'is-viewer-available': isViewerAvailable, 'upload-editor': isUploadEditor }"
 		@click="showPreview">
 		<img v-if="!isLoading && !failed"
 			:class="previewSizeClass"
@@ -37,8 +37,8 @@
 		<span v-if="isLoading"
 			class="preview loading" />
 		<strong>{{ name }}</strong>
-		<ProgressBar v-if="isTemporaryUpload" :value="uploadProgress" />
-	</a>
+		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
+	</file-preview>
 </template>
 
 <script>
@@ -97,6 +97,11 @@ export default {
 			type: String,
 			default: '',
 		},
+		// True if this component is used in the upload editor
+		isUploadEditor: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -105,6 +110,23 @@ export default {
 		}
 	},
 	computed: {
+		// This is used to decide which outer element type to use
+		// a or div
+		filePreview() {
+			if (this.isUploadEditor || this.isTemporaryUpload) {
+				return {
+					is: 'div',
+					tag: 'div',
+				}
+			}
+			return {
+				is: 'a',
+				tag: 'a',
+				href: this.link,
+				target: '_blank',
+				rel: 'noopener noreferrer',
+			}
+		},
 		defaultIconUrl() {
 			return imagePath('core', 'filetypes/file')
 		},
@@ -213,20 +235,14 @@ export default {
 	image. */
 	display: inline-block;
 
-	/* Show a hover colour around the preview when navigating with the
-	 * keyboard through the file links (or hovering them with the mouse). */
-	&:hover,
-	&:focus,
-	&:active {
-		.preview {
-			background-color: var(--color-background-hover);
+	border-radius: 16px;
 
-			/* Trick to keep the same position while adding a padding to show
-			 * the background. */
-			box-sizing: content-box !important;
-			padding: 10px;
-			margin: -10px;
-		}
+	&:hover,
+	&:focus {
+		background-color: var(--color-background-hover);
+		/* Trick to keep the same position while adding a padding to show
+			* the background. */
+		box-sizing: content-box !important;
 	}
 
 	.preview {
@@ -244,6 +260,8 @@ export default {
 		/* As the file preview is an inline block the name is set as a block to
 		force it to be on its own line below the preview. */
 		display: block;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	&:not(.is-viewer-available) {
@@ -253,4 +271,10 @@ export default {
 	}
 }
 
+.upload-editor {
+	max-width: 160px;
+	max-height: 160px;
+	margin: 10px;
+}
+
 </style>

From 291517162090c41644ebf84643eadacbc0d73a56 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 5 Aug 2020 10:33:42 +0200
Subject: [PATCH 07/12] Add ability to remove files from selection

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Message/MessagePart/FilePreview.vue       | 44 +++++++++++++++----
 src/components/UploadEditor.vue               | 16 +++++--
 src/store/fileUploadStore.js                  | 13 ++++++
 3 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 9c65e6d3d64..b95196d5536 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -23,8 +23,8 @@
 
 <template>
 	<file-preview v-bind="filePreview"
-		class="container"
-		:class="{ 'is-viewer-available': isViewerAvailable, 'upload-editor': isUploadEditor }"
+		class="file-preview"
+		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
 		@click="showPreview">
 		<img v-if="!isLoading && !failed"
 			:class="previewSizeClass"
@@ -37,6 +37,10 @@
 		<span v-if="isLoading"
 			class="preview loading" />
 		<strong>{{ name }}</strong>
+		<button v-if="isUploadEditor"
+			class="remove-file primary">
+			<Close class="remove-file__icon" @click="$emit('remove-file', id)" />
+		</button>
 		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 	</file-preview>
 </template>
@@ -44,12 +48,14 @@
 <script>
 import { generateUrl, imagePath } from '@nextcloud/router'
 import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
+import Close from 'vue-material-design-icons/Close'
 
 export default {
 	name: 'FilePreview',
 
 	components: {
 		ProgressBar,
+		Close,
 	},
 
 	props: {
@@ -227,8 +233,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../../../assets/variables.scss';
 
-.container {
+.file-preview {
+	position: relative;
 	width: 100%;
 	/* The file preview can not be a block; otherwise it would fill the whole
 	width of the container and the loading icon would not be centered on the
@@ -243,6 +251,9 @@ export default {
 		/* Trick to keep the same position while adding a padding to show
 			* the background. */
 		box-sizing: content-box !important;
+		.remove-file {
+			visibility: visible;
+		}
 	}
 
 	.preview {
@@ -264,17 +275,34 @@ export default {
 		white-space: nowrap;
 	}
 
-	&:not(.is-viewer-available) {
+	&:not(.file-preview--viewer-available) {
 		strong:after {
 			content: ' ↗';
 		}
 	}
+	&--upload-editor {
+		max-width: 160px;
+		max-height: 160px;
+		margin: 10px;
+		.preview {
+			margin: auto;
+		}
+	}
 }
 
-.upload-editor {
-	max-width: 160px;
-	max-height: 160px;
-	margin: 10px;
+.remove-file {
+	visibility: hidden;
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	box-shadow: 0 0 4px var(--color-box-shadow);
+	width: $clickable-area;
+	height: $clickable-area;
+	padding: 0;
+	margin: 0;
+	&__icon {
+		color: var(--color-primary-text);
+	}
 }
 
 </style>
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 6a69ae51f70..4b4958812fa 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -30,17 +30,21 @@
 			class="hidden-visually"
 			@change="handleFileInput">
 		<div class="upload-editor">
-			<div class="upload-editor__previews">
+			<transition-group
+				class="upload-editor__previews"
+				name="fade"
+				tag="div">
 				<template v-for="file in files">
 					<FilePreview
 						:key="file.temporaryMessage.id"
 						v-bind="file.temporaryMessage.messageParameters.file"
-						:is-upload-editor="true" />
+						:is-upload-editor="true"
+						@remove-file="handleRemoveFileFromSelection" />
 				</template>
-				<button class="upload-editor__add-more primary" @click="clickImportInput">
+				<button :key="'addMore'" class="upload-editor__add-more primary" @click="clickImportInput">
 					<Plus :size="48" class="upload-editor__plus-icon" />
 				</button>
-			</div>
+			</transition-group>
 			<div class="upload-editor__actions">
 				<button @click="handleDismiss">
 					Dismiss
@@ -127,6 +131,10 @@ export default {
 			const files = Object.values(event.target.files)
 			processFiles(files, this.token, this.currentUploadId)
 		},
+
+		handleRemoveFileFromSelection(id) {
+			this.$store.dispatch('removeFileFromSelection', id)
+		},
 	},
 }
 </script>
diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index 0bd95cc6a26..da31763ad87 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -172,6 +172,15 @@ const mutations = {
 	showUploadEditor(state, show) {
 		state.showUploadEditor = show
 	},
+
+	removeFileFromSelection(state, fileId) {
+		const uploadId = state.currentUploadId
+		for (const key in state.uploads[uploadId].files) {
+			if (state.uploads[uploadId].files[key].temporaryMessage.id === fileId) {
+				Vue.delete(state.uploads[uploadId].files, key)
+			}
+		}
+	},
 }
 
 const actions = {
@@ -274,6 +283,10 @@ const actions = {
 		context.commit('markFileAsShared', { uploadId, index })
 	},
 
+	removeFileFromSelection({ commit }, fileId) {
+		commit('removeFileFromSelection', fileId)
+	},
+
 }
 
 export default { state, mutations, getters, actions }

From ef09c4cfa3ed5b47a1f647283d3bdaf916164723 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 5 Aug 2020 15:46:54 +0200
Subject: [PATCH 08/12] Show previews in the upload editor

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Message/MessagePart/FilePreview.vue       | 14 ++++-
 src/components/UploadEditor.vue               | 59 +++++++++++--------
 src/store/fileUploadStore.js                  |  4 +-
 src/utils/temporaryMessage.js                 |  3 +-
 4 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index b95196d5536..76e0dd1aa94 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -26,7 +26,7 @@
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
 		@click="showPreview">
-		<img v-if="!isLoading && !failed"
+		<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
 			:class="previewSizeClass"
 			alt=""
 			:src="previewUrl">
@@ -108,6 +108,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		// The link to the file for displaying it in the preview
+		localUrl: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -143,6 +148,10 @@ export default {
 			return 'preview'
 		},
 		previewUrl() {
+			if (this.hasTemporaryImageUrl) {
+				return this.localUrl
+			}
+
 			if (this.previewAvailable !== 'yes' || this.$store.getters.getUserId() === null) {
 				return OC.MimeType.getIconUrl(this.mimetype)
 			}
@@ -186,6 +195,9 @@ export default {
 			}
 			return 0
 		},
+		hasTemporaryImageUrl() {
+			return this.mimetype.startsWith('image/') && this.localUrl
+		},
 	},
 	mounted() {
 		const img = new Image()
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 4b4958812fa..bfb3821fc44 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -21,6 +21,7 @@
 
 <template>
 	<Modal v-if="showModal"
+		class="upload-editor"
 		@close="handleDismiss">
 		<!--native file picker, hidden -->
 		<input id="file-upload"
@@ -29,30 +30,30 @@
 			type="file"
 			class="hidden-visually"
 			@change="handleFileInput">
-		<div class="upload-editor">
-			<transition-group
-				class="upload-editor__previews"
-				name="fade"
-				tag="div">
-				<template v-for="file in files">
-					<FilePreview
-						:key="file.temporaryMessage.id"
-						v-bind="file.temporaryMessage.messageParameters.file"
-						:is-upload-editor="true"
-						@remove-file="handleRemoveFileFromSelection" />
-				</template>
-				<button :key="'addMore'" class="upload-editor__add-more primary" @click="clickImportInput">
+		<transition-group
+			class="upload-editor__previews"
+			name="fade"
+			tag="div">
+			<template v-for="file in files">
+				<FilePreview
+					:key="file.temporaryMessage.id"
+					v-bind="file.temporaryMessage.messageParameters.file"
+					:is-upload-editor="true"
+					@remove-file="handleRemoveFileFromSelection" />
+			</template>
+			<div :key="'addMore'" class="add-more">
+				<button class="add-more__button primary" @click="clickImportInput">
 					<Plus :size="48" class="upload-editor__plus-icon" />
 				</button>
-			</transition-group>
-			<div class="upload-editor__actions">
-				<button @click="handleDismiss">
-					Dismiss
-				</button>
-				<button class="primary" @click="handleUpload">
-					Upload
-				</button>
 			</div>
+		</transition-group>
+		<div class="upload-editor__actions">
+			<button @click="handleDismiss">
+				Dismiss
+			</button>
+			<button class="primary" @click="handleUpload">
+				Upload
+			</button>
 		</div>
 	</Modal>
 </template>
@@ -152,14 +153,20 @@ export default {
 	&__actions {
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: 16px;
 		margin-top: 16px;
 	}
-	&__add-more {
-		width: 100px;
-		height: 100px;
+}
+
+.add-more {
+	width: 180px;
+	height: 180px;
+	display: flex;
+	margin: 10px;
+	&__button {
+		width: 80px;
+		height: 80px;
 		border: none;
-		border-radius: var(--border-radius-large);
+		border-radius: var(--border-radius-pill);
 		position: relative;
 		z-index: 2;
 		box-shadow: 0 0 4px var(--color-box-shadow);
diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index da31763ad87..0c4c65a88c4 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -200,8 +200,10 @@ const actions = {
 			commit('markFileAsInitialised', { uploadId, index })
 			// currentFile to be uploaded
 			const currentFile = state.uploads[uploadId].files[index].file
+			// Get localurl for previews
+			const localUrl = URL.createObjectURL(currentFile)
 			// Create temporary message for the file and add it to the message list
-			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile)
+			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile, localUrl)
 			// Add the temporary messages to the store
 			commit('setTemporaryMessageForFile', { uploadId, index, temporaryMessage })
 		}
diff --git a/src/utils/temporaryMessage.js b/src/utils/temporaryMessage.js
index d7e04c6c8ca..86e219d3309 100644
--- a/src/utils/temporaryMessage.js
+++ b/src/utils/temporaryMessage.js
@@ -24,7 +24,7 @@ import store from '../store/index'
 import SHA1 from 'crypto-js/sha1'
 import Hex from 'crypto-js/enc-hex'
 
-const createTemporaryMessage = (text, token, uploadId, index, file) => {
+const createTemporaryMessage = (text, token, uploadId, index, file, localUrl) => {
 	const messageToBeReplied = store.getters.getMessageToBeReplied(token)
 	const date = new Date()
 	let tempId = 'temp-' + date.getTime()
@@ -39,6 +39,7 @@ const createTemporaryMessage = (text, token, uploadId, index, file) => {
 			'name': file.name,
 			index,
 			uploadId,
+			localUrl,
 		}
 	}
 	const message = Object.assign({}, {

From 9e6e2d510d6ea04229c5d47bca1689c7f5c50e74 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 5 Aug 2020 15:48:47 +0200
Subject: [PATCH 09/12] Move share logic to the uploadfiles method in the store

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/store/fileUploadStore.js | 35 ++++++++++++++++++++++++++++++-----
 src/utils/fileUpload.js      | 16 ----------------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index 0c4c65a88c4..01d0cdab4fa 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -27,6 +27,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { findUniquePath } from '../utils/fileUpload'
 import createTemporaryMessage from '../utils/temporaryMessage'
 import { EventBus } from '../services/EventBus'
+import { shareFile } from '../services/filesSharingServices'
 
 const state = {
 	attachmentFolder: loadState('talk', 'attachment_folder'),
@@ -108,7 +109,12 @@ const mutations = {
 				files: {},
 			})
 		}
-		Vue.set(state.uploads[uploadId].files, Object.keys(state.uploads[uploadId].files).length, { file, status: 'toBeUploaded', totalSize: file.size, uploadedSize: 0 })
+		Vue.set(state.uploads[uploadId].files, Object.keys(state.uploads[uploadId].files).length, {
+			file,
+			status: 'toBeUploaded',
+			totalSize: file.size,
+			uploadedSize: 0,
+		 })
 	},
 
 	// Marks a given file as failed upload
@@ -216,17 +222,20 @@ const actions = {
 	 */
 	async uploadFiles({ commit, dispatch, state, getters }, uploadId) {
 
-		// Iterate through the previously indexed files for a given conversation (token)
+		// Tag the previously indexed files and add the temporary messages to the
+		// messages list
 		for (const index in state.uploads[uploadId].files) {
-			// Mark file as uploading to prevent a second function call to start a
-			// second upload for the same file
-			commit('markFileAsInitialised', { uploadId, index })
+			// mark all files as uploading
+			commit('markFileAsUploading', { uploadId, index })
 			// Store the previously created temporary message
 			const temporaryMessage = state.uploads[uploadId].files[index].temporaryMessage
 			// Add temporary messages (files) to the messages list
 			dispatch('addTemporaryMessage', temporaryMessage)
 			// Scroll the message list
 			EventBus.$emit('scrollChatToBottom')
+		}
+		// Iterate again and perform the uploads
+		for (const index in state.uploads[uploadId].files) {
 			// currentFile to be uploaded
 			const currentFile = state.uploads[uploadId].files[index].file
 			// userRoot path
@@ -251,6 +260,22 @@ const actions = {
 				// Mark the upload as failed in the store
 				commit('markFileAsFailedUpload', { uploadId, index })
 			}
+
+			// Get the files that have successfully been uploaded from the store
+			const shareableFiles = getters.getShareableFiles(uploadId)
+			// Share each of those files to the conversation
+			for (const index in shareableFiles) {
+				const path = shareableFiles[index].sharePath
+				try {
+					const temporaryMessage = shareableFiles[index].temporaryMessage
+					const token = temporaryMessage.token
+					dispatch('markFileAsSharing', { uploadId, index })
+					await shareFile(path, token, temporaryMessage.referenceId)
+					dispatch('markFileAsShared', { uploadId, index })
+				} catch (exception) {
+					console.debug('An error happened when trying to share your file: ', exception)
+				}
+			}
 		}
 	},
 	/**
diff --git a/src/utils/fileUpload.js b/src/utils/fileUpload.js
index 4fc5e5c33a9..2ad6128e415 100644
--- a/src/utils/fileUpload.js
+++ b/src/utils/fileUpload.js
@@ -29,7 +29,6 @@
   * @returns {string} The unique path
   */
 
-import { shareFile } from '../services/filesSharingServices'
 import store from '../store/index'
 
 const findUniquePath = async function(client, userRoot, path) {
@@ -70,22 +69,7 @@ const findUniquePath = async function(client, userRoot, path) {
 const processFiles = async function(files, token, uploadId) {
 	// Process these files in the store
 	await store.dispatch('initialiseUpload', { uploadId, token, files })
-	// Get the files that have successfully been uploaded from the store
-	const shareableFiles = store.getters.getShareableFiles(uploadId)
 
-	// Share each of those files in the conversation
-	for (const index in shareableFiles) {
-		const path = shareableFiles[index].sharePath
-		try {
-			const temporaryMessage = shareableFiles[index].temporaryMessage
-
-			store.dispatch('markFileAsSharing', { uploadId, index })
-			await shareFile(path, token, temporaryMessage.referenceId)
-			store.dispatch('markFileAsShared', { uploadId, index })
-		} catch (exception) {
-			console.debug('An error happened when triying to share your file: ', exception)
-		}
-	}
 }
 
 export {

From c49ee85d924857e94ae4e9c317e6661cdb4be13f Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 5 Aug 2020 17:21:28 +0200
Subject: [PATCH 10/12] Style upload editor

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Message/MessagePart/FilePreview.vue       |  3 +++
 src/components/UploadEditor.vue               | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 76e0dd1aa94..b41444f3865 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -285,6 +285,8 @@ export default {
 		display: block;
 		overflow: hidden;
 		white-space: nowrap;
+		text-overflow: ellipsis;
+		margin-top: 4px;
 	}
 
 	&:not(.file-preview--viewer-available) {
@@ -296,6 +298,7 @@ export default {
 		max-width: 160px;
 		max-height: 160px;
 		margin: 10px;
+		padding: 12px;
 		.preview {
 			margin: auto;
 		}
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index bfb3821fc44..0ed97ca88a2 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -144,16 +144,21 @@ export default {
 @import '../assets/variables.scss';
 
 .upload-editor {
-	height: 100%;
 	&__previews {
-		display: flex;
-		flex-wrap: wrap;
+		overflow-x: hidden !important;
+		display: grid;
+		position: relative;
 		overflow: auto;
+		grid-template-columns: repeat(4, auto);
 	}
 	&__actions {
 		display: flex;
 		justify-content: space-between;
 		margin-top: 16px;
+		margin-bottom: 4px;
+		button {
+			margin: 0 4px 0 4px;
+		}
 	}
 }
 
@@ -171,7 +176,7 @@ export default {
 		z-index: 2;
 		box-shadow: 0 0 4px var(--color-box-shadow);
 		padding: 0;
-		margin: 0;
+		margin: auto;
 		&__plus {
 			color: var(--color-primary-text);
 			z-index: 3;
@@ -179,4 +184,10 @@ export default {
 	}
 }
 
+::v-deep .modal-container {
+	display: flex !important;
+	flex-direction: column;
+	padding: 12px !important;
+	min-width: 400px;
+}
 </style>

From d7384424429f0b232663c5ab22e920f569fdc77f Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Mon, 10 Aug 2020 17:16:46 +0200
Subject: [PATCH 11/12] Use unique random indexes for temporary messages

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/store/fileUploadStore.js  | 47 ++++++++++++++---------------------
 src/utils/temporaryMessage.js |  5 ++--
 2 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
index 01d0cdab4fa..ed6773d2352 100644
--- a/src/store/fileUploadStore.js
+++ b/src/store/fileUploadStore.js
@@ -94,14 +94,12 @@ const getters = {
 }
 
 const mutations = {
-	/**
-	 * Adds a "file to be shared to the store"
-	 * @param {object} state the state object
-	 * @param {object} file the file to be added to the store
-	 * @param {number} uploadId The unique identifier of the upload operation
-	 * @param {string} token the conversation's token
-	 */
-	addFileToBeUploaded(state, { uploadId, token, file }) {
+
+	// Adds a "file to be shared to the store"
+	addFileToBeUploaded(state, { file, temporaryMessage }) {
+		const uploadId = temporaryMessage.messageParameters.file.uploadId
+		const token = temporaryMessage.messageParameters.file.token
+		const index = temporaryMessage.messageParameters.file.index
 		// Create upload id if not present
 		if (!state.uploads[uploadId]) {
 			Vue.set(state.uploads, uploadId, {
@@ -109,11 +107,12 @@ const mutations = {
 				files: {},
 			})
 		}
-		Vue.set(state.uploads[uploadId].files, Object.keys(state.uploads[uploadId].files).length, {
+		Vue.set(state.uploads[uploadId].files, index, {
 			file,
-			status: 'toBeUploaded',
+			status: 'initialised',
 			totalSize: file.size,
 			uploadedSize: 0,
+			temporaryMessage,
 		 })
 	},
 
@@ -128,11 +127,6 @@ const mutations = {
 		Vue.set(state.uploads[uploadId].files[index], 'sharePath', sharePath)
 	},
 
-	// Marks a given file as initialised
-	markFileAsInitialised(state, { uploadId, index }) {
-		state.uploads[uploadId].files[index].status = 'initialised'
-	},
-
 	// Marks a given file as uploading
 	markFileAsUploading(state, { uploadId, index }) {
 		state.uploads[uploadId].files[index].status = 'uploading'
@@ -196,23 +190,18 @@ const actions = {
 		commit('setCurrentUploadId', uploadId)
 		// Show upload editor
 		commit('showUploadEditor', true)
-		files.forEach(file => {
-			commit('addFileToBeUploaded', { uploadId, token, file })
-		})
 
-		// Add temporary messages
-		for (const index in state.uploads[uploadId].files) {
-			// Mark file as initialised
-			commit('markFileAsInitialised', { uploadId, index })
-			// currentFile to be uploaded
-			const currentFile = state.uploads[uploadId].files[index].file
+		files.forEach(file => {
 			// Get localurl for previews
-			const localUrl = URL.createObjectURL(currentFile)
+			const localUrl = URL.createObjectURL(file)
+			// Create a unique index for each file
+			const date = new Date()
+			const index = 'temp_' + date.getTime() + Math.random()
 			// Create temporary message for the file and add it to the message list
-			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, currentFile, localUrl)
-			// Add the temporary messages to the store
-			commit('setTemporaryMessageForFile', { uploadId, index, temporaryMessage })
-		}
+			const temporaryMessage = createTemporaryMessage('{file}', token, uploadId, index, file, localUrl)
+			console.debug('temporarymessage: ', temporaryMessage, 'uploadId', uploadId)
+			commit('addFileToBeUploaded', { file, temporaryMessage })
+		})
 	},
 
 	/**
diff --git a/src/utils/temporaryMessage.js b/src/utils/temporaryMessage.js
index 86e219d3309..39a54624de0 100644
--- a/src/utils/temporaryMessage.js
+++ b/src/utils/temporaryMessage.js
@@ -30,16 +30,17 @@ const createTemporaryMessage = (text, token, uploadId, index, file, localUrl) =>
 	let tempId = 'temp-' + date.getTime()
 	const messageParameters = {}
 	if (file) {
-		tempId += '-' + uploadId + '-' + index
+		tempId += '-' + uploadId + '-' + Math.random()
 		messageParameters.file = {
 			'type': 'file',
 			'file': file,
 			'mimetype': file.type,
 			'id': tempId,
 			'name': file.name,
-			index,
+			// index, will be the id from now on
 			uploadId,
 			localUrl,
+			index,
 		}
 	}
 	const message = Object.assign({}, {

From 6653eb6126205982f096f3a91735da6d4282a47e Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 13 Aug 2020 16:54:29 +0200
Subject: [PATCH 12/12] Make uploadeditor accessible

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../Message/MessagePart/FilePreview.vue       | 26 +++++++++++++++++--
 src/components/UploadEditor.vue               |  8 +++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index b41444f3865..3696adda75d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -23,11 +23,14 @@
 
 <template>
 	<file-preview v-bind="filePreview"
+		:tabindex="wrapperTabIndex"
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
-		@click="showPreview">
+		@click="handleClick"
+		@keydown.enter="handleClick">
 		<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
 			:class="previewSizeClass"
+			class="file-preview__image"
 			alt=""
 			:src="previewUrl">
 		<img v-if="!isLoading && failed"
@@ -38,6 +41,8 @@
 			class="preview loading" />
 		<strong>{{ name }}</strong>
 		<button v-if="isUploadEditor"
+			tabindex="1"
+			:aria-label="removeAriaLabel"
 			class="remove-file primary">
 			<Close class="remove-file__icon" @click="$emit('remove-file', id)" />
 		</button>
@@ -198,6 +203,14 @@ export default {
 		hasTemporaryImageUrl() {
 			return this.mimetype.startsWith('image/') && this.localUrl
 		},
+
+		wrapperTabIndex() {
+			return this.isUploadEditor ? '0' : ''
+		},
+
+		removeAriaLabel() {
+			return t('spreed', 'Remove' + this.name)
+		},
 	},
 	mounted() {
 		const img = new Image()
@@ -211,7 +224,12 @@ export default {
 		img.src = this.previewUrl
 	},
 	methods: {
-		showPreview(event) {
+		handleClick(event) {
+			if (this.isUploadEditor) {
+				this.$emit('remove-file', this.id)
+				return
+			}
+
 			if (!this.isViewerAvailable) {
 				// Regular event handling by opening the link.
 				return
@@ -268,6 +286,10 @@ export default {
 		}
 	}
 
+	&__image {
+		object-fit: cover;
+	}
+
 	.preview {
 		display: block;
 		width: 128px;
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 0ed97ca88a2..2f3bfc34045 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -42,7 +42,9 @@
 					@remove-file="handleRemoveFileFromSelection" />
 			</template>
 			<div :key="'addMore'" class="add-more">
-				<button class="add-more__button primary" @click="clickImportInput">
+				<button :aria-label="addMoreAriaLabel"
+					class="add-more__button primary"
+					@click="clickImportInput">
 					<Plus :size="48" class="upload-editor__plus-icon" />
 				</button>
 			</div>
@@ -103,6 +105,10 @@ export default {
 		showModal() {
 			return this.showUploadEditor && !this.modalDismissed
 		},
+
+		addMoreAriaLabel() {
+			return t('spreed', 'Add more files')
+		},
 	},
 
 	watch: {