Attachments... .

2025-11-30 23:37:16 +01:00 · 2020-06-14 13:55:25 -03:00
parent 16d82bcbae
commit 20e150341c
16 changed files with 532 additions and 73 deletions
--- a/2
+++ b/2
@@ -64,6 +64,7 @@ deps:
 	cp node_modules/medium-editor/dist/js/medium-editor.js vendor/
 	cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
 	cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
+	cp node_modules/lozad/dist/lozad.js vendor/

 depsmin:
 	mkdir -p vendor
@@ -74,6 +75,7 @@ depsmin:
 	cp node_modules/medium-editor/dist/js/medium-editor.min.js vendor/medium-editor.js
 	cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
 	cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
+	cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js

 js-templates:
 	node_modules/handlebars/bin/handlebars js/templates -f js/templates.js
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -5,7 +5,7 @@
    <name>Quick notes</name>
    <summary>Quick notes with a basic rich text</summary>
    <description>Quick notes with a basic rich text</description>
-    <version>0.3.0</version>
+    <version>0.3.1</version>
    <licence>agpl</licence>
    <author>Matias De lellis</author>
    <namespace>QuickNotes</namespace>
--- a/css/style.scss
+++ b/css/style.scss
@@ -33,7 +33,6 @@
    color: #202124;
    min-height: 150px;
    width: 250px;
-    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px #c1c1c1;
 }
@@ -71,8 +70,9 @@
    display: none;
 }

-#div-content .save-button {
+#div-content .buttons-toolbar {
    float: right;
+    display: flex;
    /*padding-right: 8px;*/
    /*padding-bottom: 5px;*/
 }
@@ -101,6 +101,7 @@
 .note-content {
    margin: 4px;
    overflow-wrap: break-word;
+    min-height: 75px;
 }

 .icon-header-note {
@@ -137,9 +138,9 @@
                                  not supported by any browser */
 }

-.note-toolbar {
-   float:left;
-   padding-top: 12px;
+.colors-toolbar {
+   float: left;
+   padding-top: 10px;
 }

 .circle-toolbar {
@@ -226,8 +227,8 @@ div[contenteditable="true"] {
 }

 .note-options {
-    bottom: 0;
-    /*padding: 5px;*/
+    padding: 8px;
+    padding-top: 0px;
 }

 #note-share-options {
@@ -264,7 +265,7 @@ div[contenteditable="true"] {
 }

 .note-tags {
-    margin-top: 10px;
+    margin-top: 8px;
 }

 /* Restore defaults select2 rules */
@@ -302,3 +303,36 @@ div[contenteditable="true"] {
    height: auto;
    min-height: unset;
 }
+
+.note-attachts {
+    position: relative;
+}
+
+.note-attach-grid {
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    height: 100%;
+    width: 100%;
+}
+
+.note-attach {
+    background-size: contain;
+    width: 100%;
+    height: 100%;
+}
+
+.attach-preview {
+    background-color: rgba(210, 210, 210, .5);
+}
+
+.note-body {
+    padding: 10px;
+}
+
+.round-tool-button {
+    width: 32px;
+    height: 32px;
+    padding: 0px;
+    border-radius: 50%;
+}
--- a/js/script.js
+++ b/js/script.js
@@ -165,6 +165,7 @@ View.prototype = {
        this._editablePinned(note.ispinned);
        this._editableColor(note.color);
        this._editableTags(note.tags);
+        this._editableAttachts(note.attachts);

        // Create medium div editor.
        this._initEditor();
@@ -178,6 +179,7 @@ View.prototype = {
            id: this._editableId(),
            title: this._editableTitle(),
            content: this._editableContent(),
+            attachts: this._editableAttachts(),
            color: this._editableColor(),
            pinned: this._editablePinned(),
            tags: this._editableTags()
@@ -188,6 +190,9 @@ View.prototype = {
            var noteHtml = $(Handlebars.templates['note-item'](note)).children();
            $('.notes-grid [data-id=' + note.id + ']').replaceWith(noteHtml);

+            self._resizeAttachtsGrid();
+            lozad('.attach-preview').observe();
+
            // Hide modal editor and reset it.
            self._hideEditor(note.id);
            self._destroyEditor();
@@ -221,8 +226,13 @@ View.prototype = {
            emptyMsg: t('quicknotes', 'Nothing here. Take your first quick notes'),
            emptyIcon: OC.imagePath('quicknotes', 'app'),
        });
+
        $('#div-content').html(html);

+        // TODO: Move within handlebars template
+        this._resizeAttachtsGrid();
+        lozad('.attach-preview').observe();
+
        // Init masonty grid to notes.
        $('.notes-grid').isotope({
            itemSelector: '.note-grid-item',
@@ -285,7 +295,7 @@ View.prototype = {
        $('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
            event.stopPropagation();

-            var gridnote = $(this).parent().parent();
+            var gridnote = $(this).parent().parent().parent();
            var id = parseInt(gridnote.data('id'), 10);

            var note = self._notes.read(id);
@@ -317,7 +327,7 @@ View.prototype = {
            event.stopPropagation();

            var icon =  $(this);
-            var gridNote = icon.parent().parent();
+            var gridNote = icon.parent().parent().parent();
            var id = parseInt(gridNote.data('id'), 10);

            var note = self._notes.read(id);
@@ -340,7 +350,7 @@ View.prototype = {
            event.stopPropagation();

            var icon =  $(this);
-            var gridNote = icon.parent().parent();
+            var gridNote = icon.parent().parent().parent();
            var id = parseInt(gridNote.data('id'), 10);

            var note = self._notes.read(id);
@@ -437,6 +447,26 @@ View.prototype = {
            $('#modal-note-div #tag-button').trigger( "click");
        });

+        // handle attach button.
+        $('#modal-note-div #attach-button').click(function (event) {
+            event.stopPropagation();
+            OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) {
+                OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => {
+                    var attach = {
+                        file_id: fileInfo.id,
+                        preview_url: OC.generateUrl('core') + '/preview.png?file=' + encodeURI(datapath) + '&x=512&y=512'
+                    };
+
+                    var attachts = self._editableAttachts();
+                    attachts.push(attach);
+
+                    self._editableAttachts(attachts);
+                }).fail(() => {
+                    console.log("ERRORRR");
+                });
+            }, false, '*', true, OC.dialogs.FILEPICKER_TYPE_CHOOSE)
+        });
+
        // handle tags button.
        $('#modal-note-div #tag-button').click(function (event) {
            event.stopPropagation();
@@ -680,6 +710,43 @@ View.prototype = {
            $("#modal-note-div .note-tags").replaceWith(html);
        }
    },
+    _editableAttachts: function(attachts) {
+        if (attachts === undefined) {
+            return $("#modal-note-div .note-attach").toArray().map(function (value) {
+                return {
+                    file_id: value.getAttribute('attach-file-id'),
+                    preview_url: value.getAttribute('data-background-image')
+                };
+            });
+        } else {
+            var html = Handlebars.templates['attachts']({ attachts: attachts});
+            $("#modal-note-div .note-attachts").replaceWith(html);
+
+            lozad('.attach-preview').observe();
+
+            var sAttachts = $('#modal-note-div .note-attach-grid');
+            sAttachts.parent().css('height', (500/sAttachts.length) + 'px');
+            sAttachts.first().children().css('border-top-left-radius', '8px');
+            sAttachts.each(function(index) {
+                $(this).css('width', (100/sAttachts.length) + '%');
+                $(this).css('left', (100/sAttachts.length)*index + '%');
+            });
+            sAttachts.last().children().css('border-top-right-radius', '8px');
+        }
+    },
+    _resizeAttachtsGrid: function() {
+        var attachtsgrids = $('#notes-grid-div .note-attachts');
+        attachtsgrids.each(function() {
+            var sAttachts = $(this).children('.note-attach-grid');
+            sAttachts.parent().css('height', (250/sAttachts.length) + 'px');
+            sAttachts.first().children().css('border-top-left-radius', '8px');
+            sAttachts.each(function(index) {
+            $(this).css('width', (100/sAttachts.length) + '%');
+                $(this).css('left', (100/sAttachts.length)*index + '%');
+            });
+            sAttachts.last().children().css('border-top-right-radius', '8px');
+        });
+    },
    _initEditor: function() {
        var modalcontent = $('#modal-note-div #content-editable');
        var editor = new MediumEditor(modalcontent, {
--- a/js/templates/attachts.handlebars
+++ b/js/templates/attachts.handlebars
@@ -0,0 +1,7 @@
+<div class='note-attachts'>
+	{{#each attachts}}
+		<div class='note-attach-grid'>
+			<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+		</div>
+	{{/each}}
+</div>
--- a/js/templates/note-item.handlebars
+++ b/js/templates/note-item.handlebars
@@ -11,6 +11,16 @@
 			{{{ content }}}
 		</div>
 		{{else}}
+		<div class='note-header'>
+			<div class='note-attachts'>
+				{{#each attachts}}
+					<div class='note-attach-grid'>
+						<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+					</div>
+				{{/each}}
+			</div>
+		</div>
+		<div class='note-body'>
 			<div>
 				{{#if ispinned}}
 					<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
@@ -35,6 +45,7 @@
 					<div class="icon-tag slim-tag" tag-id="{{ id }}">{{{ name }}}</div>
 				{{/each}}
 			</div>
+		<div>
 		{{/if}}
 	</div>
 </div>
--- a/js/templates/notes.handlebars
+++ b/js/templates/notes.handlebars
@@ -14,6 +14,16 @@
 				{{{ content }}}
 			</div>
 			{{else}}
+			<div class='note-header'>
+				<div class='note-attachts'>
+					{{#each attachts}}
+						<div class='note-attach-grid'>
+							<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+						</div>
+					{{/each}}
+				</div>
+			</div>
+			<div class='note-body'>
 				<div>
 					{{#if ispinned}}
 						<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
@@ -40,6 +50,7 @@
 						</div>
 					{{/each}}
 				</div>
+			</div>
 			{{/if}}
 		</div>
 	</div>
@@ -48,17 +59,22 @@
 <div id="modal-note-div" class="hide-modal-note modal-note-background">
 	<div class="modal-content">
 		<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
+			<div class='note-header'>
+				<div class='note-attachts'></div>
+			</div>
+			<div class='note-body'>
 				<div>
 					<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
 					<div contenteditable="true" id='title-editable' class='note-title'></div>
 				</div>
 				<div contenteditable="true" id='content-editable' class='note-content'></div>
 				<div class='note-tags'></div>
+			</div>
 			<div class="note-options">
 				<!--
 				<select class="note-share-select" name="users[]" multiple="multiple"></select>
 				-->
-				<div class="note-toolbar">
+				<div class="colors-toolbar">
 					<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
 					<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
 					<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
@@ -70,12 +86,15 @@
 					<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
 					<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
 				</div>
-				<div class="save-button">
+				<div class="buttons-toolbar">
 					<!--
 					<button id='share-button'><?php p($l->t('Share'));?></button>
 					-->
-					<button id='tag-button'>
-						{{ tagTxt }}
+					<button id='attach-button' class='round-tool-button'>
+						<div class="icon-picture" title="{{t "quicknotes" "Add image"}}"></div>
+					</button>
+					<button id='tag-button' class='round-tool-button'>
+						<div class="icon-tag" title="{{t "quicknotes" "Tags"}}"></div>
 					</button>
 					<button id='cancel-button'>
 						{{ cancelTxt }}
--- a/lib/Controller/NoteController.php
+++ b/lib/Controller/NoteController.php
@@ -22,12 +22,15 @@

 namespace OCA\QuickNotes\Controller;

-use OCP\IRequest;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Controller;

+use OCP\IRequest;
+
+use OCA\QuickNotes\Db\Attach;
+use OCA\QuickNotes\Db\AttachMapper;
 use OCA\QuickNotes\Db\Color;
 use OCA\QuickNotes\Db\ColorMapper;
 use OCA\QuickNotes\Db\Note;
@@ -39,13 +42,18 @@ use OCA\QuickNotes\Db\NoteShareMapper;
 use OCA\QuickNotes\Db\Tag;
 use OCA\QuickNotes\Db\TagMapper;

+use OCA\QuickNotes\Service\FileService;
+
+
 class NoteController extends Controller {

 	private $notemapper;
 	private $notetagmapper;
 	private $colormapper;
 	private $notesharemapper;
+	private $attachMapper;
 	private $tagmapper;
+	private $fileService;
 	private $userId;

 	public function __construct($AppName,
@@ -54,15 +62,20 @@ class NoteController extends Controller {
 	                            NoteTagMapper   $notetagmapper,
 	                            NoteShareMapper $notesharemapper,
 	                            ColorMapper     $colormapper,
+	                            AttachMapper    $attachMapper,
 	                            TagMapper       $tagmapper,
+	                            FileService     $fileService,
 	                            $UserId)
 	{
 		parent::__construct($AppName, $request);
+
 		$this->notemapper      = $notemapper;
 		$this->notetagmapper   = $notetagmapper;
 		$this->colormapper     = $colormapper;
 		$this->notesharemapper = $notesharemapper;
+		$this->attachMapper    = $attachMapper;
 		$this->tagmapper       = $tagmapper;
+		$this->fileService     = $fileService;
 		$this->userId          = $UserId;
 	}

@@ -110,6 +123,15 @@ class NoteController extends Controller {
 			$note->setIsPinned($note->getPinned() ? true : false);
 		}

+		// Insert true attachts to response
+		foreach ($notes as $note) {
+			$attachts = $this->attachMapper->findFromNote($this->userId, $note->getId());
+			foreach ($attachts as $attach) {
+				$attach->setPreviewUrl($this->fileService->getPreviewUrl($attach->getFileId(), 512));
+			}
+			$note->setAttachts($attachts);
+		}
+
 		return new DataResponse($notes);
 	}

@@ -158,6 +180,7 @@ class NoteController extends Controller {
 		$newNote->setColor($hcolor->getColor());
 		$newNote->setIsPinned(false);
 		$newNote->setTags([]);
+		$newNote->setAttachts([]);

 		return new DataResponse($newNote);
 	}
@@ -168,11 +191,12 @@ class NoteController extends Controller {
 	 * @param int $id
 	 * @param string $title
 	 * @param string $content
+	 * @param array $attachts
 	 * @param boolean $pinned
 	 * @param array $tags
 	 * @param string $color
 	 */
-	public function update($id, $title, $content, $pinned, $tags, $color = "#F7EB96") {
+	public function update($id, $title, $content, $attachts, $pinned, $tags, $color = "#F7EB96") {
 		// Get current Note and Color.
 		try {
 			$note = $this->notemapper->find($id, $this->userId);
@@ -190,6 +214,33 @@ class NoteController extends Controller {
 			$hcolor = $this->colormapper->insert($hcolor);
 		}

+		// Delete old attachts
+		$dbAttachts = $this->attachMapper->findFromNote($this->userId, $id);
+		foreach ($dbAttachts as $dbAttach) {
+			$delete = true;
+			foreach ($attachts as $attach) {
+				if ($dbAttach->getFileId() === $attach['file_id']) {
+					$delete = false;
+					break;
+				}
+			}
+			if ($delete) {
+				$this->attachMapper->delete($dbAttach);
+			}
+		}
+
+		// Add new attachts
+		foreach ($attachts as $attach) {
+			if (!$this->attachMapper->fileAttachExists($this->userId, $id, $attach['file_id'])) {
+				$hAttach = new Attach();
+				$hAttach->setUserId($this->userId);
+				$hAttach->setNoteId($id);
+				$hAttach->setFileId($attach['file_id']);
+				$hAttach->setCreatedAt(time());
+				$this->attachMapper->insert($hAttach);
+			}
+		}
+
 		// Delete old tag relations
 		$dbTags = $this->tagmapper->getTagsForNote($this->userId, $id);
 		foreach ($dbTags as $dbTag) {
@@ -244,6 +295,13 @@ class NoteController extends Controller {
 		// Fill new tags
 		$newnote->setTags($this->tagmapper->getTagsForNote($this->userId, $newnote->getId()));

+		// Fill attachts to response
+		$attachts = $this->attachMapper->findFromNote($this->userId, $newnote->getId());
+		foreach ($attachts as $attach) {
+			$attach->setPreviewUrl($this->fileService->getPreviewUrl($attach->getFileId(), 512));
+		}
+		$newnote->setAttachts($attachts);
+
 		//  Remove old color if necessary
 		if (($oldcolorid !== $hcolor->getId()) &&
 		    (!$this->notemapper->colorIdCount($oldcolorid))) {
@@ -282,6 +340,11 @@ class NoteController extends Controller {
 			$this->colormapper->delete($oldcolor);
 		}

+		$attachts = $this->attachMapper->findFromNote($this->userId, $id);
+		foreach ($attachts as $attach) {
+			$this->attachMapper->delete($attach);
+		}
+
 		return new DataResponse($note);
 	}

--- a/lib/Db/Attach.php
+++ b/lib/Db/Attach.php
@@ -0,0 +1,28 @@
+<?php
+namespace OCA\QuickNotes\Db;
+
+use JsonSerializable;
+
+use OCP\AppFramework\Db\Entity;
+
+class Attach extends Entity implements JsonSerializable {
+	protected $userId;
+	protected $noteId;
+	protected $fileId;
+	protected $createdAt;
+	protected $previewUrl;
+
+	public function setPreviewUrl($previewUrl) {
+		$this->previewUrl = $previewUrl;
+	}
+
+	public function jsonSerialize() {
+		return [
+			'id' => $this->id,
+			'note_id' => $this->noteId,
+			'file_id' => $this->fileId,
+			'created_at' => $this->createdAt,
+			'preview_url' => $this->previewUrl,
+		];
+	}
+}
--- a/lib/Db/AttachMapper.php
+++ b/lib/Db/AttachMapper.php
@@ -0,0 +1,89 @@
+<?php declare(strict_types=1);
+
+namespace OCA\QuickNotes\Db;
+
+use OCP\IDBConnection;
+use OCP\AppFramework\Db\QBMapper;
+use OCP\AppFramework\Db\DoesNotExistException;
+use OCP\DB\QueryBuilder\IQueryBuilder;
+
+class AttachMapper extends QBMapper {
+
+	public function __construct(IDBConnection $db) {
+		parent::__construct($db, 'quicknotes_attach');
+	}
+
+	/**
+	 * @param int $id
+	 * @param string $userId
+	 * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
+	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException if more than one result
+	 * @return Attach
+	 */
+	public function find($id, $userId) {
+		$qb = $this->db->getQueryBuilder();
+		$qb->select('*')
+			->from($this->tableName)
+			->where(
+				$qb->expr()->eq('user_id', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)),
+				$qb->expr()->eq('id', $qb->createNamedParameter($id, IQueryBuilder::PARAM_INT))
+			);
+		return $this->findEntity($qb);
+	}
+
+	public function findAll($userId) {
+		$qb = $this->db->getQueryBuilder();
+		$qb->select('*')
+			->from($this->tableName)
+			->where(
+				$qb->expr()->eq('user_id', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR))
+			);
+		return $this->findEntities($qb);
+	}
+
+	/**
+	 * @param string $userId
+	 * @param int $noteId
+	 * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
+	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException if more than one result
+	 * @return Attach
+	 */
+	public function findFileAttachFromNote($userId, $noteId, $fileId) {
+		$qb = $this->db->getQueryBuilder();
+		$qb->select('*')
+			->from($this->tableName)
+			->where(
+				$qb->expr()->eq('user_id', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)),
+				$qb->expr()->eq('note_id', $qb->createNamedParameter($noteId, IQueryBuilder::PARAM_INT)),
+				$qb->expr()->eq('file_id', $qb->createNamedParameter($fileId, IQueryBuilder::PARAM_INT))
+			);
+		return $this->findEntity($qb);
+	}
+
+	public function fileAttachExists($userId, $noteId, $fileId) {
+		try {
+			return $this->findFileAttachFromNote($userId, $noteId, $fileId);
+		} catch (DoesNotExistException $e) {
+			return false;
+		}
+		return false;
+	}
+
+	/**
+	 * @param string $userId
+	 * @param int $noteId
+	 * @throws \OCP\AppFramework\Db\DoesNotExistException if not found
+	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException if more than one result
+	 * @return Note[]
+	 */
+	public function findFromNote($userId, $noteId) {
+		$qb = $this->db->getQueryBuilder();
+		$qb->select('*')
+			->from($this->tableName)
+			->where(
+				$qb->expr()->eq('user_id', $qb->createNamedParameter($userId, IQueryBuilder::PARAM_STR)),
+				$qb->expr()->eq('note_id', $qb->createNamedParameter($noteId, IQueryBuilder::PARAM_INT))
+			);
+		return $this->findEntities($qb);
+	}
+}
--- a/lib/Db/Note.php
+++ b/lib/Db/Note.php
@@ -16,6 +16,7 @@ class Note extends Entity implements JsonSerializable {
 	protected $sharedWith;
 	protected $isShared;
 	protected $tags;
+	protected $attachts;

 	protected $color;
 	protected $isPinned;
@@ -41,7 +42,8 @@ class Note extends Entity implements JsonSerializable {
 			'userid' => $this->userId,
 			'sharedwith' => $this->sharedWith,
 			'isshared' => $this->isShared,
-			'tags' => $this->tags
+			'tags' => $this->tags,
+			'attachts' => $this->attachts
 		];
 	}
 }
--- a/lib/Migration/Version000301Date20200613151711.php
+++ b/lib/Migration/Version000301Date20200613151711.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace OCA\QuickNotes\Migration;
+
+use Closure;
+use OCP\DB\ISchemaWrapper;
+use OCP\Migration\IOutput;
+use OCP\Migration\SimpleMigrationStep;
+
+/**
+ * Auto-generated migration step: Please modify to your needs!
+ */
+class Version000301Date20200613151711 extends SimpleMigrationStep {
+
+	/**
+	 * @param IOutput $output
+	 * @param Closure $schemaClosure The `\Closure` returns a `ISchemaWrapper`
+	 * @param array $options
+	 * @return null|ISchemaWrapper
+	 */
+	public function changeSchema(IOutput $output, Closure $schemaClosure, array $options) {
+		/** @var ISchemaWrapper $schema */
+		$schema = $schemaClosure();
+		if (!$schema->hasTable('quicknotes_attach')) {
+			$table = $schema->createTable('quicknotes_attach');
+			$table->addColumn('id', 'bigint', [
+				'autoincrement' => true,
+				'notnull' => true,
+				'length' => 8,
+				'unsigned' => true,
+			]);
+			$table->addColumn('user_id', 'string', [
+				'notnull' => true,
+				'length' => 200,
+				'default' => '',
+			]);
+			$table->addColumn('note_id', 'bigint', [
+				'notnull' => true,
+				'length' => 8,
+				'unsigned' => true,
+			]);
+			$table->addColumn('file_id', 'bigint', [
+				'notnull' => true,
+				'length' => 10,
+			]);
+			$table->addColumn('created_at', 'bigint', [
+				'notnull' => false,
+				'length' => 8,
+				'default' => 0,
+				'unsigned' => true,
+			]);
+			$table->setPrimaryKey(['id']);
+			$table->addIndex(['user_id'], 'attach_user_id_index');
+			$table->addIndex(['note_id'], 'attach_note_id_index');
+			$table->addIndex(['file_id'], 'attach_file_id_index');
+		}
+
+		return $schema;
+	}
+
+}
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -0,0 +1,67 @@
+<?php declare(strict_types=1);
+/**
+ * @copyright Copyright (c) 2020 Matias De lellis <mati86dl@gmail.com>
+ *
+ * @author Matias De lellis <mati86dl@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OCA\QuickNotes\Service;
+
+use OCP\IURLGenerator;
+
+use OCP\Files\IRootFolder;
+use OCP\Files\File;
+use OCP\Files\Folder;
+use OCP\Files\Node;
+
+use OCP\Files\NotFoundException;
+
+class FileService {
+
+	/**  @var string|null */
+	private $userId;
+
+	/** @var IRootFolder */
+	private $rootFolder;
+
+	/** @var IURLGenerator */
+	protected $urlGenerator;
+
+	public function __construct($userId,
+	                            IRootFolder   $rootFolder,
+	                            IURLGenerator $urlGenerator)
+	{
+		$this->userId       = $userId;
+		$this->rootFolder   = $rootFolder;
+		$this->urlGenerator = $urlGenerator;
+	}
+
+	public function getPreviewUrl($fileId, $sideSize): string {
+		$userFolder = $this->rootFolder->getUserFolder($this->userId);
+		$node = current($userFolder->getById($fileId));
+		$path = $userFolder->getRelativePath($node->getPath());
+
+		return $this->urlGenerator->linkToRouteAbsolute('core.Preview.getPreview', [
+			'file' => $path,
+			'x' => $sideSize,
+			'y' => $sideSize
+		]);
+	}
+
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,6 +56,11 @@
        "outlayer": "^2.1.0"
      }
    },
+    "lozad": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/lozad/-/lozad-1.15.0.tgz",
+      "integrity": "sha512-P60iyIiud4XSH5SXxrgPCXoebEaT6SYAvRBgeMBZPYmWVRSfOhQks8ZmyZ/WFgDgwvrHnWffXw9HMg8G0gvt0w=="
+    },
    "masonry-layout": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
  "dependencies": {
    "handlebars": "^4.5.1",
    "isotope-layout": "^3.0.6",
+    "lozad": "^1.15.0",
    "medium-editor": "^5.23.3",
    "medium-editor-autolist": "^1.0.1"
  }
--- a/templates/main.php
+++ b/templates/main.php
@@ -5,6 +5,7 @@ vendor_script('quicknotes', 'isotope.pkgd');
 vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
 vendor_script('quicknotes', 'autolist');
+vendor_script('quicknotes', 'lozad');
 script('quicknotes', 'qn-dialogs');
 script('quicknotes', 'script');
 style('quicknotes', 'style');