ENH: module for adding a folder drop area to the webui

src/core/js/uploader_ext.js

+/*
+ * ** header v3.0
+ * This file is a part of the CaosDB Project.
+ *
+ * Copyright (C) 2021 Research Group Biomedical Physics,
+ * Max-Planck-Institute for Dynamics and Self-Organization Göttingen
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ * ** end header
+ */
+
+"use strict";
+
+// Convert callbacks to promise for async programming
+// Strongly inspired by: https://stackoverflow.com/questions/45052875/how-to-convert-fileentry-to-standard-javascript-file-object-using-chrome-apps-fi/53113059
+async function getFileWithPromise(fileEntry) {
+    try {
+        return await new Promise((success, failure) =>
+            fileEntry.file(success, failure));
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+async function readEntriesWithPromise(dreader) {
+    try {
+        return await new Promise((success, failure) =>
+            dreader.readEntries(success, failure));
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+/**
+ * uploader module
+ */
+var uploader = new function() {
+
+    var walkFiles = async function(el, path) {
+        var lst = [];
+        if (el.isFile) {
+            var file = await getFileWithPromise(el);
+            lst.push({file: file, filename: file.name, path: path});
+        } else if (el.isDirectory) {
+            var dreader = el.createReader();
+            var entries = await readEntriesWithPromise(dreader);
+                
+            for (var i=0; i<entries.length; i++) {
+                var fl = await uploader.walkFiles(entries[i], path + el.name + "/");
+                lst = lst.concat(fl);
+            }
+        }
+        return lst;
+    };
+
+    /**
+       lst is a list of the form:
+       [
+       {file: ...,
+        filename: ...,
+        path: ...},
+        ...
+       ]
+       */
+    var sendFiles = async function (lst, rootpath) {
+        var formData = new FormData();
+        // taken from fileupload.js
+        var request = "<Request>";
+        var index = 1;
+        for (const f of lst) {
+            var identifier = "file" + index;
+            // var identifier = f.path + f.filename;
+            request = request + '<File upload="' + identifier + '" name="' + f.filename + '" path="' + rootpath + f.path + f.filename + '">';
+            // if (typeof atom_par !== "undefined" && atom_par !== "FILE") {
+            //     // add parent
+            //     request = request + '<Parent name="' + atom_par + '" />';
+            // }
+            request = request + '</File>';
+            
+            
+            index++;
+        }
+        request = request + "</Request>";
+        
+        formData.append("FileRepresentation", request);
+
+        var index = 1;
+        for (const f of lst) {
+            var identifier = "file" + index;
+            formData.append(identifier, f.file, identifier);
+            index++;
+        }
+
+        console.log(formData);
+
+        try {
+            var response = await $.ajax({
+                url: connection.getBasePath() + "Entity",
+                method: 'POST',
+                dataType: "xml",
+                contentType: false,
+                processData: false,
+                data: formData,
+            });
+        } catch (error) {
+            if (error.status == 0) {
+                console.log(error);
+            } else if (error.status != null) {
+                throw new Error(
+                    "POST file upload returned with HTTP status " + error.status +
+                        " - " + error.statusText);
+            } else {
+                throw error;
+            }
+        }
+    };
+
+    var process_drop_action = async function(lst) {
+        var fileList = [];
+        for (var i=0; i<lst.length; i++) {
+            var el = lst[i].webkitGetAsEntry();
+            if (el) {
+                var fl = await uploader.walkFiles(el, "");
+                fileList = fileList.concat(fl);
+            }
+        }
+        
+        console.log(fileList);
+        uploader.sendFiles(fileList, "/DataAnalysis/");
+    }
+
+    var setup_drop = function(dropArea) {
+        dropArea.addEventListener("drop", function(ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            dropArea.style.border = "1px dotted black";
+            
+            uploader.process_drop_action(ev.dataTransfer.items);
+        }, false);
+        
+        dropArea.addEventListener("dragover", function(ev) {
+            dropArea.style.border = "2px solid black";
+            ev.stopPropagation();
+            ev.preventDefault();
+        });
+        
+        dropArea.addEventListener("dragleave", function(ev) {
+            dropArea.style.border = "1px dotted black";
+            ev.stopPropagation();
+            ev.preventDefault();
+        });
+    };
+
+    var init = function () {
+        var target = $("#top-navbar").find("ul").first();
+        var upload_dropper = $('<li><div id="droparea">Drop files here to upload...</div></li>');
+        upload_dropper[0].style.padding = "12px";
+        upload_dropper[0].style.border = "1px dotted black"
+        $(target).append(upload_dropper);
+
+        uploader.setup_drop(upload_dropper[0]);
+    };
+
+    return {
+        process_drop_action: process_drop_action,
+        sendFiles: sendFiles,
+        setup_drop: setup_drop,
+        walkFiles: walkFiles,
+        init: init
+    };
+}();
+
+
+
+
+
+/**
+ * Add the extensions to the webui.
+ */
+$(document).ready(function() {
+    // if ("${BUILD_MODULE_EXT_BOTTOM_LINE}" == "ENABLED") {
+    caosdb_modules.register(uploader);
+    // }
+});

src/core/xsl/main.xsl

@@ -285,6 +285,12 @@
         <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/ext_bookmarks.js')"/>
       </xsl:attribute>
     </xsl:element>
+
+    <xsl:element name="script">
+      <xsl:attribute name="src">
+        <xsl:value-of select="concat($basepath,'webinterface/${BUILD_NUMBER}/js/uploader_ext.js')"/>
+      </xsl:attribute>
+    </xsl:element>
     <!--JS_EXTENSIONS-->
   </xsl:template>
   <xsl:template name="caosdb-data-container">