Skip to content

Commit 4fa3a74

Browse files
authored
fix(chat): prevent sortable sidebar drags from triggering file upload overlay (open-webui#25675)
Add a custom MIME type (application/x-open-webui-drag) to intentional chat and folder drag sources. The onDragOver handler in MessageInput now checks for this type instead of the generic text/plain, which SortableJS also sets during reorder operations for pinned menu items (Notes, Workspace) and pinned Models.
1 parent 416baef commit 4fa3a74

4 files changed

Lines changed: 17 additions & 2 deletions

File tree

src/lib/components/chat/MessageInput.svelte

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -857,8 +857,13 @@
857857
const onDragOver = (e: DragEvent) => {
858858
e.preventDefault();
859859
860-
// Check if a file or a sidebar chat item is being dragged.
861-
if (e.dataTransfer?.types?.includes('Files') || e.dataTransfer?.types?.includes('text/plain')) {
860+
// Check if a file or a sidebar chat/folder item is being dragged.
861+
// Use a custom MIME type to distinguish intentional drags from SortableJS reorder drags
862+
// (e.g. Notes, Workspace, pinned Models), which also set 'text/plain'.
863+
if (
864+
e.dataTransfer?.types?.includes('Files') ||
865+
e.dataTransfer?.types?.includes('application/x-open-webui-drag')
866+
) {
862867
dragged = true;
863868
} else {
864869
dragged = false;

src/lib/components/common/Folder.svelte

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@
8888
} finally {
8989
draggedOver = false;
9090
}
91+
92+
// Only process the first non-file item; all share the same
93+
// text/plain payload, so continuing would duplicate the drop.
94+
break;
9195
}
9296
}
9397
}

src/lib/components/layout/Sidebar/ChatItem.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,7 @@
266266
id: id
267267
})
268268
);
269+
event.dataTransfer.setData('application/x-open-webui-drag', '');
269270
270271
dragged = true;
271272
itemElement.style.opacity = '0.5'; // Optional: Visual cue to show it's being dragged

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,10 @@
206206
} catch (error) {
207207
console.log('Error parsing dataTransfer:', error);
208208
}
209+
210+
// Only process the first non-file item; all share the same
211+
// text/plain payload, so continuing would duplicate the move.
212+
break;
209213
}
210214
}
211215
}
@@ -243,6 +247,7 @@
243247
id: folderId
244248
})
245249
);
250+
event.dataTransfer.setData('application/x-open-webui-drag', '');
246251
247252
dragged = true;
248253
folderElement.style.opacity = '0.5'; // Optional: Visual cue to show it's being dragged

0 commit comments

Comments
 (0)