Merge pull request #17878 from Chocobo1/webui

WebUI: handle drag and drop events

src/webui/www/private/scripts/client.js

@@ -128,7 +128,6 @@ const qbtVersion = function() {
 };
 
 window.addEvent('load', function() {
-
     const saveColumnSizes = function() {
         const filters_width = $('Filters').getSize().x;
         const properties_height_rel = $('propertiesPanel').getSize().y / Window.getSize().y;
@@ -1187,6 +1186,98 @@ window.addEvent('load', function() {
     $('searchTabLink').addEvent('click', showSearchTab);
     $('rssTabLink').addEvent('click', showRssTab);
     updateTabDisplay();
+
+    const registerDragAndDrop = () => {
+        $('desktop').addEventListener('dragover', (ev) => {
+            if (ev.preventDefault)
+                ev.preventDefault();
+        });
+
+        $('desktop').addEventListener('dragenter', (ev) => {
+            if (ev.preventDefault)
+                ev.preventDefault();
+        });
+
+        $('desktop').addEventListener("drop", (ev) => {
+            if (ev.preventDefault)
+                ev.preventDefault();
+
+            const droppedFiles = ev.dataTransfer.files;
+
+            if (droppedFiles.length > 0) {
+                // dropped files or folders
+
+                // can't handle folder due to cannot put the filelist (from dropped folder)
+                // to <input> `files` field
+                for (const item of ev.dataTransfer.items) {
+                    if (item.webkitGetAsEntry().isDirectory)
+                        return;
+                }
+
+                const id = 'uploadPage';
+                new MochaUI.Window({
+                    id: id,
+                    title: "QBT_TR(Upload local torrent)QBT_TR[CONTEXT=HttpServer]",
+                    loadMethod: 'iframe',
+                    contentURL: new URI("upload.html").toString(),
+                    addClass: 'windowFrame', // fixes iframe scrolling on iOS Safari
+                    scrollbars: true,
+                    maximizable: false,
+                    paddingVertical: 0,
+                    paddingHorizontal: 0,
+                    width: loadWindowWidth(id, 500),
+                    height: loadWindowHeight(id, 460),
+                    onResize: () => {
+                        saveWindowSize(id);
+                    },
+                    onContentLoaded: () => {
+                        const fileInput = $(`${id}_iframe`).contentDocument.getElementById('fileselect');
+                        fileInput.files = droppedFiles;
+                    }
+                });
+            }
+
+            const droppedText = ev.dataTransfer.getData("text");
+            if (droppedText.length > 0) {
+                // dropped text
+
+                const urls = droppedText.split('\n')
+                    .map((str) => str.trim())
+                    .filter((str) => {
+                        const lowercaseStr = str.toLowerCase();
+                        return lowercaseStr.startsWith("http:")
+                            || lowercaseStr.startsWith("https:")
+                            || lowercaseStr.startsWith("magnet:")
+                            || ((str.length === 40) && !(/[^0-9A-Fa-f]/.test(str))) // v1 hex-encoded SHA-1 info-hash
+                            || ((str.length === 32) && !(/[^2-7A-Za-z]/.test(str))); // v1 Base32 encoded SHA-1 info-hash
+                    });
+
+                if (urls.length <= 0)
+                    return;
+
+                const id = 'downloadPage';
+                const contentURI = new URI('download.html').setData("urls", urls.map(encodeURIComponent).join("|"));
+                new MochaUI.Window({
+                    id: id,
+                    title: "QBT_TR(Download from URLs)QBT_TR[CONTEXT=downloadFromURL]",
+                    loadMethod: 'iframe',
+                    contentURL: contentURI.toString(),
+                    addClass: 'windowFrame', // fixes iframe scrolling on iOS Safari
+                    scrollbars: true,
+                    maximizable: false,
+                    closable: true,
+                    paddingVertical: 0,
+                    paddingHorizontal: 0,
+                    width: loadWindowWidth(id, 500),
+                    height: loadWindowHeight(id, 600),
+                    onResize: () => {
+                        saveWindowSize(id);
+                    }
+                });
+            }
+        });
+    };
+    registerDragAndDrop();
 });
 
 function registerMagnetHandler() {

src/webui/www/private/upload.html

@@ -14,7 +14,7 @@
     <iframe id="upload_frame" name="upload_frame" class="invisible" src="about:blank"></iframe>
     <form action="api/v2/torrents/add" enctype="multipart/form-data" method="post" id="uploadForm" style="text-align: center;" target="upload_frame" autocorrect="off" autocapitalize="none">
         <div style="margin-top: 25px; display: inline-block; border: 1px solid lightgrey; border-radius: 4px;">
-            <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
+            <input type="file" id="fileselect" accept="application/x-bittorrent, .torrent" name="fileselect[]" multiple />
         </div>
         <fieldset class="settings" style="border: 0; text-align: left; margin-top: 12px;">
             <table style="margin: auto;">