feat: copy to clipboard button in file info page

src/js/file.js

@@ -1,4 +1,4 @@
-/* global swal, axios */
+/* global swal, axios, ClipboardJS */
 
 const lsKeys = {
   token: 'token'
@@ -14,13 +14,15 @@ const page = {
   messageElement: document.querySelector('#message'),
   fileinfoContainer: document.querySelector('#fileinfo'),
 
-  downloadBtn: document.querySelector('#downloadBtn'),
+  clipboardBtn: document.querySelector('#clipboardBtn'),
   playerBtn: document.querySelector('#playerBtn'),
+  downloadBtn: document.querySelector('#downloadBtn'),
   deleteBtn: document.querySelector('#deleteBtn'),
   uploadRoot: null,
   titleFormat: null,
 
-  file: null
+  file: null,
+  clipboardJS: null
 }
 
 page.updateMessageBody = content => {
@@ -161,9 +163,9 @@ page.loadFileinfo = () => {
       </div>
     `
 
-    if (page.downloadBtn) {
-      page.downloadBtn.setAttribute('href', `${page.uploadRoot}/${page.file.name}`)
-    }
+    const fileUrl = `${page.uploadRoot}/${page.file.name}`
+    page.downloadBtn.setAttribute('href', fileUrl)
+    page.clipboardBtn.dataset.clipboardText = fileUrl
 
     const isimage = page.file.type.startsWith('image/')
     const isvideo = page.file.type.startsWith('video/')
@@ -227,6 +229,17 @@ window.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line compat/compat
   page.urlParams = new URLSearchParams(window.location.search)
 
+  page.clipboardJS = new ClipboardJS('.clipboard-js')
+
+  page.clipboardJS.on('success', () => {
+    return swal('', 'The link has been copied to clipboard.', 'success', {
+      buttons: false,
+      timer: 1500
+    })
+  })
+
+  page.clipboardJS.on('error', page.onError)
+
   page.deleteBtn.addEventListener('click', page.deleteFile)
 
   page.loadFileinfo()

views/file.njk

@@ -19,6 +19,7 @@
 <!-- Libs scripts -->
 <script src="../libs/sweetalert/sweetalert.min.js{{ versions[3] }}"></script>
 <script src="../libs/axios/axios.min.js{{ versions[3] }}"></script>
+<script src="../libs/clipboard.js/clipboard.min.js{{ versions[3] }}"></script>
 <!-- Scripts -->
 {# We assign an ID for this so that the script can find out proper root URL of uploaded files #}
 <script id="mainScript" src="../js/file.js{{ versions[1] }}" data-upload-root="{{ uploadRoot }}" data-title-format="
@@ -57,34 +58,48 @@
         <img class="is-unselectable">
       </div>
       <div class="table-container has-text-left"></div>
-      <div class="field">
-        <div class="control">
-          <a id="downloadBtn" class="button is-primary is-outlined is-fullwidth">
-            <span class="icon">
-              <i class="icon-download"></i>
-            </span>
-            <span>Download file</span>
-          </a>
+      <div class="columns">
+        <div class="column">
+          <div class="control">
+              <a id="clipboardBtn" class="button is-info is-outlined is-flex clipboard-js">
+                <span class="icon">
+                  <i class="icon-clipboard"></i>
+                </span>
+                <span>Copy link to clipboard</span>
+              </a>
+          </div>
+        </div>
+        <div class="column is-hidden">
+          <div class="control">
+            <a id="playerBtn" class="button is-info is-outlined is-flex" target="_blank">
+              <span class="icon">
+                <i class="icon-video"></i>
+              </span>
+              <span>Play in embedded player</span>
+            </a>
+          </div>
+        </div>
+        <div class="column">
+          <div class="control">
+            <a id="downloadBtn" class="button is-primary is-outlined is-flex">
+              <span class="icon">
+                <i class="icon-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </div>
         </div>
       </div>
-      <div class="field is-hidden">
-        <div class="control">
-          <a id="playerBtn" class="button is-info is-outlined is-fullwidth" target="_blank">
-            <span class="icon">
-              <i class="icon-video"></i>
-            </span>
-            <span>Play in embedded player</span>
-          </a>
-        </div>
-      </div>
-      <div class="field">
-        <div class="control">
-          <a id="deleteBtn" class="button is-danger is-outlined is-fullwidth">
-            <span class="icon">
-              <i class="icon-trash"></i>
-            </span>
-            <span>Delete file</span>
-          </a>
+      <div class="columns">
+        <div class="column">
+          <div class="control">
+            <a id="deleteBtn" class="button is-danger is-outlined is-fullwidth">
+              <span class="icon">
+                <i class="icon-trash"></i>
+              </span>
+              <span>Delete</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>