drag & drop multi file upload to note tree

src/entities/note.js

@@ -13,6 +13,8 @@ const LABEL_DEFINITION = 'label-definition';
 const RELATION = 'relation';
 const RELATION_DEFINITION = 'relation-definition';
 
+const STRING_MIME_TYPES = ["application/x-javascript"];
+
 /**
  * This represents a Note which is a central object in the Trilium Notes project.
  *
@@ -132,7 +134,9 @@ class Note extends Entity {
 
     /** @returns {boolean} true if the note has string content (not binary) */
     isStringNote() {
-        return ["text", "code", "relation-map", "search"].includes(this.type) || this.mime.startsWith('text/');
+        return ["text", "code", "relation-map", "search"].includes(this.type)
+            || this.mime.startsWith('text/')
+            || STRING_MIME_TYPES.includes(this.mime);
     }
 
     /** @returns {string} JS script environment - either "frontend" or "backend" */

src/public/javascripts/services/drag_and_drop.js

@@ -1,5 +1,6 @@
 import treeService from './tree.js';
 import treeChangesService from './branches.js';
+import fileService from '../services/file.js';
 
 const dragAndDropSetup = {
     autoExpandMS: 600,
@@ -32,23 +33,28 @@ const dragAndDropSetup = {
         return true;
     },
     dragEnter: (node, data) => true, // allow drop on any node
+    dragOver: (node, data) => true,
     dragDrop: (node, data) => {
-        // This function MUST be defined to enable dropping of items on the tree.
-        // data.hitMode is 'before', 'after', or 'over'.
+        const dataTransfer = data.dataTransfer;
 
-        const selectedNodes = treeService.getSelectedNodes();
-
-        if (data.hitMode === "before") {
-            treeChangesService.moveBeforeNode(selectedNodes, node);
-        }
-        else if (data.hitMode === "after") {
-            treeChangesService.moveAfterNode(selectedNodes, node);
-        }
-        else if (data.hitMode === "over") {
-            treeChangesService.moveToNode(selectedNodes, node);
+        if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
+            fileService.uploadFiles(node.data.noteId, dataTransfer.files);
         }
         else {
-            throw new Error("Unknown hitMode=" + data.hitMode);
+            // This function MUST be defined to enable dropping of items on the tree.
+            // data.hitMode is 'before', 'after', or 'over'.
+
+            const selectedNodes = treeService.getSelectedNodes();
+
+            if (data.hitMode === "before") {
+                treeChangesService.moveBeforeNode(selectedNodes, node);
+            } else if (data.hitMode === "after") {
+                treeChangesService.moveAfterNode(selectedNodes, node);
+            } else if (data.hitMode === "over") {
+                treeChangesService.moveToNode(selectedNodes, node);
+            } else {
+                throw new Error("Unknown hitMode=" + data.hitMode);
+            }
         }
     }
 };

src/public/javascripts/services/entrypoints.js

@@ -161,7 +161,7 @@ function registerEntrypoints() {
 
     $("#note-title").bind('keydown', 'return', () => $("#note-detail-text").focus());
 
-    $("#upload-file-button").click(fileService.uploadFile);
+    $("#upload-file-button").click(fileService.openUploadFileDialog);
 }
 
 export default {

src/public/javascripts/services/file.js

@@ -2,32 +2,46 @@ import noteDetailService from "./note_detail.js";
 import treeService from "./tree.js";
 import server from "./server.js";
 
-function uploadFile() {
+function openUploadFileDialog() {
     $("#file-upload").trigger('click');
 }
 
+async function uploadFiles(parentNoteId, files) {
+    let noteId;
+
+    for (const file of files) {
+        const formData = new FormData();
+        formData.append('upload', file);
+
+        const resp = await $.ajax({
+            url: baseApiUrl + 'notes/' + parentNoteId + '/upload',
+            headers: server.getHeaders(),
+            data: formData,
+            type: 'POST',
+            contentType: false, // NEEDED, DON'T OMIT THIS
+            processData: false, // NEEDED, DON'T OMIT THIS
+        });
+
+        noteId = resp.noteId;
+    }
+
+    await treeService.reload();
+
+    await treeService.activateNote(noteId);
+}
+
 $("#file-upload").change(async function() {
-    const formData = new FormData();
-    formData.append('upload', this.files[0]);
+    const files = Array.from(this.files); // clone since we'll reset it just below
 
     // this is done to reset the field otherwise triggering import same file again would not work
     // https://github.com/zadam/trilium/issues/388
     $("#file-upload").val('');
 
-    const resp = await $.ajax({
-        url: baseApiUrl + 'notes/' + noteDetailService.getCurrentNoteId() + '/upload',
-        headers: server.getHeaders(),
-        data: formData,
-        type: 'POST',
-        contentType: false, // NEEDED, DON'T OMIT THIS
-        processData: false, // NEEDED, DON'T OMIT THIS
-    });
-
-    await treeService.reload();
-
-    await treeService.activateNote(resp.noteId);
+    const parentNoteId = noteDetailService.getCurrentNoteId();
+    await uploadFiles(parentNoteId, files);
 });
 
 export default {
-    uploadFile
+    openUploadFileDialog,
+    uploadFiles
 }

src/public/javascripts/services/note_detail_file.js

@@ -27,8 +27,13 @@ async function show() {
     $fileSize.text((attributeMap.fileSize || "?") + " bytes");
     $fileType.text(currentNote.mime);
 
-    $previewRow.toggle(!!currentNote.noteContent.content);
-    $previewContent.text(currentNote.noteContent.content);
+    if (currentNote.noteContent && currentNote.noteContent.content) {
+        $previewRow.show();
+        $previewContent.text(currentNote.noteContent.content);
+    }
+    else {
+        $previewRow.hide();
+    }
 }
 
 $downloadButton.click(() => utils.download(getFileUrl()));

src/views/details/detail.ejs

@@ -9,7 +9,7 @@
         <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
 
         <div id="note-detail-code" class="note-detail-component"></div>
-        <input type="file" id="file-upload" style="display: none" />
+        <input type="file" id="file-upload" multiple style="display: none" />
 
         <% include search.ejs %>