add copy to clipboard and custom toolbar

components/FileListing.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import toast, { Toaster } from 'react-hot-toast'
 
 import { ParsedUrlQuery } from 'querystring'
 import { FunctionComponent, useState } from 'react'
@@ -142,6 +143,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           <div className="hidden md:block font-bold col-span-2">Last Modified</div>
           <div className="hidden md:block font-bold">Size</div>
         </div>
+        <Toaster />
 
         {imagesInFolder.length !== 0 && (
           <ReactViewer
@@ -151,11 +153,25 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
             drag={false}
             rotatable={false}
             noClose={true}
+            scalable={false}
+            zoomSpeed={0.5}
             downloadable={true}
             downloadInNewWindow={true}
             onMaskClick={() => {
               setImageViewerVisibility(false)
             }}
+            customToolbar={toolbars => {
+              return toolbars.concat([
+                {
+                  key: 'copy',
+                  render: <FontAwesomeIcon icon={['far', 'copy']} />,
+                  onClick: i => {
+                    navigator.clipboard.writeText(i.downloadUrl ? i.downloadUrl : '')
+                    toast.success('Copied to clipboard.')
+                  },
+                },
+              ])
+            }}
           />
         )}
 
@@ -187,13 +203,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     if (hasKey(extensions, fileExtension)) {
       switch (extensions[fileExtension]) {
         case preview.image:
-          return (
+          router.push(downloadUrl)
-            <div className="bg-white shadow rounded">
+          return <></>
-              <div className="p-3 text-center">
-                <div>{downloadUrl}</div>
-              </div>
-            </div>
-          )
 
         case preview.text:
           return <TextPreview file={resp} />

package-lock.json

@@ -17,7 +17,9 @@
         "next": "11.0.0",
         "prismjs": "^1.23.0",
         "react": "17.0.2",
+        "react-copy-to-clipboard": "^5.0.3",
         "react-dom": "17.0.2",
+        "react-hot-toast": "^2.0.0",
         "react-markdown": "^6.0.2",
         "react-pdf": "^5.3.0",
         "react-player": "^2.9.0",
@@ -30,6 +32,7 @@
       "devDependencies": {
         "@types/prismjs": "^1.16.5",
         "@types/react": "17.0.11",
+        "@types/react-copy-to-clipboard": "^5.0.0",
         "@types/react-dom": "^17.0.8",
         "@types/react-pdf": "^5.0.4",
         "@types/react-syntax-highlighter": "^13.5.1",
@@ -505,6 +508,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz",
+      "integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "17.0.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
@@ -1613,6 +1625,14 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js-pure": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz",
@@ -5694,6 +5714,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
+      "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
+      "dependencies": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -5712,6 +5744,35 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz",
+      "integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==",
+      "dependencies": {
+        "goober": "^2.0.35"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-hot-toast/node_modules/csstype": {
+      "version": "2.6.17",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+      "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==",
+      "peer": true
+    },
+    "node_modules/react-hot-toast/node_modules/goober": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz",
+      "integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==",
+      "peerDependencies": {
+        "csstype": "^2.6.2"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -7030,6 +7091,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "node_modules/toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -8025,6 +8091,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-copy-to-clipboard": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.0.tgz",
+      "integrity": "sha512-faUg6Kx3Dfv0MBIcs+xzIptlRtjEVSaNjqyC14YAp4UwSiTHghnKtBOt9ERRTZZJfoJgnw10tomVaqG86GzdAw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
@@ -8903,6 +8978,14 @@
         }
       }
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js-pure": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.0.tgz",
@@ -11969,6 +12052,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
+      "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -11984,6 +12076,28 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-hot-toast": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.0.0.tgz",
+      "integrity": "sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==",
+      "requires": {
+        "goober": "^2.0.35"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.17",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==",
+          "peer": true
+        },
+        "goober": {
+          "version": "2.0.38",
+          "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.38.tgz",
+          "integrity": "sha512-oGrP8xMB3k6EEcEAuKstd05r0JRFs8L9ouPCTKxupu85PdDJ443LTCXvxRVMeYN6pVhV6htVb7FaKTk5JlFzCQ==",
+          "requires": {}
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12997,6 +13111,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -19,7 +19,9 @@
     "next": "11.0.0",
     "prismjs": "^1.23.0",
     "react": "17.0.2",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "17.0.2",
+    "react-hot-toast": "^2.0.0",
     "react-markdown": "^6.0.2",
     "react-pdf": "^5.3.0",
     "react-player": "^2.9.0",
@@ -32,6 +34,7 @@
   "devDependencies": {
     "@types/prismjs": "^1.16.5",
     "@types/react": "17.0.11",
+    "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^17.0.8",
     "@types/react-pdf": "^5.0.4",
     "@types/react-syntax-highlighter": "^13.5.1",

pages/_app.tsx

@@ -14,6 +14,7 @@ import {
   faFileAlt,
   faFile,
   faFolder,
+  faCopy
 } from '@fortawesome/free-regular-svg-icons'
 import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
@@ -38,7 +39,8 @@ library.add(
   faMusic,
   faArrowLeft,
   faArrowRight,
-  faFileDownload
+  faFileDownload,
+  faCopy
 )
 
 function MyApp({ Component, pageProps }: AppProps) {