Improved drag&drop of local EML files

dev/Common/Folders.js

@@ -9,6 +9,8 @@ import { SettingsUserStore } from 'Stores/User/Settings';
 import { FolderUserStore } from 'Stores/User/Folder';
 import { MessagelistUserStore } from 'Stores/User/Messagelist';
 import { getNotification } from 'Common/Translator';
+import { Settings,  } from 'Common/Globals';
+import { serverRequest } from 'Common/Links';
 
 import Remote from 'Remote/User/Fetch';
 
@@ -281,4 +283,31 @@ moveMessagesToFolder = (sFromFolderFullName, oUids, sToFolderFullName, bCopy) =>
 	}
 
 	return false;
+},
+
+dropFilesInFolder = (sFolderFullName, files) => {
+	let count = 0,
+		fn = () => 0 == --count
+			&& FolderUserStore.currentFolderFullName() == sFolderFullName
+			&& MessagelistUserStore.reload(true, true);
+	for (const file of files) {
+		if ('message/rfc822' === file.type) {
+			++count;
+			let data = new FormData;
+			data.append('Folder', sFolderFullName);
+			data.append('AppendFile', file);
+			data.XToken = Settings.app('token');
+			fetch(serverRequest('Append'), {
+				method: 'POST',
+				mode: 'same-origin',
+				cache: 'no-cache',
+				redirect: 'error',
+				referrerPolicy: 'no-referrer',
+				credentials: 'same-origin',
+				body: data
+			})
+			.then(fn)
+			.catch(fn);
+		}
+	}
 };

dev/External/User/ko.js

@@ -6,14 +6,11 @@ import { doc, elementById, addEventsListeners, dropdowns } from 'Common/Globals'
 import { dropdownsDetectVisibility } from 'Common/UtilsUser';
 import { EmailAddressesComponent } from 'Component/EmailAddresses';
 import { ThemeStore } from 'Stores/Theme';
-import { moveMessagesToFolder } from 'Common/Folders';
+import { moveMessagesToFolder, dropFilesInFolder } from 'Common/Folders';
 import { setExpandedFolder } from 'Model/FolderCollection';
 import { FolderUserStore } from 'Stores/User/Folder';
 import { MessagelistUserStore } from 'Stores/User/Messagelist';
 
-import { Settings } from 'Common/Globals';
-import { serverRequest } from 'Common/Links';
-
 const rlContentType = 'snappymail/action',
 
 	// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
@@ -66,32 +63,7 @@ const rlContentType = 'snappymail/action',
 		if (dragMessages() && 'copyMove' == e.dataTransfer.effectAllowed) {
 			moveMessagesToFolder(FolderUserStore.currentFolderFullName(), dragData.data, folder.fullName, e.ctrlKey);
 		} else if (e.dataTransfer.types.includes('Files')) {
-			let files = 0,
+			dropFilesInFolder(folder.fullName, e.dataTransfer.files);
-				fn = () => {
-					0 == --files
-					&& FolderUserStore.currentFolderFullName() == folder.fullName
-					&& MessagelistUserStore.reload(true, true);
-				};
-			for (const file of e.dataTransfer.files) {
-				if ('message/rfc822' === file.type) {
-					++files;
-					let data = new FormData;
-					data.append('Folder', folder.fullName);
-					data.append('AppendFile', file);
-					data.XToken = Settings.app('token');
-					fetch(serverRequest('Append'), {
-						method: 'POST',
-						mode: 'same-origin',
-						cache: 'no-cache',
-						redirect: 'error',
-						referrerPolicy: 'no-referrer',
-						credentials: 'same-origin',
-						body: data
-					})
-					.then(fn)
-					.catch(fn);
-				}
-			}
 		}
 	},
 

dev/View/User/MailBox/MessageList.js

@@ -14,11 +14,13 @@ import { computedPaginatorHelper, showMessageComposer, populateMessageBody } fro
 import { FileInfo } from 'Common/File';
 import { isFullscreen, toggleFullscreen } from 'Common/Fullscreen';
 
-import { mailBox, serverRequest } from 'Common/Links';
+import { mailBox } from 'Common/Links';
 import { Selector } from 'Common/Selector';
 
 import { i18n } from 'Common/Translator';
 
+import { dropFilesInFolder } from 'Common/Folders';
+
 import {
 	getFolderFromCacheList,
 	MessageFlagsCache
@@ -507,33 +509,53 @@ export class MailMessageList extends AbstractViewRight {
 		// initUploaderForAppend
 
 		if (Settings.app('allowAppendMessage')) {
-			const oJua = new Jua({
+			const dropZone = dom.querySelector('.listDragOver'),
-				action: serverRequest('Append'),
+				validFiles = oEvent => {
-				name: 'AppendFile',
+					for (const item of oEvent.dataTransfer.items) {
-				limit: 1,
+						if ('file' === item.kind && 'message/rfc822' === item.type) {
-				hidden: {
+							return true;
-					Folder: () => FolderUserStore.currentFolderFullName()
+						}
-				},
-				dragAndDropElement: dom.querySelector('.listDragOver'),
-				dragAndDropBodyElement: b_content
-			});
-
-			this.dragOver.subscribe(value => value && this.selector.scrollToTop());
-
-			oJua
-				.on('onDragEnter', () => this.dragOverEnter(true))
-				.on('onDragLeave', () => this.dragOverEnter(false))
-				.on('onBodyDragEnter', () => this.dragOver(true))
-				.on('onBodyDragLeave', () => this.dragOver(false))
-				.on('onSelect', (sUid, oData) => {
-					if (sUid && oData && 'message/rfc822' === oData.Type) {
-						MessagelistUserStore.loading(true);
-						return true;
 					}
-
+				};
-					return false;
+			addEventsListeners(dropZone, {
-				})
+				dragover: oEvent => {
-				.on('onComplete', () => MessagelistUserStore.reload(true, true));
+					if (validFiles(oEvent)) {
+						oEvent.dataTransfer.dropEffect = 'copy';
+						oEvent.preventDefault();
+					}
+				},
+			});
+			addEventsListeners(b_content, {
+				dragenter: oEvent => {
+					if (validFiles(oEvent)) {
+						if (b_content.contains(oEvent.target)) {
+							this.dragOver(true);
+						}
+						if (oEvent.target == dropZone) {
+							oEvent.dataTransfer.dropEffect = 'copy';
+							this.dragOverEnter(true);
+						}
+					}
+				},
+				dragleave: oEvent => {
+					if (oEvent.target == dropZone) {
+						this.dragOverEnter(false);
+					}
+					let related = oEvent.relatedTarget;
+					if (!related || !b_content.contains(related)) {
+						this.dragOver(false);
+					}
+				},
+				drop: oEvent => {
+					oEvent.preventDefault();
+					if (oEvent.target == dropZone && validFiles(oEvent)) {
+						MessagelistUserStore.loading(true);
+						dropFilesInFolder(FolderUserStore.currentFolderFullName(), oEvent.dataTransfer.files);
+					}
+					this.dragOverEnter(false);
+					this.dragOver(false);
+				}
+			});
 		}
 
 		// initShortcuts