From 85fc8fffd4b4210ff1f709cf99ebabdaa3ee9ee9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 16 Nov 2025 12:13:50 +0100
Subject: [PATCH] feat: restrict attachment drop to files

Resolves https://github.com/go-vikunja/vikunja/issues/1663
---
 .../components/tasks/partials/Attachments.vue  | 14 ++++++++++++--
 frontend/src/composables/useDropzone.ts        | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index ebb38491d..34397da6d 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -173,7 +173,7 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
-import {useDropZone} from '@vueuse/core'
+import {useDropZone} from '@/composables/useDropzone'
 
 import User from '@/components/misc/User.vue'
 import ProgressBar from '@/components/misc/ProgressBar.vue'
@@ -221,7 +221,17 @@ function onDrop(files: File[] | null) {
 	}
 }
 
-const {isOverDropZone} = useDropZone(document, onDrop)
+const {isOverDropZone} = useDropZone(document, {
+	onDrop,
+	checkValidity: items => {
+		for (const item of items) {
+			if (item.kind === 'file') {
+				return true
+			}
+		}
+		return false
+	},
+})
 
 function downloadAttachment(attachment: IAttachment) {
 	attachmentService.download(attachment)
diff --git a/frontend/src/composables/useDropzone.ts b/frontend/src/composables/useDropzone.ts
index f471087b6..f1b6a898d 100644
--- a/frontend/src/composables/useDropzone.ts
+++ b/frontend/src/composables/useDropzone.ts
@@ -1,10 +1,17 @@
 import type { MaybeRef, MaybeRefOrGetter, ShallowRef } from 'vue'
 import { isClient } from '@vueuse/shared'
-// eslint-disable-next-line no-restricted-imports
 import { shallowRef, unref } from 'vue'
 
 import { useEventListener } from '@vueuse/core'
 
+
+/////////
+// Temporary copy until https://github.com/vueuse/vueuse/pull/5169 is merged and released
+////////
+
+/* eslint-disable */ 
+
+
 export interface UseDropZoneReturn {
   files: ShallowRef<File[] | null>
   isOverDropZone: ShallowRef<boolean>
@@ -16,6 +23,11 @@ export interface UseDropZoneOptions {
    * Also can be a function to check the data types.
    */
   dataTypes?: MaybeRef<readonly string[]> | ((types: readonly string[]) => boolean)
+  /**
+   * Similar to dataTypes, but exposes the DataTransferItemList for custom validation.
+   * If provided, this function takes precedence over dataTypes.
+   */
+  checkValidity?: (items: DataTransferItemList) => boolean
   onDrop?: (files: File[] | null, event: DragEvent) => void
   onEnter?: (files: File[] | null, event: DragEvent) => void
   onLeave?: (files: File[] | null, event: DragEvent) => void
@@ -67,6 +79,10 @@ export function useDropZone(
     }
 
     const checkValidity = (items: DataTransferItemList) => {
+      if (_options.checkValidity) {
+        return _options.checkValidity(items)
+      }
+
       const types = Array.from(items ?? []).map(item => item.type)
 
       const dataTypesValid = checkDataTypes(types)