From 9f919cf08339e8ec8f6b0b2a0dcafb3ea905fbec Mon Sep 17 00:00:00 2001 From: Francesco Siddi Date: Thu, 19 Jan 2023 06:33:40 +0100 Subject: [PATCH] Dropzone: Add "Copy link" button for new uploads (#22517) Once an attachment is successfully uploaded via Dropzone, display a "Copy link" under the "Remove file" button. Once the button is clicked, depending if the attachment is an image or a file, the appropriate markup is written to the clipboard, so it can be conveniently pasted in the description. --- web_src/js/features/common-global.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 2504f3be0..ab45267b8 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -167,6 +167,21 @@ export function initGlobalDropzone() { file.uuid = data.uuid; const input = $(``).val(data.uuid); $dropzone.find('.files').append(input); + // Create a "Copy Link" element, to conveniently copy the image + // or file link as Markdown to the clipboard + const copyLinkElement = document.createElement('a'); + copyLinkElement.className = 'dz-remove'; + copyLinkElement.href = '#'; + copyLinkElement.innerHTML = ' Copy link'; + copyLinkElement.addEventListener('click', (e) => { + e.preventDefault(); + let fileMarkdown = `[${file.name}](/attachments/${file.uuid})`; + if (file.type.startsWith('image/')) { + fileMarkdown = `!${fileMarkdown}`; + } + navigator.clipboard.writeText(fileMarkdown); + }); + file.previewTemplate.appendChild(copyLinkElement); }); this.on('removedfile', (file) => { $(`#${file.uuid}`).remove();