Handle pasting screenshots to the chat message form

src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue

@@ -79,6 +79,7 @@ import At from 'vue-at'
 import VueAtReparenter from '../../../mixins/vueAtReparenter'
 import { EventBus } from '../../../services/EventBus'
 import { searchPossibleMentions } from '../../../services/mentionsService'
+import { fetchClipboardContent } from '../../../utils/clipboard'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention'
 import escapeHtml from 'escape-html'
@@ -228,9 +229,16 @@ export default {
 	methods: {
 		onPaste(e) {
 			e.preventDefault()
-			const text = e.clipboardData.getData('text/plain')
-			const div = document.createElement('div').innerText = escapeHtml(text)
-			document.execCommand('insertHtml', false, div)
+
+			const content = fetchClipboardContent(e)
+
+			if (content.kind === 'file') {
+				this.$emit('files-pasted', content.files)
+			} else if (content.kind === 'text') {
+				const text = content.text
+				const div = document.createElement('div').innerText = escapeHtml(text)
+				document.execCommand('insertHtml', false, div)
+			}
 		},
 
 		/**

src/components/NewMessageForm/NewMessageForm.vue

@@ -64,7 +64,8 @@
 						v-model="text"
 						:token="token"
 						@update:contentEditable="contentEditableToParsed"
-						@submit="handleSubmit" />
+						@submit="handleSubmit"
+						@files-pasted="handleFiles" />
 				</div>
 				<button
 					type="submit"
@@ -283,6 +284,16 @@ export default {
 
 		handleFileInput(event) {
 			const files = Object.values(event.target.files)
+
+			this.handleFiles(files)
+		},
+
+		/**
+		 * Handles files pasting event.
+		 *
+		 * @param {File[] | FileList} files pasted files list
+		 */
+		handleFiles(files) {
 			// Create a unique id for the upload operation
 			const uploadId = new Date().getTime()
 			// Uploads and shares the files

src/utils/clipboard.js

@@ -0,0 +1,45 @@
+/**
+ * @typedef {Object} ClipboardContent
+ * @property {('file'|'text'|'none')} kind content type (file or text)
+ * @property {File[] | FileList | undefined} files files array
+ * @property {String | undefined} text text content
+ */
+
+/**
+ * Fetches the clipboard content from the event.
+ *
+ * @param {ClipboardEvent} event native event
+ * @returns {ClipboardContent}
+ */
+const fetchClipboardContent = function(event) {
+	const clipboardData = event.clipboardData
+
+	if (!clipboardData) {
+		return { kind: 'none' }
+	}
+
+	if (clipboardData.files && clipboardData.files.length > 0) {
+		return { kind: 'file', files: clipboardData.files }
+	}
+
+	if (clipboardData.items && clipboardData.items.length > 0) {
+		const files = []
+		for (let i = 0; i < clipboardData.items.length; i++) {
+			if (clipboardData.items[i].kind === 'file') {
+				files.push(clipboardData.items[i].getAsFile())
+			}
+		}
+
+		if (files.length > 0) {
+			return { kind: 'file', files: files }
+		}
+	}
+
+	const text = clipboardData.getData('text/plain')
+
+	return { kind: 'text', text: text }
+}
+
+export {
+	fetchClipboardContent
+}