From 9f919cf08339e8ec8f6b0b2a0dcafb3ea905fbec Mon Sep 17 00:00:00 2001
From: Francesco Siddi <francesco.siddi@gmail.com>
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 2504f3be0aca..ab45267b8432 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 = $(`<input id="${data.uuid}" name="files" type="hidden">`).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 = '<i class="fa fa-copy"></i> 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();