feat: file manager thumbnail preview

package.json

@@ -10,8 +10,7 @@
     "dev": "nodemon server",
     "legacy:dev": "NODE_OPTIONS=--openssl-legacy-provider node dev",
     "legacy:build": "NODE_OPTIONS=--openssl-legacy-provider webpack --profile --config dev/webpack/webpack.prod.js",
-    "test": "eslint --format codeframe --ext .js,.vue . && pug-lint server/views && jest",
-    "cypress:open": "cypress open"
+    "test": "eslint --format codeframe --ext .js,.vue . && pug-lint server/views && jest"
   },
   "repository": {
     "type": "git",

server/controllers/common.js

@@ -5,8 +5,6 @@ const _ = require('lodash')
 const CleanCSS = require('clean-css')
 const moment = require('moment')
 const path = require('path')
-
-const tmplCreateRegex = /^[0-9]+(,[0-9]+)?$/
 const siteAssetsPath = path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, 'assets')
 
 /**
@@ -78,30 +76,35 @@ router.get('/_site/:siteId?/:resource', async (req, res, next) => {
 /**
  * Asset Thumbnails / Download
  */
-router.get('/_asset/:siteId/:mode/*', async (req, res, next) => {
-  const site = req.params.siteId ? WIKI.sites[req.params.siteId] : await WIKI.db.sites.getSiteByHostname({ hostname: req.hostname })
-  if (!site) {
-    return res.status(404).send('Site Not Found')
-  }
-  const filePath = req.params[0]
-  console.info(filePath)
-  switch (req.params.mode) {
-    case 'thumb': {
-      try {
+router.get('/_thumb/:id.png', async (req, res, next) => {
+  const thumb = await WIKI.db.assets.getThumbnail({
+    id: req.params.id
+  })
 
-      } catch (err) {
+  if (thumb) {
+    // TODO: Check permissions
 
+    switch (thumb.previewState) {
+      case 'pending': {
+        res.send('PENDING')
+        break
       }
+      case 'ready': {
+        res.set('Content-Type', 'image/png')
+        res.send(thumb.preview)
         break
       }
-    case 'download': {
+      case 'failed': {
+        res.status(500).send('Thumbnail Preview Failed').end()
         break
       }
       default: {
-      return res.status(404).send('Invalid Site Resource')
+        return res.status(500).send('Invalid Thumbnail Preview State')
       }
     }
-  return res.send('BOB').end()
+  } else {
+    return res.sendStatus(404)
+  }
 })
 
 /**

server/core/system.js

@@ -10,6 +10,9 @@ module.exports = {
     minimumNodeRequired: '18.0.0'
   },
   init () {
+    fs.ensureDir(path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, 'assets'))
+    fs.ensureDir(path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, 'uploads'))
+
     // Clear content cache
     fs.emptyDir(path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, 'cache'))
 

server/graph/resolvers/asset.js

@@ -258,7 +258,7 @@ module.exports = {
           const asset = assetRaw[0]
 
           // Add to tree
-          const treeAsset = await WIKI.db.tree.addAsset({
+          await WIKI.db.tree.addAsset({
             id: asset.id,
             parentPath: folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName,
             fileName: formattedFilename,
@@ -309,13 +309,7 @@ module.exports = {
               WIKI.logger.warn('Cannot generate asset thumbnail because the Sharp extension is not installed.')
             } else {
               WIKI.logger.debug(`Generating thumbnail of asset ${sanitizedFilename}...`)
-              const previewDestFolder = path.resolve(
-                WIKI.ROOTPATH,
-                WIKI.config.dataPath,
-                'assets'
-              )
-              const previewDestPath = path.join(previewDestFolder, `asset-thumb-${treeAsset.hash}.png`)
-              await fs.ensureDir(previewDestFolder)
+              const previewDestPath = path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, `uploads/${tempFileId}-thumb.png`)
               // -> Resize
               await WIKI.extensions.ext.sharp.resize({
                 format: 'png',
@@ -332,6 +326,9 @@ module.exports = {
                 preview: await fs.readFile(previewDestPath),
                 previewState: 'ready'
               })
+
+              // -> Delete
+              await fs.remove(previewDestPath)
             }
           }
 

server/models/assets.js

@@ -3,6 +3,7 @@ const moment = require('moment')
 const path = require('path')
 const fs = require('fs-extra')
 const _ = require('lodash')
+const commonHelper = require('../helpers/common')
 
 /**
  * Users model
@@ -160,7 +161,19 @@ module.exports = class Asset extends Model {
     }
   }
 
-  static async getAsset(assetPath, res) {
+  static async getThumbnail ({ id, path, locale, siteId }) {
+    return WIKI.db.tree.query()
+      .select('tree.*', 'assets.preview', 'assets.previewState')
+      .innerJoin('assets', 'tree.id', 'assets.id')
+      .where(id ? { 'tree.id': id } : {
+        'tree.hash': commonHelper.generateHash(path),
+        'tree.localeCode': locale,
+        'tree.siteId': siteId
+      })
+      .first()
+  }
+
+  static async getAsset({ path, locale, siteId }, res) {
     try {
       const fileInfo = '' // assetHelper.getPathInfo(assetPath)
       const fileHash = '' // assetHelper.generateHash(assetPath)

server/modules/extensions/sharp/ext.js

@@ -51,7 +51,8 @@ module.exports = {
     width = null,
     height = null,
     fit = 'cover',
-    background = { r: 0, g: 0, b: 0, alpha: 0 }
+    background = { r: 0, g: 0, b: 0, alpha: 0 },
+    kernel = 'lanczos3'
   }) {
     this.load()
 
@@ -75,7 +76,8 @@ module.exports = {
         width,
         height,
         fit,
-        background
+        background,
+        kernel
       }).toFormat(format)
 
       return pipeline([inputStream, transformer, outputStream])

server/views/base.pug

@@ -44,7 +44,7 @@ html(lang=siteConfig.lang)
     link(
       type='text/css'
       rel='stylesheet'
-      href='/_assets-legacy/css/app.36b4c9522aa279325701.css'
+      href='/_assets-legacy/css/app.c05740c020721e44657c.css'
     )
       
     
@@ -54,14 +54,14 @@ html(lang=siteConfig.lang)
       
     script(
       type='text/javascript'
-      src='/_assets-legacy/js/runtime.js?1671237890'
+      src='/_assets-legacy/js/runtime.js?1674373130'
       )
       
     
       
     script(
       type='text/javascript'
-      src='/_assets-legacy/js/app.js?1671237890'
+      src='/_assets-legacy/js/app.js?1674373130'
       )
       
     

ux/quasar.config.js

@@ -102,11 +102,12 @@ module.exports = configure(function (/* ctx */) {
     devServer: {
       // https: true
       open: false, // opens browser window automatically
-      port: 5001,
+      port: 3001,
       proxy: {
-        '/_graphql': 'http://localhost:5000/_graphql',
-        '/_site': 'http://localhost:5000',
-        '/_user': 'http://localhost:5000'
+        '/_graphql': 'http://127.0.0.1:3000/_graphql',
+        '/_site': 'http://127.0.0.1:3000',
+        '/_thumb': 'http://127.0.0.1:3000',
+        '/_user': 'http://127.0.0.1:3000'
       }
     },
 

ux/src/components/FileManager.vue

@@ -68,7 +68,7 @@ q-layout.fileman(view='hHh lpR lFr', container)
       .q-pa-md
         template(v-if='currentFileDetails')
           q-img.rounded-borders.q-mb-md(
-            src='/_assets/illustrations/fileman-page.svg'
+            :src='currentFileDetails.thumbnail'
             width='100%'
             fit='cover'
             :ratio='16/10'
@@ -450,8 +450,10 @@ const currentFileDetails = computed(() => {
         value: item.title
       }
     ]
+    let thumbnail = ''
     switch (item.type) {
       case 'page': {
+        thumbnail = '/_assets/illustrations/fileman-page.svg'
         items.push({
           label: t('fileman.detailsPageType'),
           value: t(`fileman.${item.pageType}PageType`)
@@ -471,6 +473,7 @@ const currentFileDetails = computed(() => {
         break
       }
       case 'asset': {
+        thumbnail = `/_thumb/${item.id}.png`
         items.push({
           label: t('fileman.detailsAssetType'),
           value: fileTypes[item.fileExt] ? t(`fileman.${item.fileExt}FileType`) : t('fileman.unknownFileType', { type: item.fileExt.toUpperCase() })
@@ -483,7 +486,7 @@ const currentFileDetails = computed(() => {
       }
     }
     return {
-      thumbnail: '',
+      thumbnail,
       items
     }
   } else {