trilium/src/public/javascripts/services/note_detail_image.js

import utils from "./utils.js";
import toastService from "./toast.js";
import server from "./server.js";
import noteDetailService from "./note_detail.js";

class NoteDetailImage {
    /**
     * @param {TabContext} ctx
     */
    constructor(ctx) {
        this.ctx = ctx;
        this.$component = ctx.$tabContent.find('.note-detail-image');
        this.$imageWrapper = ctx.$tabContent.find('.note-detail-image-wrapper');
        this.$imageView = ctx.$tabContent.find('.note-detail-image-view');
        this.$copyToClipboardButton = ctx.$tabContent.find(".image-copy-to-clipboard");
        this.$uploadNewRevisionButton = ctx.$tabContent.find(".image-upload-new-revision");
        this.$uploadNewRevisionInput = ctx.$tabContent.find(".image-upload-new-revision-input");
        this.$fileName = ctx.$tabContent.find(".image-filename");
        this.$fileType = ctx.$tabContent.find(".image-filetype");
        this.$fileSize = ctx.$tabContent.find(".image-filesize");

        this.$imageDownloadButton = ctx.$tabContent.find(".image-download");
        this.$imageDownloadButton.on('click', () => utils.download(this.getFileUrl()));

        this.$copyToClipboardButton.on('click',() => {
            this.$imageWrapper.attr('contenteditable','true');

            try {
                this.selectImage(this.$imageWrapper.get(0));

                const success = document.execCommand('copy');

                if (success) {
                    toastService.showMessage("Image copied to the clipboard");
                }
                else {
                    toastService.showAndLogError("Could not copy the image to clipboard.");
                }
            }
            finally {
                window.getSelection().removeAllRanges();
                this.$imageWrapper.removeAttr('contenteditable');
            }
        });

        this.$uploadNewRevisionButton.on("click", () => {
            this.$uploadNewRevisionInput.trigger("click");
        });

        this.$uploadNewRevisionInput.on('change', async () => {
            const formData = new FormData();
            formData.append('upload', this.$uploadNewRevisionInput[0].files[0]);

            const result = await $.ajax({
                url: baseApiUrl + 'images/' + this.ctx.note.noteId,
                headers: server.getHeaders(),
                data: formData,
                type: 'PUT',
                timeout: 60 * 60 * 1000,
                contentType: false, // NEEDED, DON'T REMOVE THIS
                processData: false, // NEEDED, DON'T REMOVE THIS
            });

            if (result.uploaded) {
                toastService.showMessage("New revision of the image has been uploaded.")

                await utils.clearBrowserCache();

                await noteDetailService.reload();
            }
            else {
                toastService.showError("Could not upload new revision of the image: " + result.message);
            }
        });
    }

    async render() {
        const attributes = await server.get('notes/' + this.ctx.note.noteId + '/attributes');
        const attributeMap = utils.toObject(attributes, l => [l.name, l.value]);

        this.$component.show();

        this.$fileName.text(attributeMap.originalFileName || "?");
        this.$fileSize.text((attributeMap.fileSize || "?") + " bytes");
        this.$fileType.text(this.ctx.note.mime);

        const imageHash = this.ctx.note.utcDateModified.replace(" ", "_");

        this.$imageView.prop("src", `api/images/${this.ctx.note.noteId}/${this.ctx.note.title}?${imageHash}`);
    }

    selectImage(element) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }

    getFileUrl() {
        // electron needs absolute URL so we extract current host, port, protocol
        return utils.getHost() + `/api/notes/${this.ctx.note.noteId}/download`;
    }

    show() {}

    getContent() {}

    focus() {}

    onNoteChange() {}

    cleanup() {}

    scrollToTop() {
        this.$component.scrollTop(0);
    }
}

export default NoteDetailImage