add download button style and action

Add jszip to dependencies

components/FileListing.tsx

@@ -12,7 +12,7 @@ import dynamic from 'next/dynamic'
 
 import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
 import { extensions, preview } from '../utils/getPreviewType'
-import { getBaseUrl, useProtectedSWRInfinite } from '../utils/tools'
+import { getBaseUrl, saveFiles, useProtectedSWRInfinite } from '../utils/tools'
 
 import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
@@ -235,6 +235,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       }
     }
 
+    // Selected file download
+    const handleDownloadSelected = () => {
+      const folderName = path.substr(path.lastIndexOf('/') + 1)
+      const folder = folderName ? folderName : undefined
+      const files = children.filter((c: any) => selected[c.id])
+        .map((c: any) => ({ name: c.name, url: c['@microsoft.graph.downloadUrl'] }))
+      saveFiles(files, folder)
+    }
+
     return (
       <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded shadow">
         <div className="dark:border-gray-700 grid items-center grid-cols-12 p-3 space-x-2 border-b border-gray-200">
@@ -250,12 +259,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 indeterminate={true}
                 title={"Select files"}
               />
-              <span
+              {totalSelected ? (
-                title="Download selected files"
+                <span
-                className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                  title="Download selected files"
-              >
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
-                <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
+                  onClick={handleDownloadSelected}
-              </span>
+                >
+                  <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
+                </span>
+              ) : ''}
             </div>
           </div>
         </div>

package-lock.json

@@ -17,6 +17,7 @@
         "axios": "^0.21.1",
         "crypto-js": "^4.1.1",
         "emoji-regex": "^9.2.2",
+        "jszip": "^3.7.1",
         "next": "^11.1.0",
         "preview-office-docs": "^1.0.2",
         "prismjs": "^1.23.0",

package.json

@@ -18,6 +18,7 @@
     "axios": "^0.21.1",
     "crypto-js": "^4.1.1",
     "emoji-regex": "^9.2.2",
+    "jszip": "^3.7.1",
     "next": "^11.1.0",
     "preview-office-docs": "^1.0.2",
     "prismjs": "^1.23.0",

utils/tools.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import sha256 from 'crypto-js/sha256'
 import useSWR, { cache, Key, useSWRInfinite } from 'swr'
+import JSZip from 'jszip'
 
 import siteConfig from '../config/site.json'
 
@@ -123,3 +124,27 @@ export const matchProtectedRoute = (route: string) => {
   }
   return authTokenPath
 }
+
+/**
+ * Download multiple files after compressing them into a zip
+ * @param files Files to be downloaded
+ * @param folder Optional folder name to hold files, otherwise flatten files in the zip
+ */
+export const saveFiles = (files: { name: string, url: string }[], folder?: string) => {
+  const zip = new JSZip()
+  const dir = folder ? zip.folder(folder)! : zip
+  files.forEach(({ name, url }) => {
+    dir.file(name, fetch(url).then(r => r.blob()))
+  })
+  dir.generateAsync({ type: 'blob' }).then(b => {
+    const el = document.createElement('a')
+    el.style.display = 'none'
+    document.body.appendChild(el)
+    const bUrl = window.URL.createObjectURL(b)
+    el.href = bUrl
+    el.download = folder ? folder + '.zip' : 'download.zip'
+    el.click()
+    window.URL.revokeObjectURL(bUrl)
+    el.remove()
+  })
+}