Add drag&drop to data bank

public/scripts/chats.js

@@ -863,6 +863,61 @@ async function openAttachmentManager() {
         template.find('.chatAttachmentsName').text(chatName);
     }
 
+    function addDragAndDrop() {
+        $(document.body).on('dragover', '.dialogue_popup', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.target).closest('.dialogue_popup').addClass('dragover');
+        });
+
+        $(document.body).on('dragleave', '.dialogue_popup', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.target).closest('.dialogue_popup').removeClass('dragover');
+        });
+
+        $(document.body).on('drop', '.dialogue_popup', async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            $(event.target).closest('.dialogue_popup').removeClass('dragover');
+
+            const files = Array.from(event.originalEvent.dataTransfer.files);
+            const targets = Object.values(ATTACHMENT_SOURCE);
+
+            const isNotCharacter = this_chid === undefined || selected_group;
+            const isNotInChat = getCurrentChatId() === undefined;
+            let selectedTarget = ATTACHMENT_SOURCE.GLOBAL;
+
+            if (isNotCharacter) {
+                targets.splice(targets.indexOf(ATTACHMENT_SOURCE.CHARACTER), 1);
+            }
+
+            if (isNotInChat) {
+                targets.splice(targets.indexOf(ATTACHMENT_SOURCE.CHAT), 1);
+            }
+
+            const targetSelectTemplate = $(await renderExtensionTemplateAsync('attachments', 'files-dropped', { count: files.length, targets: targets }));
+            targetSelectTemplate.find('.droppedFilesTarget').on('input', function () {
+                selectedTarget = String($(this).val());
+            });
+            const result = await callGenericPopup(targetSelectTemplate, POPUP_TYPE.CONFIRM, '', { wide: false, large: false, okButton: 'Upload', cancelButton: 'Cancel' });
+            if (result !== POPUP_RESULT.AFFIRMATIVE) {
+                console.log('File upload cancelled');
+                return;
+            }
+            for (const file of files) {
+                await uploadFileAttachmentToServer(file, selectedTarget);
+            }
+            renderAttachments();
+        });
+    }
+
+    function removeDragAndDrop() {
+        $(document.body).off('dragover', '.shadow_popup');
+        $(document.body).off('dragleave', '.shadow_popup');
+        $(document.body).off('drop', '.shadow_popup');
+    }
+
     let sortField = localStorage.getItem('DataBank_sortField') || 'created';
     let sortOrder = localStorage.getItem('DataBank_sortOrder') || 'desc';
     let filterString = '';
@@ -888,9 +943,11 @@ async function openAttachmentManager() {
     const cleanupFn = await renderButtons();
     await verifyAttachments();
     await renderAttachments();
+    addDragAndDrop();
     await callGenericPopup(template, POPUP_TYPE.TEXT, '', { wide: true, large: true, okButton: 'Close' });
 
     cleanupFn();
+    removeDragAndDrop();
 }
 
 /**

public/scripts/extensions/attachments/files-dropped.html

@@ -0,0 +1,8 @@
+<div class="flex-container justifyCenter alignItemsCenter">
+    <span>Save <span class="droppedFilesCount">{{count}}</span> file(s) to...</span>
+    <select class="droppedFilesTarget">
+        {{#each targets}}
+            <option value="{{this}}">{{this}}</option>
+        {{/each}}
+    </select>
+</div>

public/style.css

@@ -2262,6 +2262,11 @@ grammarly-extension {
     }
 }
 
+.dialogue_popup.dragover {
+    filter: brightness(1.1) saturate(1.1);
+    outline: 3px dashed var(--SmartThemeBorderColor);
+}
+
 #bgtest {
     display: none;
     width: 100vw;
@@ -4015,4 +4020,4 @@ body:not(.movingUI) .drawer-content.maximized {
         height: 100vh;
         z-index: 9999;
     }
-}
+}