From 92786cbb254ce37723213e6816a973d0af0ba732 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Mon, 29 Dec 2025 14:44:53 +0100
Subject: [PATCH 1/2] feat: upload file on drop in MediaField

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/fields/MediaField.vue | 102 ++++++++++++++++++++++++++-
 1 file changed, 101 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/MediaField.vue b/src/components/fields/MediaField.vue
index c6104e69..3efc9728 100644
--- a/src/components/fields/MediaField.vue
+++ b/src/components/fields/MediaField.vue
@@ -3,12 +3,29 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="media-field">
+	<div class="media-field"
+		:class="{
+			draggedOver: isDraggedOver,
+		}"
+		@dragover="onDragOver"
+		@dragenter="onDragEnter"
+		@dragleave="onDragLeave"
+		@drop="onDrop">
 		<div class="label-row">
 			<label class="field-label"
 				:title="field.description">
 				{{ field.name }}
 			</label>
+			<NcButton v-if="value === null"
+				variant="tertiary"
+				:title="t('assistant', 'Drop a file here to upload it')">
+				<template #icon>
+					<InformationOutlineIcon />
+				</template>
+			</NcButton>
+			<strong v-show="value === null && isDraggedOver">
+				{{ t('assistant', 'Drop a file here to upload it') }}
+			</strong>
 		</div>
 		<div v-if="!isOutput"
 			class="select-media">
@@ -87,6 +104,7 @@ import CloseIcon from 'vue-material-design-icons/Close.vue'
 import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
 import ContentSaveOutlineIcon from 'vue-material-design-icons/ContentSaveOutline.vue'
+import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
 
 import NcButton from '@nextcloud/vue/components/NcButton'
 
@@ -115,6 +133,7 @@ export default {
 		ShareVariantIcon,
 		CloseIcon,
 		ContentSaveOutlineIcon,
+		InformationOutlineIcon,
 		NcButton,
 	},
 
@@ -150,6 +169,7 @@ export default {
 			filePath: null,
 			isUploading: false,
 			isRecording: false,
+			isDraggedOver: false,
 		}
 	},
 
@@ -296,6 +316,79 @@ export default {
 				console.error(error)
 			})
 		},
+		onDragOver(e) {
+			if (this.value !== null) {
+				return
+			}
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length === 1) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = true
+			}
+		},
+		onDragEnter(e) {
+			if (this.value !== null) {
+				return
+			}
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length === 1) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = true
+			}
+		},
+		onDragLeave(e) {
+			console.debug('leave', e.target)
+			if (this.value !== null) {
+				return
+			}
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length === 1) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = false
+			}
+		},
+		onDrop(e) {
+			if (this.value !== null) {
+				return
+			}
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length === 1) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.uploadDroppedFile(fileItems[0].getAsFile())
+				this.isDraggedOver = false
+			}
+		},
+		uploadDroppedFile(file) {
+			this.isUploading = true
+
+			const uploadEndpointUrl = generateOcsUrl('/apps/assistant/api/v1/input-file')
+			const formData = new FormData()
+			formData.append('data', file)
+			formData.append('filename', file.name)
+			return axios.post(uploadEndpointUrl, formData)
+				.then((response) => {
+					const data = response.data.ocs.data
+					this.onFileUploaded({ fileId: data.fileId, filePath: data.filePath })
+				})
+				.catch(error => {
+					console.error('error while uploading a file after drop', error)
+				})
+				.then(() => {
+					this.isUploading = false
+				})
+		},
 	},
 }
 </script>
@@ -307,11 +400,18 @@ export default {
 	align-items: start;
 	gap: 12px;
 
+	&.draggedOver {
+		border: solid 2px var(--color-border-success);
+		border-radius: var(--border-radius-large);
+	}
+
 	.label-row {
 		width: 100%;
+		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;
 		justify-content: start;
+		gap: 4px;
 
 		.field-label {
 			font-weight: bold;

From afa5705352fc362e6fc18d6eb34686dd1e7081ec Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Mon, 29 Dec 2025 15:13:30 +0100
Subject: [PATCH 2/2] feat: upload files on drop in ListOfMediaField, factorize
 upload logic in the frontend

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/fields/ListOfMediaField.vue    | 90 ++++++++++++++++++-
 src/components/fields/MediaField.vue          |  7 +-
 .../fields/UploadInputFileButton.vue          | 15 +---
 src/utils.js                                  | 12 +++
 4 files changed, 106 insertions(+), 18 deletions(-)

diff --git a/src/components/fields/ListOfMediaField.vue b/src/components/fields/ListOfMediaField.vue
index 05443bf9..782f5455 100644
--- a/src/components/fields/ListOfMediaField.vue
+++ b/src/components/fields/ListOfMediaField.vue
@@ -3,12 +3,29 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="media-list-field">
+	<div class="media-list-field"
+		:class="{
+			draggedOver: isDraggedOver,
+		}"
+		@dragover="onDragOver"
+		@dragenter="onDragEnter"
+		@dragleave="onDragLeave"
+		@drop="onDrop">
 		<div class="label-row">
 			<label class="field-label"
 				:title="field.description">
 				{{ field.name }}
 			</label>
+			<NcButton
+				variant="tertiary"
+				:title="t('assistant', 'Drop files here to upload them')">
+				<template #icon>
+					<InformationOutlineIcon />
+				</template>
+			</NcButton>
+			<strong v-show="isDraggedOver">
+				{{ t('assistant', 'Drop files here to upload them') }}
+			</strong>
 		</div>
 		<div v-if="!isOutput"
 			class="select-media">
@@ -91,6 +108,7 @@ import TrayArrowDownIcon from 'vue-material-design-icons/TrayArrowDown.vue'
 import ShareVariantIcon from 'vue-material-design-icons/ShareVariant.vue'
 import ContentSaveOutlineIcon from 'vue-material-design-icons/ContentSaveOutline.vue'
 import TrashCanOutlineIcon from 'vue-material-design-icons/TrashCanOutline.vue'
+import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
 
 import NcButton from '@nextcloud/vue/components/NcButton'
 
@@ -104,6 +122,7 @@ import AudioRecorderWrapper from './AudioRecorderWrapper.vue'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { uploadInputFile } from '../../utils.js'
 
 import {
 	SHAPE_TYPE_NAMES,
@@ -123,6 +142,7 @@ export default {
 		TrayArrowDownIcon,
 		ShareVariantIcon,
 		ContentSaveOutlineIcon,
+		InformationOutlineIcon,
 		NcButton,
 	},
 
@@ -157,6 +177,7 @@ export default {
 		return {
 			isUploading: false,
 			isRecording: false,
+			isDraggedOver: false,
 		}
 	},
 
@@ -319,6 +340,66 @@ export default {
 				console.error(error)
 			})
 		},
+		onDragOver(e) {
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = true
+			}
+		},
+		onDragEnter(e) {
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = true
+			}
+		},
+		onDragLeave(e) {
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.isDraggedOver = false
+			}
+		},
+		onDrop(e) {
+			const fileItems = [...e.dataTransfer.items].filter(
+				(item) => item.kind === 'file',
+			)
+			if (fileItems.length > 0) {
+				e.preventDefault()
+				e.stopPropagation()
+				this.uploadDroppedFiles(fileItems.map(item => item.getAsFile()))
+				this.isDraggedOver = false
+			}
+		},
+		uploadDroppedFiles(files) {
+			this.isUploading = true
+
+			Promise.all(Array.from(files).map(f => uploadInputFile(f)))
+				.then(responses => {
+					if (responses.some(response => response.code === 'ERR_CANCELED')) {
+						console.debug('At least one request has been canceled, do nothing')
+						return
+					}
+					this.onFilesUploaded(responses.map(response => response.data.ocs.data))
+				})
+				.catch(error => {
+					showError(t('assistant', 'Could not upload the files'))
+					console.error(error)
+				})
+				.then(() => {
+					this.isUploading = false
+				})
+		},
 	},
 }
 </script>
@@ -330,12 +411,19 @@ export default {
 	align-items: center;
 	gap: 8px;
 
+	&.draggedOver {
+		border: solid 2px var(--color-border-success);
+		border-radius: var(--border-radius-large);
+	}
+
 	.label-row {
 		width: 100%;
+		height: var(--default-clickable-area);
 		display: flex;
 		flex-direction: row;
 		justify-content: start;
 		align-items: center;
+		gap: 4px;
 
 		.field-label {
 			font-weight: bold;
diff --git a/src/components/fields/MediaField.vue b/src/components/fields/MediaField.vue
index 3efc9728..e47b9a5c 100644
--- a/src/components/fields/MediaField.vue
+++ b/src/components/fields/MediaField.vue
@@ -121,6 +121,7 @@ import { SHAPE_TYPE_NAMES, VALID_AUDIO_MIME_TYPES, VALID_IMAGE_MIME_TYPES, VALID
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { uploadInputFile } from '../../utils.js'
 
 export default {
 	name: 'MediaField',
@@ -373,11 +374,7 @@ export default {
 		uploadDroppedFile(file) {
 			this.isUploading = true
 
-			const uploadEndpointUrl = generateOcsUrl('/apps/assistant/api/v1/input-file')
-			const formData = new FormData()
-			formData.append('data', file)
-			formData.append('filename', file.name)
-			return axios.post(uploadEndpointUrl, formData)
+			return uploadInputFile(file)
 				.then((response) => {
 					const data = response.data.ocs.data
 					this.onFileUploaded({ fileId: data.fileId, filePath: data.filePath })
diff --git a/src/components/fields/UploadInputFileButton.vue b/src/components/fields/UploadInputFileButton.vue
index a27a8e43..91d5870c 100644
--- a/src/components/fields/UploadInputFileButton.vue
+++ b/src/components/fields/UploadInputFileButton.vue
@@ -31,10 +31,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcButton from '@nextcloud/vue/components/NcButton'
 
 import { showError } from '@nextcloud/dialogs'
-import { generateOcsUrl } from '@nextcloud/router'
-import axios from '@nextcloud/axios'
-
-const uploadEndpointUrl = generateOcsUrl('/apps/assistant/api/v1/input-file')
+import { uploadInputFile } from '../../utils.js'
 
 export default {
 	name: 'UploadInputFileButton',
@@ -104,7 +101,7 @@ export default {
 			if (!this.multiple) {
 				this.$emit('update:is-uploading', true)
 				const file = files[0]
-				this.uploadFile(file).then(response => {
+				uploadInputFile(file).then(response => {
 					this.$emit('files-uploaded', response.data.ocs.data)
 				}).catch(error => {
 					showError(t('assistant', 'Could not upload the file'))
@@ -114,7 +111,7 @@ export default {
 				})
 			} else {
 				this.$emit('update:is-uploading', true)
-				Promise.all(Array.from(files).map(f => this.uploadFile(f)))
+				Promise.all(Array.from(files).map(f => uploadInputFile(f)))
 					.then(responses => {
 						if (responses.some(response => response.code === 'ERR_CANCELED')) {
 							console.debug('At least one request has been canceled, do nothing')
@@ -130,12 +127,6 @@ export default {
 					})
 			}
 		},
-		uploadFile(file) {
-			const formData = new FormData()
-			formData.append('data', file)
-			formData.append('filename', file.name)
-			return axios.post(uploadEndpointUrl, formData)
-		},
 	},
 }
 </script>
diff --git a/src/utils.js b/src/utils.js
index 1c53673e..653614b3 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -3,6 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { generateOcsUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+
+const uploadEndpointUrl = generateOcsUrl('/apps/assistant/api/v1/input-file')
+
 let mytimer = 0
 export function delay(callback, ms = 0) {
 	clearTimeout(mytimer)
@@ -24,3 +29,10 @@ export function parseSpecialSymbols(text) {
 		.replace(/\r\n|\n|\r/gm, '\n') // remove line breaks
 	return text
 }
+
+export function uploadInputFile(file) {
+	const formData = new FormData()
+	formData.append('data', file)
+	formData.append('filename', file.name)
+	return axios.post(uploadEndpointUrl, formData)
+}