preview ms office files

components/FileListing.tsx

@@ -20,6 +20,7 @@ import FourOhFour from './FourOhFour'
 import TextPreview from './previews/TextPreview'
 import MarkdownPreview from './previews/MarkdownPreview'
 import CodePreview from './previews/CodePreview'
+import OfficePreview from './previews/OfficePreview'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -235,6 +236,9 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         case preview.pdf:
           return <PDFPreview file={resp} />
 
+        case preview.office:
+          return <OfficePreview file={resp} />
+
         default:
           return <div className="bg-white shadow rounded">{fileName}</div>
       }

components/previews/OfficePreview.tsx

@@ -0,0 +1,30 @@
+import { FunctionComponent, useEffect, useRef, useState } from 'react'
+import Preview from 'preview-office-docs'
+
+import DownloadBtn from '../DownloadBtn'
+
+const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const docContainer = useRef<HTMLDivElement>(null)
+  const [docContainerWidth, setDocContainerWidth] = useState(600)
+
+  useEffect(() => {
+    setDocContainerWidth(docContainer.current ? docContainer.current.offsetWidth : 600)
+  }, [])
+
+  return (
+    <>
+      <div className="shadow overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
+        <Preview
+          url={file['@microsoft.graph.downloadUrl']}
+          width={docContainerWidth.toString()}
+          height="800"
+        />
+      </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
+  )
+}
+
+export default OfficePreview

components/previews/PDFPreview.tsx

@@ -1,4 +1,4 @@
-import { createRef, FunctionComponent, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useEffect, useRef, useState } from 'react'
 import { Document, Page, pdfjs } from 'react-pdf'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -31,7 +31,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
       >
         <div className="w-full flex-1 overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
           <Document
-            className="bg-gray-200"
+            className="bg-gray-100"
             file={file['@microsoft.graph.downloadUrl']}
             onLoadSuccess={onDocumentLoadSuccess}
             loading={<Loading loadingText={loadingText} />}

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.21.1",
     "github-markdown-css": "^4.0.0",
     "next": "11.0.0",
+    "preview-office-docs": "^1.0.2",
     "prismjs": "^1.23.0",
     "react": "17.0.2",
     "react-copy-to-clipboard": "^5.0.3",

styles/globals.css

@@ -6,4 +6,5 @@
 
 .react-pdf__Page__canvas {
   @apply mx-auto;
+  @apply shadow-md;
 }

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -12,8 +16,15 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "noImplicitAny": false
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

utils/getPreviewType.ts

@@ -6,6 +6,7 @@ const preview = {
   code: 'code',
   video: 'video',
   audio: 'audio',
+  office: 'ms-office',
 }
 
 const extensions = {
@@ -21,6 +22,13 @@ const extensions = {
 
   pdf: preview.pdf,
 
+  doc: preview.office,
+  docx: preview.office,
+  ppt: preview.office,
+  pptx: preview.office,
+  xls: preview.office,
+  xlsx: preview.office,
+
   c: preview.code,
   cpp: preview.code,
   js: preview.code,