drag & drop now uses import code

src/public/javascripts/desktop.js

@@ -8,6 +8,7 @@ import optionsDialog from './dialogs/options.js';
 import sqlConsoleDialog from './dialogs/sql_console.js';
 import markdownImportDialog from './dialogs/markdown_import.js';
 import exportDialog from './dialogs/export.js';
+import importDialog from './dialogs/import.js';
 
 import cloning from './services/cloning.js';
 import contextMenu from './services/tree_context_menu.js';
@@ -138,6 +139,8 @@ $('[data-toggle="tooltip"]').tooltip({
     html: true
 });
 
+$("#import-files-button").click(importDialog.showDialog);
+
 macInit.init();
 
 searchNotesService.init(); // should be in front of treeService since that one manipulates address bar hash

src/public/javascripts/dialogs/import.js

@@ -26,10 +26,10 @@ async function showDialog() {
     $importProgressCount.text('0');
     $fileUploadInput.val('').change(); // to trigger Import button disabling listener below
 
-    $safeImportCheckbox.attr("checked", "checked");
-    $shrinkImagesCheckbox.attr("checked", "checked");
-    $textImportedAsTextCheckbox.attr("checked", "checked");
-    $codeImportedAsCodeCheckbox.attr("checked", "checked");
+    $safeImportCheckbox.prop("checked", true);
+    $shrinkImagesCheckbox.prop("checked", true);
+    $textImportedAsTextCheckbox.prop("checked", true);
+    $codeImportedAsCodeCheckbox.prop("checked", true);
 
     glob.activeDialog = $dialog;
 
@@ -57,21 +57,29 @@ async function importIntoNote(importNoteId) {
     // dialog (which shouldn't happen, but still ...)
     importId = utils.randomString(10);
 
-    const safeImport = boolToString($safeImportCheckbox);
-    const shrinkImages = boolToString($shrinkImagesCheckbox);
-    const textImportedAsText = boolToString($textImportedAsTextCheckbox);
-    const codeImportedAsCode = boolToString($codeImportedAsCodeCheckbox);
+    const options = {
+        safeImport: boolToString($safeImportCheckbox),
+        shrinkImages: boolToString($shrinkImagesCheckbox),
+        textImportedAsText: boolToString($textImportedAsTextCheckbox),
+        codeImportedAsCode: boolToString($codeImportedAsCodeCheckbox)
+    };
 
+    await uploadFiles(importNoteId, files, options);
+
+    $dialog.modal('hide');
+}
+
+async function uploadFiles(importNoteId, files, options) {
     let noteId;
 
     for (const file of files) {
         const formData = new FormData();
         formData.append('upload', file);
         formData.append('importId', importId);
-        formData.append('safeImport', safeImport);
-        formData.append('shrinkImages', shrinkImages);
-        formData.append('textImportedAsText', textImportedAsText);
-        formData.append('codeImportedAsCode', codeImportedAsCode);
+        formData.append('safeImport', options.safeImport);
+        formData.append('shrinkImages', options.shrinkImages);
+        formData.append('textImportedAsText', options.textImportedAsText);
+        formData.append('codeImportedAsCode', options.codeImportedAsCode);
 
         ({noteId} = await $.ajax({
             url: baseApiUrl + 'notes/' + importNoteId + '/import',
@@ -82,13 +90,9 @@ async function importIntoNote(importNoteId) {
             timeout: 60 * 60 * 1000,
             contentType: false, // NEEDED, DON'T REMOVE THIS
             processData: false, // NEEDED, DON'T REMOVE THIS
-        })
-        // we actually ignore the error since it can be caused by HTTP timeout and use WS messages instead.
-            .fail((xhr, status, error) => {}));
+        }));
     }
 
-    $dialog.modal('hide');
-
     infoService.showMessage("Import finished successfully.");
 
     await treeService.reload();
@@ -133,5 +137,6 @@ $fileUploadInput.change(() => {
 });
 
 export default {
-    showDialog
+    showDialog,
+    uploadFiles
 }

src/public/javascripts/services/drag_and_drop.js

@@ -1,6 +1,6 @@
 import treeService from './tree.js';
 import treeChangesService from './branches.js';
-import fileService from '../services/file.js';
+import importDialog from '../dialogs/import.js';
 
 const dragAndDropSetup = {
     autoExpandMS: 600,
@@ -38,7 +38,12 @@ const dragAndDropSetup = {
         const dataTransfer = data.dataTransfer;
 
         if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
-            fileService.uploadFiles(node.data.noteId, dataTransfer.files);
+            importDialog.uploadFiles(node.data.noteId, dataTransfer.files, {
+                safeImport: true,
+                shrinkImages: true,
+                textImportedAsText: true,
+                codeImportedAsCode: true
+            });
         }
         else {
             // This function MUST be defined to enable dropping of items on the tree.

src/public/javascripts/services/entrypoints.js

@@ -1,7 +1,6 @@
 import utils from "./utils.js";
 import treeService from "./tree.js";
 import linkService from "./link.js";
-import fileService from "./file.js";
 import zoomService from "./zoom.js";
 import noteRevisionsDialog from "../dialogs/note_revisions.js";
 import optionsDialog from "../dialogs/options.js";
@@ -160,8 +159,6 @@ function registerEntrypoints() {
     }
 
     $("#note-title").bind('keydown', 'return', () => $("#note-detail-text").focus());
-
-    $("#upload-file-button").click(fileService.openUploadFileDialog);
 }
 
 export default {

src/public/javascripts/services/file.js

@@ -1,47 +0,0 @@
-import noteDetailService from "./note_detail.js";
-import treeService from "./tree.js";
-import server from "./server.js";
-
-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 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 {
-    openUploadFileDialog,
-    uploadFiles
-}

src/views/desktop.ejs

@@ -195,7 +195,7 @@
                             <a class="dropdown-item" id="show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
                             <a class="dropdown-item show-attributes-button"><kbd>Alt+A</kbd> Attributes</a>
                             <a class="dropdown-item" id="show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">Note source</a>
-                            <a class="dropdown-item" id="upload-file-button">Upload file</a>
+                            <a class="dropdown-item" id="import-files-button">Import files</a>
                             <a class="dropdown-item" id="export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
                             <a class="dropdown-item" id="show-note-info-button">Note info</a>
                         </div>

src/views/details/detail.ejs

@@ -9,7 +9,6 @@
         <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" multiple style="display: none" />
 
         <% include search.ejs %>