attachment preview, closes #210

src/public/javascripts/services/note_detail_file.js

@@ -8,6 +8,8 @@ const $component = $('#note-detail-file');
 const $fileName = $("#file-filename");
 const $fileType = $("#file-filetype");
 const $fileSize = $("#file-filesize");
+const $previewRow = $("#file-preview-row");
+const $previewContent = $("#file-preview-content");
 const $downloadButton = $("#file-download");
 const $openButton = $("#file-open");
 
@@ -22,6 +24,9 @@ async function show() {
     $fileName.text(attributeMap.originalFileName || "?");
     $fileSize.text((attributeMap.fileSize || "?") + " bytes");
     $fileType.text(currentNote.mime);
+
+    $previewRow.toggle(!!currentNote.content);
+    $previewContent.text(currentNote.content);
 }
 
 $downloadButton.click(() => utils.download(getFileUrl()));

src/public/stylesheets/style.css

@@ -463,6 +463,14 @@ html.theme-dark body {
     max-width: 100%;
 }
 
+#file-preview-content {
+    background-color: #f6f6f6;
+    padding: 15px;
+    max-width: 600px;
+    max-height: 300px;
+    overflow: auto;
+}
+
 .pointer {
     cursor: pointer;
 }

src/routes/api/notes.js

@@ -13,9 +13,18 @@ async function getNote(req) {
     }
 
     if (note.type === 'file' || note.type === 'image') {
+        if (note.type === 'file' && note.mime.startsWith('text/')) {
+            note.content = note.content.toString("UTF-8");
+
+            if (note.content.length > 10000) {
+                note.content = note.content.substr(0, 10000) + "...";
+            }
+        }
+        else {
             // no need to transfer (potentially large) file/image payload for this request
             note.content = null;
         }
+    }
 
     return note;
 }

src/views/details/file.ejs

@@ -12,6 +12,12 @@
             <th>File size:</th>
             <td id="file-filesize"></td>
         </tr>
+        <tr id="file-preview-row">
+            <th>Preview:</th>
+            <td>
+                <pre id="file-preview-content"></pre>
+            </td>
+        </tr>
         <tr>
             <td>
                 <button id="file-download" class="btn btn-primary" type="button">Download</button>