finish raw file redirect on server side, close #4

components/FileListing.tsx

@@ -10,12 +10,12 @@ import useSWR from 'swr'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
-import Loading from './Loading'
-
+import config from '../config/site.json'
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
+import Loading from './Loading'
 import FourOhFour from './FourOhFour'
 import TextPreview from './previews/TextPreview'
 import MarkdownPreview from './previews/MarkdownPreview'
@@ -161,13 +161,20 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
               setImageViewerVisibility(false)
             }}
             customToolbar={toolbars => {
+              toolbars[0].render = <FontAwesomeIcon icon="plus" />
+              toolbars[1].render = <FontAwesomeIcon icon="minus" />
+              toolbars[2].render = <FontAwesomeIcon icon="arrow-left" />
+              toolbars[4].render = <FontAwesomeIcon icon="arrow-right" />
+              toolbars[9].render = <FontAwesomeIcon icon="download" />
               return toolbars.concat([
                 {
                   key: 'copy',
-                  render: <FontAwesomeIcon icon={['far', 'copy']} />,
+                  render: <FontAwesomeIcon icon="copy" />,
                   onClick: i => {
-                    navigator.clipboard.writeText(i.downloadUrl ? i.downloadUrl : '')
-                    toast.success('Copied to clipboard.')
+                    navigator.clipboard.writeText(
+                      i.alt ? `${config.baseUrl}/api?path=${encodeURIComponent(path + '/' + i.alt)}&raw=true` : ''
+                    )
+                    toast.success('Copied image permanent link to clipboard.')
                   },
                 },
               ])
@@ -203,8 +210,12 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     if (hasKey(extensions, fileExtension)) {
       switch (extensions[fileExtension]) {
         case preview.image:
-          router.push(downloadUrl)
-          return <></>
+          return (
+            <div className="shadow bg-white rounded p-3 w-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img className="mx-auto" src={downloadUrl} alt={fileName} />
+            </div>
+          )
 
         case preview.text:
           return <TextPreview file={resp} />

config/site.json

@@ -1,3 +1,4 @@
 {
+  "baseUrl": "https://onedrive-vercel-index.vercel.app",
   "title": "Spencer's OneDrive Index"
 }

pages/_app.tsx

@@ -14,9 +14,17 @@ import {
   faFileAlt,
   faFile,
   faFolder,
-  faCopy
 } from '@fortawesome/free-regular-svg-icons'
-import { faMusic, faArrowLeft, faArrowRight, faFileDownload } from '@fortawesome/free-solid-svg-icons'
+import {
+  faPlus,
+  faMinus,
+  faDownload,
+  faMusic,
+  faArrowLeft,
+  faArrowRight,
+  faFileDownload,
+  faCopy
+} from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
 
 import type { AppProps } from 'next/app'
@@ -40,7 +48,10 @@ library.add(
   faArrowLeft,
   faArrowRight,
   faFileDownload,
-  faCopy
+  faCopy,
+  faPlus,
+  faMinus,
+  faDownload
 )
 
 function MyApp({ Component, pageProps }: AppProps) {

pages/api/index.ts

@@ -39,9 +39,10 @@ const getAccessToken = async () => {
 }
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { path = '/' } = req.query
+  const { path = '/', raw = false } = req.query
   if (path === '[...path]') {
-    res.status(400).json({ error: 'Path query invalid.' })
+    res.status(400).json({ error: 'No path specified.' })
+    return
   }
 
   if (typeof path === 'string') {
@@ -55,9 +56,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       },
     })
 
+    if (raw) {
+      if ('folder' in data) {
+        res.status(400).json({ error: "Folders doesn't have raw download urls." })
+        return
+      }
+      if ('file' in data) {
+        res.redirect(data['@microsoft.graph.downloadUrl'])
+        return
+      }
+    }
+
     res.status(200).json({ path, data })
     return
   }
 
   res.status(404).json({ error: 'Path query invalid.' })
+  return
 }