uploaded attachments with image mime are saved as image notes, closes #211

src/public/javascripts/services/note_detail_file.js

@@ -5,11 +5,11 @@ import noteDetailService from "./note_detail.js";
 
 const $component = $('#note-detail-file');
 
-const $fileFileName = $("#file-filename");
-const $fileFileType = $("#file-filetype");
-const $fileFileSize = $("#file-filesize");
-const $fileDownload = $("#file-download");
-const $fileOpen = $("#file-open");
+const $fileName = $("#file-filename");
+const $fileType = $("#file-filetype");
+const $fileSize = $("#file-filesize");
+const $downloadButton = $("#file-download");
+const $openButton = $("#file-open");
 
 async function show() {
     const currentNote = noteDetailService.getCurrentNote();
@@ -19,14 +19,14 @@ async function show() {
 
     $component.show();
 
-    $fileFileName.text(attributeMap.originalFileName);
-    $fileFileSize.text(attributeMap.fileSize + " bytes");
-    $fileFileType.text(currentNote.mime);
+    $fileName.text(attributeMap.originalFileName);
+    $fileSize.text(attributeMap.fileSize + " bytes");
+    $fileType.text(currentNote.mime);
 }
 
-$fileDownload.click(() => utils.download(getFileUrl()));
+$downloadButton.click(() => utils.download(getFileUrl()));
 
-$fileOpen.click(() => {
+$openButton.click(() => {
     if (utils.isElectron()) {
         const open = require("open");
 

src/public/javascripts/services/note_detail_image.js

@@ -2,22 +2,33 @@ import utils from "./utils.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import noteDetailService from "./note_detail.js";
 import infoService from "./info.js";
+import server from "./server.js";
 
 const $component = $('#note-detail-image');
 const $imageView = $('#note-detail-image-view');
 
-const $imageDownload = $("#image-download");
-const $copyToClipboardDownload = $("#image-copy-to-clipboard");
+const $imageDownloadButton = $("#image-download");
+const $copyToClipboardButton = $("#image-copy-to-clipboard");
+const $fileName = $("#image-filename");
+const $fileType = $("#image-filetype");
+const $fileSize = $("#image-filesize");
 
 async function show() {
     const currentNote = noteDetailService.getCurrentNote();
 
+    const attributes = await server.get('notes/' + currentNote.noteId + '/attributes');
+    const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);
+
     $component.show();
 
+    $fileName.text(attributeMap.originalFileName);
+    $fileSize.text(attributeMap.fileSize + " bytes");
+    $fileType.text(currentNote.mime);
+
     $imageView.prop("src", `/api/images/${currentNote.noteId}/${currentNote.title}`);
 }
 
-$imageDownload.click(() => utils.download(getFileUrl()));
+$imageDownloadButton.click(() => utils.download(getFileUrl()));
 
 function selectImage(element) {
     const selection = window.getSelection();
@@ -27,7 +38,7 @@ function selectImage(element) {
     selection.addRange(range);
 }
 
-$copyToClipboardDownload.click(() => {
+$copyToClipboardButton.click(() => {
     $component.attr('contenteditable','true');
 
     try {

src/public/stylesheets/style.css

@@ -455,6 +455,14 @@ html.theme-dark body {
     padding: 5px;
 }
 
+#note-detail-image {
+    text-align: center;
+}
+
+#note-detail-image-view {
+    max-width: 100%;
+}
+
 .pointer {
     cursor: pointer;
 }

src/routes/api/file_upload.js

@@ -1,7 +1,6 @@
 "use strict";
 
 const noteService = require('../../services/notes');
-const attributeService = require('../../services/attributes');
 const protectedSessionService = require('../../services/protected_session');
 const repository = require('../../services/repository');
 
@@ -10,6 +9,7 @@ async function uploadFile(req) {
     const file = req.file;
     const originalName = file.originalname;
     const size = file.size;
+    const mime = file.mimetype.toLowerCase();
 
     const parentNote = await repository.getNote(parentNoteId);
 
@@ -17,18 +17,17 @@ async function uploadFile(req) {
         return [404, `Note ${parentNoteId} doesn't exist.`];
     }
 
-    const {note} = await noteService.createNewNote(parentNoteId, {
-        title: originalName,
-        content: file.buffer,
+    const {note} = await noteService.createNote(parentNoteId, originalName, file.buffer, {
         target: 'into',
-        isProtected: false,
-        type: 'file',
-        mime: file.mimetype
+        isProtected: parentNote.isProtected && protectedSessionService.isProtectedSessionAvailable(),
+        type: mime.startsWith("image/") ? 'image' : 'file',
+        mime: file.mimetype,
+        attributes: [
+            { type: "label", name: "originalFileName", value: originalName },
+            { type: "label", name: "fileSize", value: size }
+        ]
     });
 
-    await attributeService.createLabel(note.noteId, "originalFileName", originalName);
-    await attributeService.createLabel(note.noteId, "fileSize", size);
-
     return {
         noteId: note.noteId
     };

src/services/image.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const utils = require('./utils');
+const repository = require('./repository');
+const protectedSessionService = require('./protected_session');
 const noteService = require('./notes');
 const imagemin = require('imagemin');
 const imageminMozJpeg = require('imagemin-mozjpeg');
@@ -10,21 +11,26 @@ const jimp = require('jimp');
 const imageType = require('image-type');
 const sanitizeFilename = require('sanitize-filename');
 
-async function saveImage(buffer, originalName, noteId) {
+async function saveImage(buffer, originalName, parentNoteId) {
     const resizedImage = await resize(buffer);
     const optimizedImage = await optimize(resizedImage);
 
     const imageFormat = imageType(optimizedImage);
 
+    const parentNote = await repository.getNote(parentNoteId);
+
     const fileNameWithoutExtension = originalName.replace(/\.[^/.]+$/, "");
     const fileName = sanitizeFilename(fileNameWithoutExtension + "." + imageFormat.ext);
 
-    const {note} = await noteService.createNewNote(noteId, {
+    const {note} = await noteService.createNote(parentNoteId, fileName, optimizedImage, {
         target: 'into',
-        title: fileName,
-        content: optimizedImage,
         type: 'image',
-        mime: 'image/' + imageFormat.ext
+        isProtected: parentNote.isProtected && protectedSessionService.isProtectedSessionAvailable(),
+        mime: 'image/' + imageFormat.ext.toLowerCase(),
+        attributes: [
+            { type: 'label', name: 'originalFileName', value: originalName },
+            { type: 'label', name: 'fileSize', value: optimizedImage.byteLength }
+        ]
     });
 
     return {

src/views/details/image.ejs

@@ -1,11 +1,26 @@
 <div id="note-detail-image" class="note-detail-component">
-    <img id="note-detail-image-view" />
+    <strong>File name:</strong>
+    <span id="image-filename"></span>
+
+    &nbsp; &nbsp;
+
+    <strong>File type:</strong>
+    <span id="image-filetype"></span>
+
+    &nbsp; &nbsp;
+
+    <strong>File size:</strong>
+    <span id="image-filesize"></span>
+
+    <br/><br/>
 
-    <br/>
-    <br/>
     <button id="image-download" class="btn btn-primary" type="button">Download</button>
 
-    &nbsp;
+    &nbsp; &nbsp;
 
     <button id="image-copy-to-clipboard" class="btn btn-primary" type="button">Copy to clipboard</button>
+
+    <br/><br/>
+
+    <img id="note-detail-image-view" />
 </div>