render PDF preview in electron for pdf notes

src/public/javascripts/widgets/type_widgets/file.js

@@ -9,30 +9,30 @@ const TPL = `
         <tr>
             <th nowrap>Note ID:</th>
             <td class="file-note-id"></td>
-        </tr>
-        <tr>
             <th nowrap>Original file name:</th>
             <td class="file-filename"></td>
         </tr>
         <tr>
             <th nowrap>File type:</th>
             <td class="file-filetype"></td>
-        </tr>
-        <tr>
             <th nowrap>File size:</th>
             <td class="file-filesize"></td>
         </tr>
     </table>
     
     <pre class="file-preview-content"></pre>
+    
+    <iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>
 
-    <button class="file-download btn btn-sm btn-primary" type="button">Download</button>
+    <div style="padding: 10px; display: flex; justify-content: space-evenly;">
-    &nbsp;
+        <button class="file-download btn btn-sm btn-primary" type="button">Download</button>
-    <button class="file-open btn btn-sm btn-primary" type="button">Open</button>
+        &nbsp;
-    &nbsp;
+        <button class="file-open btn btn-sm btn-primary" type="button">Open</button>
-    <button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
+        &nbsp;
-
+        <button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
-    <input type="file" class="file-upload-new-revision-input" style="display: none">
+    
+        <input type="file" class="file-upload-new-revision-input" style="display: none">
+    </div>
 </div>`;
 
 export default class FileTypeWidget extends TypeWidget {
@@ -45,6 +45,7 @@ export default class FileTypeWidget extends TypeWidget {
         this.$fileType = this.$widget.find(".file-filetype");
         this.$fileSize = this.$widget.find(".file-filesize");
         this.$previewContent = this.$widget.find(".file-preview-content");
+        this.$pdfPreview = this.$widget.find(".pdf-preview");
         this.$downloadButton = this.$widget.find(".file-download");
         this.$openButton = this.$widget.find(".file-open");
         this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
@@ -110,12 +111,16 @@ export default class FileTypeWidget extends TypeWidget {
 
         const noteComplement = await this.tabContext.getNoteComplement();
 
+        this.$previewContent.empty().hide();
+        this.$pdfPreview.attr('src', '').empty().hide();
+
         if (noteComplement.content) {
             this.$previewContent.show();
             this.$previewContent.text(noteComplement.content);
         }
-        else {
+        else if (note.mime === 'application/pdf' && utils.isElectron()) {
-            this.$previewContent.empty().hide();
+            this.$pdfPreview.show();
+            this.$pdfPreview.attr("src", utils.getUrlForDownload("api/notes/" + this.noteId + "/open"));
         }
 
         // open doesn't work for protected notes since it works through browser which isn't in protected session

src/public/stylesheets/detail.css

@@ -76,6 +76,9 @@
 
 .note-detail-file {
     padding: 10px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .file-table th, .file-table td {

src/routes/api/files.js

@@ -31,7 +31,7 @@ async function updateFile(req) {
     };
 }
 
-async function downloadNoteFile(noteId, res) {
+async function downloadNoteFile(noteId, res, contentDisposition = true) {
     const note = await repository.getNote(noteId);
 
     if (!note) {
@@ -42,9 +42,12 @@ async function downloadNoteFile(noteId, res) {
         return res.status(401).send("Protected session not available");
     }
 
-    // (one) reason we're not using the originFileName (available as label) is that it's not
+    if (contentDisposition) {
-    // available for older note revisions and thus would be inconsistent
+        // (one) reason we're not using the originFileName (available as label) is that it's not
-    res.setHeader('Content-Disposition', utils.getContentDisposition(note.title || "untitled"));
+        // available for older note revisions and thus would be inconsistent
+        res.setHeader('Content-Disposition', utils.getContentDisposition(note.title || "untitled"));
+    }
+
     res.setHeader('Content-Type', note.mime);
 
     res.send(await note.getContent());
@@ -54,11 +57,17 @@ async function downloadFile(req, res) {
     const noteId = req.params.noteId;
 
     return await downloadNoteFile(noteId, res);
+}
 
+async function openFile(req, res) {
+    const noteId = req.params.noteId;
+
+    return await downloadNoteFile(noteId, res, false);
 }
 
 module.exports = {
     updateFile,
+    openFile,
     downloadFile,
     downloadNoteFile
 };

src/routes/routes.js

@@ -156,6 +156,7 @@ function register(app) {
     route(PUT, '/api/notes/:noteId/file', [auth.checkApiAuthOrElectron, uploadMiddleware, csrfMiddleware],
         filesRoute.updateFile, apiResultHandler);
 
+    route(GET, '/api/notes/:noteId/open', [auth.checkApiAuthOrElectron], filesRoute.openFile);
     route(GET, '/api/notes/:noteId/download', [auth.checkApiAuthOrElectron], filesRoute.downloadFile);
     // this "hacky" path is used for easier referencing of CSS resources
     route(GET, '/api/notes/download/:noteId', [auth.checkApiAuthOrElectron], filesRoute.downloadFile);