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,7 +33,14 @@ const dragAndDropSetup = {
         return true;
     },
     dragEnter: (node, data) => true, // allow drop on any node
+    dragOver: (node, data) => true,
     dragDrop: (node, data) => {
+        const dataTransfer = data.dataTransfer;
+
+        if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
+            fileService.uploadFiles(node.data.noteId, dataTransfer.files);
+        }
+        else {
             // This function MUST be defined to enable dropping of items on the tree.
             // data.hitMode is 'before', 'after', or 'over'.
 
@@ -40,17 +48,15 @@ const dragAndDropSetup = {
 
             if (data.hitMode === "before") {
                 treeChangesService.moveBeforeNode(selectedNodes, node);
-        }
-        else if (data.hitMode === "after") {
+            } else if (data.hitMode === "after") {
                 treeChangesService.moveAfterNode(selectedNodes, node);
-        }
-        else if (data.hitMode === "over") {
+            } else if (data.hitMode === "over") {
                 treeChangesService.moveToNode(selectedNodes, node);
-        }
-        else {
+            } else {
                 throw new Error("Unknown hitMode=" + data.hitMode);
             }
         }
+    }
 };
 
 export default dragAndDropSetup;

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,20 +2,19 @@ import noteDetailService from "./note_detail.js";
 import treeService from "./tree.js";
 import server from "./server.js";
 
-function uploadFile() {
+function openUploadFileDialog() {
     $("#file-upload").trigger('click');
 }
 
-$("#file-upload").change(async function() {
-    const formData = new FormData();
-    formData.append('upload', this.files[0]);
+async function uploadFiles(parentNoteId, files) {
+    let noteId;
 
-    // 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('');
+    for (const file of files) {
+        const formData = new FormData();
+        formData.append('upload', file);
 
         const resp = await $.ajax({
-        url: baseApiUrl + 'notes/' + noteDetailService.getCurrentNoteId() + '/upload',
+            url: baseApiUrl + 'notes/' + parentNoteId + '/upload',
             headers: server.getHeaders(),
             data: formData,
             type: 'POST',
@@ -23,11 +22,26 @@ $("#file-upload").change(async function() {
             processData: false, // NEEDED, DON'T OMIT THIS
         });
 
+        noteId = resp.noteId;
+    }
+
     await treeService.reload();
 
-    await treeService.activateNote(resp.noteId);
+    await treeService.activateNote(noteId);
+}
+
+$("#file-upload").change(async function() {
+    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 parentNoteId = noteDetailService.getCurrentNoteId();
+    await uploadFiles(parentNoteId, files);
 });
 
 export default {
-    uploadFile
+    openUploadFileDialog,
+    uploadFiles
 }

src/public/javascripts/services/note_detail_file.js

@@ -27,9 +27,14 @@ async function show() {
     $fileSize.text((attributeMap.fileSize || "?") + " bytes");
     $fileType.text(currentNote.mime);
 
-    $previewRow.toggle(!!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 %>