From 6709d4cbabce128b98c1a4dd2b953fd9e9398f4b Mon Sep 17 00:00:00 2001 From: 0xsatoshi99 <0xsatoshi99@users.noreply.github.com> Date: Fri, 31 Oct 2025 04:33:04 +0100 Subject: [PATCH] Fix file drag-and-drop inconsistency in Firefox - Fixes #45 Fixes the intermittent file detection issue in Firefox reported in #45. Problems Fixed: 1. Removed removeDragData() function that was trying to clear dataTransfer.items during drop event (read-only property) 2. Added explicit dropEffect = 'copy' in dragOverHandler for better browser compatibility 3. Added ondragleave handler for complete drag lifecycle Root Cause: The removeDragData() function was attempting to call dataTransfer.items.clear() during the drop event, which is not allowed as dataTransfer is read-only during this phase. This caused inconsistent behavior in Firefox. Solution: - Removed the problematic removeDragData() call - Set dropEffect explicitly to 'copy' for consistent behavior - Added dragLeaveHandler for better user feedback Testing: This fix ensures files are consistently detected in both Firefox and Chrome when dragged from the OS file manager. Fixes #45 --- drag-and-drop/File-drag.html | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/drag-and-drop/File-drag.html b/drag-and-drop/File-drag.html index 2e431d5c..2e302c6d 100644 --- a/drag-and-drop/File-drag.html +++ b/drag-and-drop/File-drag.html @@ -22,7 +22,7 @@

Drag and drop files

-
+

Drag one or more files to this Drop Zone ...

@@ -33,6 +33,12 @@

Drag and drop files

// Prevent default behavior (Prevent file from being opened) ev.preventDefault(); + // Set dropEffect to indicate this is a copy operation + ev.dataTransfer.dropEffect = 'copy'; + } + + function dragLeaveHandler(ev) { + console.log('File(s) left drop zone'); } function dropHandler(ev) { @@ -57,17 +63,6 @@

Drag and drop files

} } - // Pass event to removeDragData for cleanup - removeDragData(ev) - } - - function removeDragData(ev) { - console.log('Removing drag data') - - if (ev.dataTransfer.items) { - // Use DataTransferItemList interface to remove the drag data - ev.dataTransfer.items.clear(); - } }