feat: asset upload via file manager

server/core/servers.js

@@ -144,7 +144,10 @@ module.exports = {
       ]
     })
     await this.graph.start()
-    WIKI.app.use(graphqlUploadExpress())
+    WIKI.app.use(graphqlUploadExpress({
+      maxFileSize: WIKI.config.security.uploadMaxFileSize,
+      maxFiles: WIKI.config.security.uploadMaxFiles
+    }))
     this.graph.applyMiddleware({ app: WIKI.app, cors: false, path: '/_graphql' })
   },
   /**

server/db/migrations/3.0.0.js

@@ -44,18 +44,19 @@ exports.up = async knex => {
     // ASSETS ------------------------------
     .createTable('assets', table => {
       table.uuid('id').notNullable().primary().defaultTo(knex.raw('gen_random_uuid()'))
-      table.string('filename').notNullable()
-      table.string('ext').notNullable()
+      table.string('fileName').notNullable()
+      table.string('fileExt').notNullable()
       table.boolean('isSystem').notNullable().defaultTo(false)
       table.enum('kind', ['document', 'image', 'other']).notNullable().defaultTo('other')
-      table.string('mime').notNullable().defaultTo('application/octet-stream')
-      table.integer('fileSize').unsigned().comment('In kilobytes')
-      table.jsonb('metadata').notNullable().defaultTo('{}')
+      table.string('mimeType').notNullable().defaultTo('application/octet-stream')
+      table.integer('fileSize').unsigned().comment('In bytes')
+      table.jsonb('meta').notNullable().defaultTo('{}')
       table.timestamp('createdAt').notNullable().defaultTo(knex.fn.now())
       table.timestamp('updatedAt').notNullable().defaultTo(knex.fn.now())
-      table.binary('data').notNullable()
+      table.binary('data')
       table.binary('preview')
       table.enum('previewState', ['none', 'pending', 'ready', 'failed']).notNullable().defaultTo('none')
+      table.jsonb('storageInfo')
     })
     // AUTHENTICATION ----------------------
     .createTable('authentication', table => {

server/graph/resolvers/asset.js

@@ -4,6 +4,7 @@ const graphHelper = require('../../helpers/graph')
 const path = require('node:path')
 const fs = require('fs-extra')
 const { v4: uuid } = require('uuid')
+const { pipeline } = require('node:stream/promises')
 
 module.exports = {
   Query: {
@@ -136,9 +137,42 @@ module.exports = {
     async uploadAssets(obj, args, context) {
       try {
         // -> Get Folder
-        const folder = await WIKI.db.tree.query().findById(args.folderId)
-        if (!folder) {
-          throw new Error('ERR_INVALID_FOLDER_ID')
+        let folder = {}
+        if (args.folderId || args.folderPath) {
+          // Get Folder by ID
+          folder = await WIKI.db.tree.getFolder({ id: args.folderId })
+          if (!folder) {
+            throw new Error('ERR_INVALID_FOLDER_ID')
+          }
+        } else if (args.folderPath) {
+          // Get Folder by Path
+          if (!args.locale) {
+            throw new Error('ERR_MISSING_LOCALE')
+          } else if (!args.siteId) {
+            throw new Error('ERR_MISSING_SITE_ID')
+          }
+          folder = await WIKI.db.tree.getFolder({
+            path: args.folderPath,
+            locale: args.locale,
+            siteId: args.siteId,
+            createIfMissing: true
+          })
+          if (!folder) {
+            throw new Error('ERR_INVALID_FOLDER_PATH')
+          }
+        } else {
+          // Use Root Folder
+          if (!args.locale) {
+            throw new Error('ERR_MISSING_LOCALE')
+          } else if (!args.siteId) {
+            throw new Error('ERR_MISSING_SITE_ID')
+          }
+          folder = {
+            folderPath: '',
+            fileName: '',
+            localeCode: args.locale,
+            siteId: args.siteId
+          }
         }
 
         // -> Get Site
@@ -147,60 +181,188 @@ module.exports = {
           throw new Error('ERR_INVALID_SITE_ID')
         }
 
+        // -> Get Storage Targets
+        const storageTargets = await WIKI.db.storage.getTargets({ siteId: folder.siteId, enabledOnly: true })
+
+        // -> Process Assets
         const results = await Promise.allSettled(args.files.map(async fl => {
           const { filename, mimetype, createReadStream } = await fl
-          WIKI.logger.debug(`Processing asset upload ${filename} of type ${mimetype}...`)
+          const sanitizedFilename = sanitize(filename).toLowerCase().trim()
+
+          WIKI.logger.debug(`Processing asset upload ${sanitizedFilename} of type ${mimetype}...`)
+
+          // Parse file extension
+          if (sanitizedFilename.indexOf('.') <= 0) {
+            throw new Error('ERR_ASSET_DOTFILE_NOTALLOWED')
+          }
+          const fileExt = _.last(sanitizedFilename.split('.')).toLowerCase()
+
+          // Determine asset kind
+          let fileKind = 'other'
+          switch (fileExt) {
+            case 'jpg':
+            case 'jpeg':
+            case 'png':
+            case 'webp':
+            case 'gif':
+            case 'tiff':
+            case 'svg':
+              fileKind = 'image'
+              break
+            case 'pdf':
+            case 'docx':
+            case 'xlsx':
+            case 'pptx':
+            case 'odt':
+            case 'epub':
+            case 'csv':
+            case 'md':
+            case 'txt':
+            case 'adoc':
+            case 'rtf':
+            case 'wdp':
+            case 'xps':
+            case 'ods':
+              fileKind = 'document'
+              break
+          }
+
+          // Save to temp disk
+          const tempFileId = uuid()
+          const tempFilePath = path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, `uploads/${tempFileId}.dat`)
+          WIKI.logger.debug(`Writing asset upload ${sanitizedFilename} to temp disk...`)
+          await pipeline(
+            createReadStream(),
+            fs.createWriteStream(tempFilePath)
+          )
+          WIKI.logger.debug(`Querying asset ${sanitizedFilename} file size...`)
+          const tempFileStat = await fs.stat(tempFilePath)
 
           // Format filename
-          const formattedFilename = ''
+          const formattedFilename = site.config.uploads.normalizeFilename ? sanitizedFilename.replaceAll(' ', '-') : sanitizedFilename
 
           // Save asset to DB
-          const asset = await WIKI.db.knex('assets').insert({
+          WIKI.logger.debug(`Saving asset ${sanitizedFilename} metadata to DB...`)
+          const assetRaw = await WIKI.db.knex('assets').insert({
+            fileName: formattedFilename,
+            fileExt,
+            kind: fileKind,
+            mimeType: mimetype,
+            fileSize: Math.round(tempFileStat.size),
+            meta: {},
+            previewState: fileKind === 'image' ? 'pending' : 'none',
+            authorId: context.req.user.id,
+            siteId: folder.siteId
+          }).returning('*')
 
-          }).returning('id')
+          const asset = assetRaw[0]
 
           // Add to tree
-          await WIKI.db.knex('tree').insert({
+          const treeAsset = await WIKI.db.tree.addAsset({
             id: asset.id,
-            folderPath: folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName,
+            parentPath: folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName,
             fileName: formattedFilename,
-            type: 'asset',
-            localeCode: ''
+            title: formattedFilename,
+            locale: folder.localeCode,
+            siteId: folder.siteId,
+            meta: {
+              authorId: asset.authorId,
+              creatorId: asset.creatorId,
+              fileSize: asset.fileSize,
+              fileExt,
+              mimeType: mimetype,
+              ownerId: asset.ownerId
+            }
           })
 
+          // Save to storage targets
+          const storageInfo = {}
+          const failedStorage = []
+          await Promise.allSettled(storageTargets.map(async storageTarget => {
+            WIKI.logger.debug(`Saving asset ${sanitizedFilename} to storage target ${storageTarget.module} (${storageTarget.id})...`)
+            try {
+              const strInfo = await WIKI.storage.modules[storageTarget.module].assetUploaded({
+                asset,
+                createReadStream,
+                storageTarget,
+                tempFilePath
+              })
+              storageInfo[storageTarget.id] = strInfo ?? true
+            } catch (err) {
+              WIKI.logger.warn(`Failed to save asset ${sanitizedFilename} to storage target ${storageTarget.module} (${storageTarget.id}):`)
+              WIKI.logger.warn(err)
+              failedStorage.push({
+                storageId: storageTarget.id,
+                storageModule: storageTarget.module,
+                fileId: asset.id,
+                fileName: formattedFilename
+              })
+            }
+          }))
+
+          // Save Storage Info to DB
+          await WIKI.db.knex('assets').where({ id: asset.id }).update({ storageInfo })
+
           // Create thumbnail
-          if (!['.png', '.jpg', 'webp', '.gif'].some(s => filename.endsWith(s))) {
+          if (fileKind === 'image') {
             if (!WIKI.extensions.ext.sharp.isInstalled) {
               WIKI.logger.warn('Cannot generate asset thumbnail because the Sharp extension is not installed.')
             } else {
-              const destFormat = mimetype.startsWith('image/svg') ? 'svg' : 'png'
-              const destFolder = path.resolve(
-                process.cwd(),
+              WIKI.logger.debug(`Generating thumbnail of asset ${sanitizedFilename}...`)
+              const previewDestFolder = path.resolve(
+                WIKI.ROOTPATH,
                 WIKI.config.dataPath,
-                `assets`
+                'assets'
               )
-              const destPath = path.join(destFolder, `asset-${site.id}-${hash}.${destFormat}`)
-              await fs.ensureDir(destFolder)
+              const previewDestPath = path.join(previewDestFolder, `asset-thumb-${treeAsset.hash}.png`)
+              await fs.ensureDir(previewDestFolder)
               // -> Resize
               await WIKI.extensions.ext.sharp.resize({
-                format: destFormat,
+                format: 'png',
                 inputStream: createReadStream(),
-                outputPath: destPath,
-                height: 72
+                outputPath: previewDestPath,
+                width: 320,
+                height: 200,
+                fit: 'inside'
+              })
+              // -> Save to DB
+              await WIKI.db.knex('assets').where({
+                id: asset.id
+              }).update({
+                preview: await fs.readFile(previewDestPath),
+                previewState: 'ready'
               })
             }
           }
 
-          // -> Save image data to DB
-          const imgBuffer = await fs.readFile(destPath)
-          await WIKI.db.knex('assetData').insert({
-            id: site.config.assets.logo,
-            data: imgBuffer
-          }).onConflict('id').merge()
+          WIKI.logger.debug(`Removing asset ${sanitizedFilename} temp file...`)
+          await fs.remove(tempFilePath)
+
+          WIKI.logger.debug(`Processed asset ${sanitizedFilename} successfully.`)
+          return failedStorage
         }))
-        WIKI.logger.debug('Asset(s) uploaded successfully.')
-        return {
-          operation: graphHelper.generateSuccess('Asset(s) uploaded successfully')
+
+        // Return results
+        const failedResults = results.filter(r => r.status === 'rejected')
+        if (failedResults.length > 0) {
+          // -> One or more thrown errors
+          WIKI.logger.warn(`Failed to upload one or more assets:`)
+          for (const failedResult of failedResults) {
+            WIKI.logger.warn(failedResult.reason)
+          }
+          throw new Error('ERR_UPLOAD_FAILED')
+        } else {
+          const failedSaveTargets = results.map(r => r.value).filter(r => r.length > 0)
+          if (failedSaveTargets.length > 0) {
+            // -> One or more storage target save errors
+            WIKI.logger.warn('Failed to save one or more assets to storage targets.')
+            throw new Error('ERR_UPLOAD_TARGET_FAILED')
+          } else {
+            WIKI.logger.debug('Asset(s) uploaded successfully.')
+            return {
+              operation: graphHelper.generateSuccess('Asset(s) uploaded successfully')
+            }
+          }
         }
       } catch (err) {
         WIKI.logger.warn(err)

server/graph/resolvers/site.js

@@ -186,10 +186,10 @@ module.exports = {
           id: site.config.assets.logo,
           filename: `_logo.${destFormat}`,
           hash: '_logo',
-          ext: `.${destFormat}`,
+          fileExt: `.${destFormat}`,
           isSystem: true,
           kind: 'image',
-          mime: (destFormat === 'svg') ? 'image/svg' : 'image/png',
+          mimeType: (destFormat === 'svg') ? 'image/svg' : 'image/png',
           fileSize: Math.ceil(imgBuffer.byteLength / 1024),
           data: imgBuffer,
           authorId: context.req.user.id,

server/graph/resolvers/tree.js

@@ -100,6 +100,11 @@ module.exports = {
         ...(item.type === 'folder') && {
           childrenCount: item.meta?.children || 0,
           isAncestor: item.folderPath.length < parentPath.length
+        },
+        ...(item.type === 'asset') && {
+          fileSize: item.meta?.fileSize || 0,
+          fileExt: item.meta?.fileExt || '',
+          mimeType: item.meta?.mimeType || ''
         }
       }))
     },

server/graph/schemas/tree.graphql

@@ -122,7 +122,8 @@ type TreeItemAsset implements TreeItem {
   fileName: String
   # In Bytes
   fileSize: Int
-  fileType: String
+  fileExt: String
+  mimeType: String
   folderPath: String
   title: String
   updatedAt: Date

server/models/sites.js

@@ -106,6 +106,10 @@ module.exports = class Site extends Model {
           showPrintBtn: true,
           baseFont: 'roboto',
           contentFont: 'roboto'
+        },
+        uploads: {
+          conflictBehavior: 'overwrite',
+          normalizeFilename: true
         }
       })
     })

server/models/storage.js

@@ -28,11 +28,14 @@ module.exports = class Storage extends Model {
     return ['contentTypes', 'assetDelivery', 'versioning', 'schedule', 'config', 'state']
   }
 
-  static async getTargets ({ siteId }) {
+  static async getTargets ({ siteId, enabledOnly = false } = {}) {
     return WIKI.db.storage.query().where(builder => {
       if (siteId) {
         builder.where('siteId', siteId)
       }
+      if (enabledOnly) {
+        builder.where('isEnabled', true)
+      }
     })
   }
 

server/models/tree.js

@@ -90,7 +90,8 @@ module.exports = class Tree extends Model {
       }
       const parent = await WIKI.db.knex('tree').where({
         ...parentFilter,
-        locale,
+        type: 'folder',
+        localeCode: locale,
         siteId
       }).first()
       if (parent) {
@@ -119,6 +120,7 @@ module.exports = class Tree extends Model {
    * @param {string} args.title - Title of the page to add
    * @param {string} args.locale - Locale code of the page to add
    * @param {string} args.siteId - UUID of the site in which the page will be added
+   * @param {Object} [args.meta] - Extra metadata
    */
   static async addPage ({ id, parentId, parentPath, fileName, title, locale, siteId, meta = {} }) {
     const folder = (parentId || parentPath) ? await WIKI.db.tree.getFolder({
@@ -151,6 +153,49 @@ module.exports = class Tree extends Model {
     return pageEntry[0]
   }
 
+  /**
+   * Add Asset Entry
+   *
+   * @param {Object} args - New Asset Properties
+   * @param {string} [args.parentId] - UUID of the parent folder
+   * @param {string} [args.parentPath] - Path of the parent folder
+   * @param {string} args.pathName - Path name of the asset to add
+   * @param {string} args.title - Title of the asset to add
+   * @param {string} args.locale - Locale code of the asset to add
+   * @param {string} args.siteId - UUID of the site in which the asset will be added
+   * @param {Object} [args.meta] - Extra metadata
+   */
+  static async addAsset ({ id, parentId, parentPath, fileName, title, locale, siteId, meta = {} }) {
+    const folder = (parentId || parentPath) ? await WIKI.db.tree.getFolder({
+      id: parentId,
+      path: parentPath,
+      locale,
+      siteId,
+      createIfMissing: true
+    }) : {
+      folderPath: '',
+      fileName: ''
+    }
+    const folderPath = commonHelper.decodeTreePath(folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName)
+    const fullPath = folderPath ? `${folderPath}/${fileName}` : fileName
+
+    WIKI.logger.debug(`Adding asset ${fullPath} to tree...`)
+
+    const assetEntry = await WIKI.db.knex('tree').insert({
+      id,
+      folderPath,
+      fileName,
+      type: 'asset',
+      title: title,
+      hash: commonHelper.generateHash(fullPath),
+      localeCode: locale,
+      siteId,
+      meta
+    }).returning('*')
+
+    return assetEntry[0]
+  }
+
   /**
    * Create New Folder
    *

server/modules/storage/db/storage.js

@@ -1,3 +1,5 @@
+const fs = require('fs-extra')
+
 module.exports = {
   async activated () { },
   async deactivated () { },
@@ -6,7 +8,16 @@ module.exports = {
   async updated (page) { },
   async deleted (page) { },
   async renamed (page) { },
-  async assetUploaded (asset) { },
+  async assetUploaded ({ asset, tempFilePath, createReadStream }) {
+    await WIKI.db.knex('assets').where({
+      id: asset.id
+    }).update({
+      data: await fs.readFile(tempFilePath)
+    })
+    return {
+      available: true
+    }
+  },
   async assetDeleted (asset) { },
   async assetRenamed (asset) { },
   async getLocalLocation () { },

ux/public/_assets/icons/color-7zip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff9100" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#ffe0b2" d="M38.5 14L29 14 29 4.5zM24.022 24.152L20.878 33h-2.044l3.158-8.359H18v-1.594h6.022V24.152zM27.461 31.406h2.926V33h-5.223v-1.199l2.857-4.584h-2.789v-1.613h5.113v1.17L27.461 31.406z"/></svg>

ux/public/_assets/icons/color-aac.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FFC107" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFF3E0" d="M38.5 14L29 14 29 4.5z"/><path fill="#C47205" d="M17.4 30.963h-2.741L14.126 33H12l3.11-9.953h1.839L20.08 33h-2.146L17.4 30.963zM15.097 29.288h1.859l-.93-3.548L15.097 29.288zM25.761 30.963H23.02L22.486 33H20.36l3.11-9.953h1.839L28.44 33h-2.146L25.761 30.963zM23.457 29.288h1.859l-.93-3.548L23.457 29.288zM35.974 29.685c-.05 1.135-.369 1.994-.957 2.577s-1.417.875-2.488.875c-1.126 0-1.988-.37-2.587-1.11-.6-.741-.899-1.797-.899-3.169v-1.675c0-1.367.31-2.421.93-3.162.62-.74 1.481-1.11 2.584-1.11 1.085 0 1.908.303 2.472.909.563.606.883 1.477.96 2.611h-2.017c-.018-.702-.127-1.186-.324-1.453-.199-.266-.563-.399-1.091-.399-.538 0-.919.188-1.142.563-.223.377-.342.995-.355 1.856v1.88c0 .989.11 1.668.332 2.037.221.369.6.554 1.138.554.528 0 .894-.129 1.094-.386.2-.258.314-.724.342-1.398H35.974z"/></svg>

ux/public/_assets/icons/color-ai.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FFA000" d="M41 45L9 45 9 3 31 3 41 13z"/><path fill="#FFF3E0" d="M39.5 14L30 14 30 4.5z"/><path fill="#FFF" d="M24.292 30.963h-2.741L21.018 33h-2.126l3.11-9.953h1.839L26.972 33h-2.146L24.292 30.963zM21.988 29.288h1.859l-.93-3.548L21.988 29.288zM30 33h-2v-9.953h2V33z"/></svg>

ux/public/_assets/icons/color-apk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff80ab" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#fce4ec" d="M38.5 14L29 14 29 4.5z"/><path fill="#e91e63" d="M17.217 31.054h-2.741l-.533 2.037h-2.126l3.11-9.953h1.839l3.131 9.953H17.75L17.217 31.054zM14.913 29.379h1.859l-.93-3.548L14.913 29.379zM32.152 29.249l-.793.998v2.844h-2.01v-9.953h2.01v4.341l.636-1.073 1.853-3.268h2.461l-2.851 4.375 2.898 5.578h-2.386L32.152 29.249zM23.396 29.591v3.5h-2.01v-9.953h3.391c2.375 0 3.233 1.879 3.233 3.295 0 2.511-1.926 3.158-3.233 3.158H23.396zM23.396 27.916h1.381c1.187 0 1.203-1.256 1.203-1.47s-.057-1.634-1.203-1.634h-1.381V27.916z"/></svg>

ux/public/_assets/icons/color-archive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#90caf9" d="M8 3H40V45H8z"/><path fill="#1976d2" d="M22 21H26V23H22zM22 15H26V17H22zM22 18H26V20H22zM22 24H26V26H22zM22 9H26V11H22zM22 3H26V5H22zM22 6H26V8H22zM22 12H26V14H22z"/><path fill="#3f51b5" d="M26,27h-4c0,3-2,6-2,8c0,2.209,1.791,4,4,4s4-1.791,4-4C28,33,26,30,26,27z M24,37c-1.104,0-2-0.895-2-2s0.896-2,2-2s2,0.895,2,2S25.104,37,24,37z"/></svg>

ux/public/_assets/icons/color-audio-file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="none" d="M204 0H252V48H204z"/><path fill="#90CAF9" d="M244 45L212 45 212 3 234 3 244 13z"/><path fill="#E1F5FE" d="M242.5 14L233 14 233 4.5z"/><path fill="#1976D2" d="M227 26A4 4 0 1 0 227 34A4 4 0 1 0 227 26Z"/><path fill="#1976D2" d="M234 21L229 19 229 30 231 30 231 22.9 234 24z"/><path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"/><g><path fill="#1976D2" d="M23 26A4 4 0 1 0 23 34A4 4 0 1 0 23 26Z"/><path fill="#1976D2" d="M30 21L25 19 25 30 27 30 27 22.9 30 24z"/></g></svg>

ux/public/_assets/icons/color-avi.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#F44336" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFEBEE" d="M38.5 14L29 14 29 4.5zM19.551 30.963H16.81L16.276 33H14.15l3.11-9.953H19.1L22.23 33h-2.146L19.551 30.963zM17.247 29.288h1.859l-.93-3.548L17.247 29.288zM25.874 30.266l1.675-7.219h2.242L26.92 33h-2.092l-2.851-9.953h2.229L25.874 30.266zM32.826 33h-2.01v-9.953h2.01V33z"/></svg>

ux/public/_assets/icons/color-cd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#90caf9" d="M24,4C12.954,4,4,12.955,4,24s8.954,20,20,20s20-8.955,20-20S35.046,4,24,4z M24,27.684c-2.035,0-3.684-1.649-3.684-3.684s1.649-3.684,3.684-3.684s3.684,1.649,3.684,3.684S26.035,27.684,24,27.684z"/><path fill="#cfe8f9" d="M28.022 22.645l10.902-8.699c-1.326-1.963-3.033-3.645-5.008-4.955l-8.759 10.925C26.505 20.3 27.574 21.323 28.022 22.645zM19.934 25.214L8.999 33.927c1.333 2.008 3.057 3.734 5.065 5.068l8.665-10.946C21.385 27.623 20.339 26.565 19.934 25.214z"/><path fill="#1e88e5" d="M24,18c-3.314,0-6,2.688-6,6s2.686,6,6,6c3.313,0,6-2.688,6-6S27.313,18,24,18z M24,26c-1.104,0-2-0.895-2-2s0.896-2,2-2s2,0.895,2,2S25.104,26,24,26z"/></svg>

ux/public/_assets/icons/color-code-file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"/><path fill="#1976D2" d="M18.3,34.7L11.6,28l6.7-6.7l1.4,1.4L14.4,28l5.3,5.3L18.3,34.7z M36.4,28l-6.7-6.7l-1.4,1.4l5.3,5.3l-5.3,5.3l1.4,1.4L36.4,28z M27.9,16.6L26,16l-5.9,23.4L22,40L27.9,16.6z"/></svg>

ux/public/_assets/icons/color-csv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#4DB6AC" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E0F2F1" d="M38.5 14L29 14 29 4.5z"/><path fill="#00695C" d="M20.045 29.685c-.05 1.135-.369 1.994-.957 2.577s-1.417.875-2.488.875c-1.125 0-1.988-.37-2.587-1.11-.599-.741-.899-1.797-.899-3.169v-1.675c0-1.367.31-2.421.93-3.162.62-.74 1.481-1.11 2.584-1.11 1.084 0 1.908.303 2.471.909s.883 1.477.96 2.611h-2.017c-.018-.702-.126-1.186-.325-1.453-.198-.266-.562-.399-1.09-.399-.538 0-.918.188-1.142.563-.223.377-.342.995-.355 1.856v1.88c0 .989.11 1.668.332 2.037s.601.554 1.138.554c.529 0 .893-.129 1.094-.386.201-.258.314-.724.342-1.398H20.045zM25.486 30.389c0-.405-.104-.712-.311-.919-.208-.208-.585-.423-1.132-.646-.998-.378-1.716-.821-2.153-1.33-.438-.508-.656-1.108-.656-1.801 0-.839.297-1.512.892-2.02.595-.509 1.35-.763 2.266-.763.611 0 1.155.129 1.634.386.479.258.847.621 1.104 1.091.257.47.386 1.003.386 1.6h-2.003c0-.465-.1-.819-.297-1.063-.199-.243-.485-.365-.858-.365-.351 0-.625.104-.82.311-.196.208-.294.487-.294.838 0 .273.109.521.328.742.219.221.606.449 1.162.687.971.351 1.676.781 2.115 1.292.44.511.66 1.16.66 1.948 0 .866-.275 1.543-.827 2.03s-1.302.731-2.249.731c-.643 0-1.228-.132-1.757-.396s-.942-.643-1.241-1.135-.448-1.073-.448-1.743h2.017c0 .574.112.991.335 1.251s.588.39 1.094.39C25.135 31.503 25.486 31.132 25.486 30.389zM32.083 30.266l1.675-7.219H36L33.129 33h-2.092l-2.851-9.953h2.229L32.083 30.266z"/></svg>

ux/public/_assets/icons/color-dmg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FF80AB" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FCE4EC" d="M38.5 14L29 14 29 4.5z"/><path fill="#E91E63" d="M11.707 33v-9.953h2.632c1.162 0 2.088.369 2.779 1.107s1.042 1.75 1.056 3.035v1.613c0 1.308-.345 2.335-1.036 3.079C16.448 32.628 15.497 33 14.284 33H11.707zM13.717 24.722v6.61h.602c.67 0 1.142-.177 1.415-.53.273-.353.417-.962.431-1.828v-1.729c0-.93-.13-1.578-.39-1.944-.26-.367-.702-.56-1.326-.578H13.717zM22.241 23.047l1.88 7.198 1.873-7.198h2.625V33h-2.017v-2.693l.185-4.149L24.798 33h-1.367l-1.989-6.843.185 4.149V33h-2.01v-9.953H22.241zM37 31.872c-.387.419-.862.734-1.426.947-.563.211-1.179.317-1.849.317-1.144 0-2.032-.354-2.666-1.063-.634-.708-.96-1.739-.978-3.093v-1.791c0-1.372.3-2.428.898-3.169.6-.74 1.474-1.11 2.622-1.11 1.08 0 1.895.267 2.444.8.549.533.867 1.369.953 2.509h-1.955c-.055-.634-.188-1.065-.396-1.296-.209-.229-.537-.345-.984-.345-.543 0-.937.198-1.183.595s-.374 1.027-.383 1.894v1.805c0 .907.136 1.566.407 1.979.271.412.717.618 1.336.618.396 0 .718-.08.964-.239l.178-.123v-1.825h-1.408v-1.518H37V31.872z"/></svg>

ux/public/_assets/icons/color-doc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#BA68C8" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#F3E5F5" d="M38.5 14L29 14 29 4.5z"/><path fill="#4A148C" d="M28,28.9c0,1.3-0.3,2.4-0.9,3.1c-0.6,0.7-1.5,1.1-2.6,1.1c-1.1,0-2-0.4-2.6-1.1c-0.6-0.7-1-1.8-1-3.1v-1.7c0-1.4,0.3-2.4,1-3.2c0.6-0.8,1.5-1.2,2.6-1.2c1.1,0,2,0.4,2.6,1.1c0.6,0.8,1,1.8,1,3.2V28.9z M26,27.3c0-0.9-0.1-1.6-0.4-2c-0.3-0.4-0.7-0.7-1.2-0.7c-0.5,0-0.9,0.2-1.2,0.6c-0.3,0.4-0.4,1.1-0.4,1.9v1.8c0,0.9,0.1,1.5,0.4,1.9c0.3,0.4,0.7,0.6,1.2,0.6c0.5,0,0.9-0.2,1.2-0.6c0.3-0.4,0.4-1,0.4-1.9V27.3z M13,33V23h2.6c1.2,0,2.1,0.4,2.8,1.1c0.7,0.7,1,1.8,1.1,3v1.6c0,1.3-0.3,2.3-1,3.1c-0.7,0.7-1.6,1.1-2.9,1.1H13z M15,24.7v6.6h0.6c0.7,0,1.1-0.2,1.4-0.5c0.3-0.4,0.4-1,0.4-1.8v-1.7c0-0.9-0.1-1.6-0.4-1.9c-0.3-0.4-0.7-0.6-1.3-0.6H15z M35.9,29.8c-0.1,1.1-0.4,2-1,2.6c-0.6,0.6-1.4,0.9-2.5,0.9c-1.1,0-2-0.4-2.6-1.1c-0.6-0.7-0.9-1.8-0.9-3.2v-1.7c0-1.4,0.3-2.4,0.9-3.2c0.6-0.7,1.5-1.1,2.6-1.1c1.1,0,1.9,0.3,2.5,0.9c0.6,0.6,0.9,1.5,1,2.6h-2c0-0.7-0.1-1.2-0.3-1.5c-0.2-0.3-0.6-0.4-1.1-0.4c-0.5,0-0.9,0.2-1.1,0.6c-0.2,0.4-0.3,1-0.4,1.9V29c0,1,0.1,1.7,0.3,2c0.2,0.4,0.6,0.6,1.1,0.6c0.5,0,0.9-0.1,1.1-0.4c0.2-0.3,0.3-0.7,0.3-1.4H35.9z"/></svg>

ux/public/_assets/icons/color-exe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FF80AB" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FCE4EC" d="M38.5 14L29 14 29 4.5z"/><path fill="#E91E63" d="M18.94 28.693H15.81v2.639h3.705V33H13.8v-9.953h5.701v1.675H15.81v2.352h3.131V28.693zM23.787 26.465l1.34-3.418h2.304l-2.338 4.936L27.485 33h-2.331l-1.367-3.479L22.427 33h-2.331l2.393-5.018-2.345-4.936h2.304L23.787 26.465zM33.645 28.693h-3.131v2.639h3.705V33h-5.715v-9.953h5.701v1.675h-3.691v2.352h3.131V28.693z"/></svg>

ux/public/_assets/icons/color-gif.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#3F51B5" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8EAF6" d="M38.5 14L29 14 29 4.5zM22.567 31.872c-.387.419-.862.734-1.425.947-.563.211-1.179.317-1.849.317-1.144 0-2.033-.354-2.666-1.063-.633-.708-.959-1.739-.978-3.093v-1.791c0-1.372.3-2.428.899-3.169.599-.74 1.473-1.11 2.622-1.11 1.08 0 1.895.267 2.444.8s.867 1.369.954 2.509h-1.955c-.055-.634-.187-1.065-.396-1.296-.209-.229-.538-.345-.984-.345-.542 0-.937.198-1.183.595s-.374 1.027-.383 1.894v1.805c0 .907.136 1.566.407 1.979.271.412.717.618 1.336.618.396 0 .718-.08.964-.239l.178-.123v-1.825h-1.408v-1.518h3.425V31.872zM26.088 33h-2.01v-9.953h2.01V33zM32.91 28.939h-3.125V33h-2.01v-9.953h5.51v1.675h-3.5v2.55h3.125V28.939z"/></svg>

ux/public/_assets/icons/color-image-file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"/><path fill="#1565C0" d="M21 23L14 33 28 33z"/><path fill="#1976D2" d="M28 26.4L23 33 33 33zM31.5 23A1.5 1.5 0 1 0 31.5 26 1.5 1.5 0 1 0 31.5 23z"/></svg>

ux/public/_assets/icons/color-jpg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#3F51B5" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8EAF6" d="M38.5 14L29 14 29 4.5zM17.074 23.047h2.01v6.891c0 .966-.269 1.741-.807 2.324s-1.23.875-2.078.875c-.912 0-1.62-.271-2.126-.813s-.759-1.297-.759-2.263h2.017c0 .938.29 1.408.868 1.408.583 0 .875-.542.875-1.627V23.047zM22.673 29.5V33h-2.01v-9.953h3.391c.984 0 1.77.306 2.354.916.586.61.879 1.403.879 2.379s-.289 1.745-.868 2.311S25.038 29.5 24.013 29.5H22.673zM22.673 27.825h1.381c.383 0 .679-.125.889-.376.21-.251.314-.615.314-1.094 0-.497-.106-.892-.321-1.187-.214-.293-.501-.442-.861-.447h-1.401V27.825zM35.395 31.872c-.387.419-.862.734-1.426.947-.563.211-1.179.317-1.849.317-1.144 0-2.032-.354-2.666-1.063-.634-.708-.96-1.739-.978-3.093v-1.791c0-1.372.3-2.428.898-3.169.6-.74 1.474-1.11 2.622-1.11 1.08 0 1.895.267 2.444.8.549.533.867 1.369.953 2.509h-1.955c-.055-.634-.188-1.065-.396-1.296-.209-.229-.537-.345-.984-.345-.543 0-.937.198-1.183.595s-.374 1.027-.383 1.894v1.805c0 .907.136 1.566.407 1.979.271.412.717.618 1.336.618.396 0 .718-.08.964-.239l.178-.123v-1.825H31.97v-1.518h3.425V31.872z"/></svg>

ux/public/_assets/icons/color-json.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#cfd95b" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#f5f7e1" d="M38.5 14L29 14 29 4.5z"/><path fill="#696e2d" d="M13.008,23H15v6.829c0,0.956-0.267,1.727-0.799,2.304C13.667,32.709,12.981,33,12.141,33c-0.904,0-1.606-0.269-2.107-0.805c-0.501-0.538-0.752-1.285-0.752-2.244h1.999c0,0.931,0.287,1.395,0.86,1.395c0.578,0,0.867-0.537,0.867-1.612C13.008,29.734,13.008,23,13.008,23z M20.398,30.313c0-0.395-0.101-0.697-0.305-0.9c-0.202-0.202-0.571-0.412-1.106-0.629c-0.976-0.371-1.678-0.804-2.106-1.301c-0.428-0.498-0.642-1.086-0.642-1.763c0-0.819,0.29-1.478,0.872-1.975C17.694,23.248,18.433,23,19.329,23c0.597,0,1.13,0.126,1.598,0.378s0.828,0.607,1.079,1.066c0.252,0.458,0.378,0.982,0.378,1.564h-1.959c0-0.455-0.097-0.8-0.291-1.039s-0.474-0.357-0.838-0.357c-0.344,0-0.611,0.099-0.802,0.304c-0.192,0.203-0.287,0.476-0.287,0.819c0,0.267,0.107,0.508,0.321,0.724c0.214,0.216,0.592,0.441,1.136,0.671c0.949,0.343,1.639,0.765,2.068,1.263c0.431,0.5,0.646,1.134,0.646,1.906c0,0.848-0.27,1.509-0.809,1.986c-0.54,0.476-1.274,0.715-2.2,0.715c-0.628,0-1.201-0.13-1.718-0.388c-0.518-0.258-0.922-0.628-1.214-1.11C16.146,31.021,16,30.452,16,29.799h1.972c0,0.561,0.109,0.968,0.327,1.222s0.575,0.382,1.07,0.382C20.055,31.403,20.398,31.041,20.398,30.313z M38,33h-2.01l-2.939-6.527V33h-2.01v-9.953h2.01l2.946,6.535v-6.535H38V33z M30,28.875c0,1.306-0.308,2.32-0.924,3.042C28.461,32.639,27.607,33,26.513,33c-1.09,0-1.945-0.359-2.567-1.073c-0.623-0.714-0.938-1.715-0.947-3.004v-1.664c0-1.337,0.309-2.382,0.927-3.132C24.544,23.374,25.402,23,26.5,23c1.08,0,1.93,0.369,2.553,1.108c0.622,0.737,0.937,1.772,0.947,3.104V28.875z M28.033,27.244c0-0.877-0.125-1.53-0.373-1.959c-0.249-0.427-0.636-0.641-1.16-0.641c-0.52,0-0.905,0.206-1.153,0.617c-0.25,0.412-0.378,1.041-0.387,1.883v1.73c0,0.852,0.127,1.478,0.38,1.883c0.253,0.403,0.644,0.604,1.173,0.604c0.51,0,0.89-0.195,1.14-0.592c0.249-0.393,0.375-1.005,0.38-1.833V27.244z"/></svg>

ux/public/_assets/icons/color-mov.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#F44336" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFEBEE" d="M38.5 14L29 14 29 4.5zM14.425 23.047l1.88 7.198 1.873-7.198h2.625V33h-2.017v-2.693l.185-4.149L16.981 33h-1.367l-1.989-6.843.185 4.149V33H11.8v-9.953H14.425zM29.423 28.919c0 1.335-.315 2.372-.946 3.11-.632.738-1.508 1.107-2.629 1.107-1.117 0-1.994-.366-2.632-1.097-.638-.732-.961-1.756-.971-3.073v-1.702c0-1.367.317-2.435.95-3.203.633-.768 1.513-1.151 2.639-1.151 1.107 0 1.98.377 2.618 1.132.638.754.962 1.813.971 3.175V28.919zM27.406 27.251c0-.897-.127-1.565-.383-2.003s-.652-.656-1.189-.656c-.533 0-.927.211-1.183.632-.255.422-.387 1.063-.396 1.925v1.771c0 .87.13 1.512.39 1.924.26.413.66.619 1.203.619.523 0 .914-.201 1.169-.605.255-.402.386-1.028.39-1.876V27.251zM33.955 30.266l1.675-7.219h2.242L35.001 33h-2.092l-2.851-9.953h2.229L33.955 30.266z"/></svg>

ux/public/_assets/icons/color-mp3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FFC107" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFF3E0" d="M38.5 14L29 14 29 4.5z"/><path fill="#C47205" d="M14.425 23.047l1.88 7.198 1.873-7.198h2.625V33h-2.017v-2.693l.185-4.149L16.981 33h-1.367l-1.989-6.843.185 4.149V33H11.8v-9.953H14.425zM24.426 29.5V33h-2.01v-9.953h3.391c.984 0 1.77.306 2.355.916.585.61.878 1.403.878 2.379s-.29 1.745-.868 2.311S26.791 29.5 25.766 29.5H24.426zM24.426 27.825h1.381c.383 0 .68-.125.889-.376s.314-.615.314-1.094c0-.497-.107-.892-.321-1.187-.214-.293-.501-.442-.861-.447h-1.401V27.825zM31.952 27.142h.937c.355 0 .616-.125.783-.374.166-.25.249-.583.249-1 0-.398-.085-.709-.257-.932-.17-.222-.399-.333-.687-.333-.269 0-.489.106-.659.318-.172.212-.257.479-.257.803h-1.935c0-.52.119-.985.359-1.398.238-.412.574-.734 1.004-.967.432-.232.908-.349 1.433-.349.916 0 1.634.253 2.153.759s.779 1.198.779 2.078c0 .451-.117.869-.352 1.254-.235.386-.544.681-.927.886.47.2.819.501 1.05.902.229.401.345.875.345 1.422 0 .884-.281 1.593-.845 2.126-.563.533-1.302.8-2.218.8-.853 0-1.544-.263-2.075-.79-.53-.525-.796-1.218-.796-2.074h1.935c0 .359.094.661.28.905s.424.366.711.366c.333 0 .596-.124.79-.371.193-.247.29-.577.29-.989 0-.984-.38-1.479-1.142-1.483h-.95V27.142z"/></svg>

ux/public/_assets/icons/color-mpg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#F44336" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFEBEE" d="M38.5 14L29 14 29 4.5zM14.425 23.047l1.88 7.198 1.873-7.198h2.625V33h-2.017v-2.693l.185-4.149L16.981 33h-1.367l-1.989-6.843.185 4.149V33H11.8v-9.953H14.425zM24.426 29.5V33h-2.01v-9.953h3.391c.984 0 1.77.306 2.355.916.585.61.878 1.403.878 2.379s-.29 1.745-.868 2.311S26.791 29.5 25.766 29.5H24.426zM24.426 27.825h1.381c.383 0 .68-.125.889-.376s.314-.615.314-1.094c0-.497-.107-.892-.321-1.187-.214-.293-.501-.442-.861-.447h-1.401V27.825zM37.147 31.872c-.388.419-.862.734-1.425.947-.563.211-1.18.317-1.85.317-1.145 0-2.033-.354-2.666-1.063-.633-.708-.959-1.739-.978-3.093v-1.791c0-1.372.3-2.428.899-3.169.599-.74 1.473-1.11 2.621-1.11 1.08 0 1.895.267 2.443.8.55.533.867 1.369.954 2.509h-1.955c-.055-.634-.187-1.065-.396-1.296-.21-.229-.538-.345-.984-.345-.542 0-.937.198-1.183.595s-.373 1.027-.383 1.894v1.805c0 .907.136 1.566.406 1.979.271.412.717.618 1.337.618.396 0 .718-.08.964-.239l.178-.123v-1.825h-1.408v-1.518h3.425V31.872z"/></svg>

ux/public/_assets/icons/color-ogg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ffc107" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#fff3e0" d="M38.5 14L29 14 29 4.5z"/><path fill="#c47205" d="M19.307 28.893c0 1.334-.315 2.373-.947 3.111-.631.738-1.507 1.106-2.628 1.106-1.117 0-1.994-.365-2.632-1.096-.639-.732-.962-1.756-.971-3.072v-1.703c0-1.367.316-2.434.95-3.203.633-.768 1.513-1.152 2.639-1.152 1.107 0 1.979.379 2.618 1.133.638.754.961 1.813.971 3.176V28.893zM17.29 27.225c0-.896-.128-1.564-.383-2.002-.256-.438-.652-.656-1.189-.656-.533 0-.928.211-1.183.631-.256.422-.388 1.064-.397 1.924v1.771c0 .869.13 1.512.39 1.924.26.414.66.619 1.203.619.523 0 .913-.201 1.169-.605.255-.402.385-1.029.39-1.877V27.225zM27.517 31.846c-.388.42-.862.734-1.426.947-.563.211-1.179.316-1.849.316-1.145 0-2.033-.354-2.666-1.063-.634-.707-.96-1.738-.978-3.094v-1.789c0-1.373.3-2.43.899-3.17.6-.74 1.474-1.111 2.622-1.111 1.08 0 1.895.268 2.443.801.55.533.867 1.369.954 2.508h-1.955c-.055-.633-.187-1.064-.396-1.295-.21-.229-.538-.346-.984-.346-.543 0-.937.199-1.183.596-.246.396-.374 1.027-.383 1.893v1.805c0 .908.136 1.566.406 1.98.272.412.717.617 1.337.617.396 0 .718-.078.964-.238L25.5 31.08v-1.826h-1.408v-1.516h3.425V31.846zM35.706 31.846c-.388.42-.862.734-1.426.947-.563.211-1.179.316-1.849.316-1.144 0-2.033-.354-2.666-1.063-.634-.707-.96-1.738-.978-3.094v-1.789c0-1.373.3-2.43.898-3.17.6-.74 1.474-1.111 2.622-1.111 1.08 0 1.895.268 2.443.801.55.533.867 1.369.954 2.508h-1.955c-.055-.633-.188-1.064-.396-1.295-.21-.229-.538-.346-.984-.346-.543 0-.936.199-1.183.596s-.374 1.027-.383 1.893v1.805c0 .908.136 1.566.406 1.98.272.412.717.617 1.337.617.396 0 .718-.078.964-.238l.178-.123v-1.826h-1.408v-1.516h3.425V31.846z"/></svg>

ux/public/_assets/icons/color-otf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#BA68C8" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#F3E5F5" d="M38.5 14L29 14 29 4.5z"/><path fill="#4A148C" d="M20.807 28.919c0 1.335-.315 2.372-.947 3.11s-1.507 1.107-2.628 1.107c-1.117 0-1.994-.366-2.632-1.097-.638-.732-.961-1.756-.971-3.073v-1.702c0-1.367.317-2.435.95-3.203.633-.768 1.513-1.151 2.639-1.151 1.107 0 1.98.377 2.618 1.132.638.754.961 1.813.971 3.175V28.919zM18.79 27.251c0-.897-.127-1.565-.383-2.003s-.652-.656-1.189-.656c-.533 0-.927.211-1.183.632-.255.422-.387 1.063-.396 1.925v1.771c0 .87.13 1.512.39 1.924.26.413.661.619 1.203.619.524 0 .914-.201 1.169-.605.255-.402.385-1.028.39-1.876V27.251zM28.114 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722zM34.403 28.939h-3.124V33h-2.01v-9.953h5.51v1.675h-3.5v2.55h3.124V28.939z"/></svg>

ux/public/_assets/icons/color-png.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#3F51B5" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8EAF6" d="M37.5 14L28 14 28 4.5zM14.81 29.5V33H12.8v-9.953h3.391c.984 0 1.77.306 2.355.916s.878 1.403.878 2.379-.29 1.745-.868 2.311S17.175 29.5 16.149 29.5H14.81zM14.81 27.825h1.381c.383 0 .679-.125.889-.376s.314-.615.314-1.094c0-.497-.107-.892-.321-1.187-.214-.293-.501-.442-.861-.447H14.81V27.825zM27.723 33h-2.01l-2.939-6.528V33h-2.01v-9.953h2.01l2.946 6.535v-6.535h2.003V33zM36.104 31.872c-.387.419-.862.734-1.426.947-.563.211-1.179.317-1.849.317-1.144 0-2.032-.354-2.666-1.063-.634-.708-.96-1.739-.978-3.093v-1.791c0-1.372.3-2.428.898-3.169.6-.74 1.474-1.11 2.622-1.11 1.08 0 1.895.267 2.444.8.549.533.867 1.369.953 2.509h-1.955c-.055-.634-.188-1.065-.396-1.296-.209-.229-.537-.345-.984-.345-.543 0-.937.198-1.183.595s-.374 1.027-.383 1.894v1.805c0 .907.136 1.566.407 1.979.271.412.717.618 1.336.618.396 0 .718-.08.964-.239l.178-.123v-1.825h-1.408v-1.518h3.425V31.872z"/></svg>

ux/public/_assets/icons/color-ppt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FF6D00" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFF3E0" d="M38.5 14L29 14 29 4.5z"/><path fill="#FFF" d="M23.4,29.5V33h-2V23h3.4c1,0,1.8,0.3,2.4,0.9c0.6,0.6,0.9,1.4,0.9,2.4c0,1-0.3,1.7-0.9,2.3c-0.6,0.6-1.4,0.8-2.4,0.8H23.4z M23.4,27.8h1.4c0.4,0,0.7-0.1,0.9-0.4c0.2-0.3,0.3-0.6,0.3-1.1c0-0.5-0.1-0.9-0.3-1.2c-0.2-0.3-0.5-0.4-0.9-0.4h-1.4V27.8z M15,29.5V33h-2V23h3.4c1,0,1.8,0.3,2.4,0.9c0.6,0.6,0.9,1.4,0.9,2.4s-0.3,1.7-0.9,2.3c-0.6,0.6-1.4,0.8-2.4,0.8H15z M15,27.8h1.4c0.4,0,0.7-0.1,0.9-0.4c0.2-0.3,0.3-0.6,0.3-1.1c0-0.5-0.1-0.9-0.3-1.2c-0.2-0.3-0.5-0.4-0.9-0.4H15V27.8z M36,24.7h-2.5V33h-2v-8.3h-2.4V23H36V24.7z"/></svg>

ux/public/_assets/icons/color-psd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#3F51B5" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8EAF6" d="M38.5 14L29 14 29 4.5zM15.476 29.5V33h-2.01v-9.953h3.391c.984 0 1.77.306 2.355.916s.878 1.403.878 2.379-.29 1.745-.868 2.311S17.841 29.5 16.816 29.5H15.476zM15.476 27.825h1.381c.383 0 .679-.125.889-.376s.314-.615.314-1.094c0-.497-.107-.892-.321-1.187-.214-.293-.501-.442-.861-.447h-1.401V27.825zM25.635 30.389c0-.405-.104-.712-.312-.919-.208-.208-.584-.423-1.131-.646-.998-.378-1.716-.821-2.153-1.33-.438-.508-.656-1.108-.656-1.801 0-.839.297-1.512.892-2.02.595-.509 1.35-.763 2.266-.763.611 0 1.155.129 1.633.386.479.258.848.621 1.104 1.091s.386 1.003.386 1.6h-2.002c0-.465-.1-.819-.298-1.063-.198-.243-.484-.365-.858-.365-.351 0-.625.104-.82.311-.196.208-.294.487-.294.838 0 .273.109.521.328.742.219.221.606.449 1.162.687.971.351 1.676.781 2.116 1.292s.66 1.16.66 1.948c0 .866-.276 1.543-.828 2.03-.551.487-1.301.731-2.249.731-.643 0-1.228-.132-1.757-.396s-.942-.643-1.241-1.135-.448-1.073-.448-1.743h2.017c0 .574.112.991.335 1.251s.588.39 1.094.39C25.283 31.503 25.635 31.132 25.635 30.389zM28.99 33v-9.953h2.633c1.162 0 2.088.369 2.778 1.107s1.042 1.75 1.056 3.035v1.613c0 1.308-.345 2.335-1.035 3.079C33.731 32.628 32.78 33 31.568 33H28.99zM31 24.722v6.61h.602c.67 0 1.143-.177 1.416-.53.273-.353.416-.962.43-1.828v-1.729c0-.93-.129-1.578-.389-1.944-.26-.367-.702-.56-1.326-.578H31z"/></svg>

ux/public/_assets/icons/color-rar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff9100" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#ffe0b2" d="M38.5 14L29 14 29 4.5zM16.008 29.363H15.01V33H13v-9.953h3.206c1.008 0 1.785.262 2.335.781.549.524.823 1.266.823 2.227 0 1.32-.481 2.246-1.442 2.775l1.743 4.074V33h-2.16L16.008 29.363zM15.01 27.688h1.142c.401 0 .702-.133.902-.398.201-.266.301-.625.301-1.07 0-.998-.39-1.496-1.169-1.496H15.01V27.688zM25.496 30.963h-2.741L22.222 33h-2.126l3.11-9.953h1.839L28.176 33h-2.146L25.496 30.963zM23.192 29.289h1.859l-.93-3.549L23.192 29.289zM32.008 29.363H31.01V33H29v-9.953h3.206c1.008 0 1.785.262 2.335.781.549.524.823 1.266.823 2.227 0 1.32-.48 2.246-1.442 2.775l1.743 4.074V33h-2.16L32.008 29.363zM31.01 27.688h1.142c.401 0 .702-.133.902-.398.201-.266.301-.625.301-1.07 0-.998-.39-1.496-1.169-1.496H31.01V27.688z"/></svg>

ux/public/_assets/icons/color-schedule.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#CFD8DC" d="M12,40V20h32v20c0,2.2-1.8,4-4,4H16C13.8,44,12,42.2,12,40z"/><path fill="#78909C" d="M44,16v6H12v-6c0-2.2,1.8-4,4-4h24C42.2,12,44,13.8,44,16z"/><path fill="#37474F" d="M37 13A3 3 0 1 0 37 19 3 3 0 1 0 37 13zM20 13A3 3 0 1 0 20 19 3 3 0 1 0 20 13z"/><path fill="#B0BEC5" d="M37 10c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2s2-.9 2-2v-4C39 10.9 38.1 10 37 10zM20 10c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2s2-.9 2-2v-4C22 10.9 21.1 10 20 10z"/><path fill="#90A4AE" d="M32 34H36V38H32zM26 34H30V38H26zM20 34H24V38H20zM32 28H36V32H32zM26 28H30V32H26zM20 28H24V32H20z"/><path fill="#F44336" d="M16 3A12 12 0 1 0 16 27A12 12 0 1 0 16 3Z"/><path fill="#EEE" d="M16 6A9 9 0 1 0 16 24A9 9 0 1 0 16 6Z"/><g><path d="M15 8H17V15H15z"/><path d="M16.9 14.2H18.799999999999997V19.6H16.9z" transform="rotate(134.999 17.9 16.9)"/><path d="M16 13.5A1.5 1.5 0 1 0 16 16.5A1.5 1.5 0 1 0 16 13.5Z"/></g></svg>

ux/public/_assets/icons/color-tar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff9100" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#ffe0b2" d="M38.5 14L29 14 29 4.5zM19.897 24.723h-2.461V33H15.42v-8.277H13v-1.676h6.897V24.723zM24.983 30.963h-2.741L21.709 33h-2.126l3.11-9.953h1.839L27.663 33h-2.146L24.983 30.963zM22.68 29.289h1.859l-.93-3.549L22.68 29.289zM31.608 29.363h-.998V33H28.6v-9.953h3.206c1.007 0 1.785.262 2.334.781.55.524.824 1.266.824 2.227 0 1.32-.481 2.246-1.442 2.775l1.743 4.074V33h-2.16L31.608 29.363zM30.609 27.688h1.142c.4 0 .701-.133.902-.398.2-.266.301-.625.301-1.07 0-.998-.39-1.496-1.169-1.496h-1.176V27.688z"/></svg>

ux/public/_assets/icons/color-tif.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#3F51B5" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8EAF6" d="M38.5 14L29 14 29 4.5zM22.246 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722zM25.5 33h-2.01v-9.953h2.01V33zM32.322 28.939h-3.124V33h-2.01v-9.953h5.51v1.675h-3.5v2.55h3.124V28.939z"/></svg>

ux/public/_assets/icons/color-ttf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#BA68C8" d="M41 45L9 45 9 3 31 3 41 13z"/><path fill="#F3E5F5" d="M39.5 14L30 14 30 4.5z"/><path fill="#4A148C" d="M21.246 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722zM28.957 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722zM35.246 28.939h-3.124V33h-2.01v-9.953h5.51v1.675h-3.5v2.55h3.124V28.939z"/></svg>

ux/public/_assets/icons/color-txt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#BA68C8" d="M41 45L9 45 9 3 31 3 41 13z"/><path fill="#F3E5F5" d="M39.5 14L30 14 30 4.5z"/><path fill="#4A148C" d="M21.246 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722zM25.519 26.465l1.34-3.418h2.304l-2.338 4.936L29.217 33h-2.331l-1.367-3.479L24.158 33h-2.331l2.393-5.018-2.345-4.936h2.304L25.519 26.465zM36.682 24.722h-2.461V33h-2.017v-8.278h-2.42v-1.675h6.897V24.722z"/></svg>

ux/public/_assets/icons/color-video-file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"/><path fill="#1976D2" d="M30 28L20 22 20 34z"/></svg>

ux/public/_assets/icons/color-wav.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#FFC107" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#FFF3E0" d="M38.5 14L29 14 29 4.5z"/><path fill="#C47205" d="M18.267 29.302l.943-6.255h1.989L19.429 33h-2.017l-1.162-5.865L15.102 33h-2.023l-1.777-9.953h2.003l.937 6.248 1.169-6.248h1.688L18.267 29.302zM26.743 30.963h-2.741L23.469 33h-2.126l3.11-9.953h1.839L29.423 33h-2.146L26.743 30.963zM24.439 29.288h1.859l-.93-3.548L24.439 29.288zM33.066 30.266l1.675-7.219h2.242L34.112 33h-2.092l-2.851-9.953h2.229L33.066 30.266z"/></svg>

ux/public/_assets/icons/color-woff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#BA68C8" d="M41 45L9 45 9 3 31 3 41 13z"/><path fill="#F3E5F5" d="M39.5 14L30 14 30 4.5z"/><path fill="#4A148C" d="M16.807,29.302l0.919-6.255h1.939L17.94,33h-1.966l-1.133-5.865L13.722,33H11.75l-1.732-9.953h1.952l0.913,6.248l1.139-6.248h1.646L16.807,29.302z M26.971,28.897c0,1.301-0.309,2.313-0.924,3.032c-0.615,0.721-1.47,1.08-2.563,1.08c-1.089,0-1.944-0.357-2.566-1.069c-0.623-0.714-0.938-1.712-0.947-2.996v-1.661c0-1.333,0.309-2.373,0.927-3.123c0.618-0.749,1.476-1.123,2.573-1.123c1.08,0,1.931,0.367,2.553,1.104c0.623,0.734,0.938,1.768,0.947,3.097V28.897z M25.004,27.271c0-0.875-0.125-1.526-0.374-1.954c-0.249-0.426-0.636-0.639-1.16-0.639c-0.52,0-0.904,0.205-1.154,0.615c-0.249,0.412-0.377,1.037-0.386,1.877v1.728c0,0.848,0.126,1.474,0.38,1.875c0.253,0.403,0.644,0.604,1.173,0.604c0.511,0,0.891-0.196,1.141-0.591c0.249-0.392,0.375-1.003,0.38-1.829V27.271z M32.952,28.939h-2.988V33h-1.923v-9.953h5.271v1.675h-3.348v2.55h2.988V28.939z M38.9,28.939h-2.982V33H34v-9.953h5.26v1.675h-3.342v2.55H38.9V28.939z"/></svg>

ux/public/_assets/icons/color-word.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#1976D2" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E3F2FD" d="M38.5 14L29 14 29 4.5z"/><path fill="#FAFAFA" d="M26.696,30.228l1.468-8.024h3.059L28.507,35h-3.199l-1.714-7.295L21.915,35h-3.19L16,22.203h3.067l1.468,8.024l1.758-8.024h2.619L26.696,30.228z"/></svg>

ux/public/_assets/icons/color-xls.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#388E3C" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#E8F5E9" d="M38.5 14L29 14 29 4.5z"/><path fill="#FFF" d="M23.739,26.457l2.092-4.254h3.524l-3.577,6.346L29.452,35h-3.56l-2.153-4.333L21.586,35h-3.551l3.665-6.451l-3.568-6.346h3.516L23.739,26.457z"/></svg>

ux/public/_assets/icons/color-xml-file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#4db6ac" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#e0f2f1" d="M38.5 14L29 14 29 4.5z"/><path fill="#00695c" d="M14.892 26.465l1.34-3.418h2.304l-2.338 4.936L18.59 33h-2.331l-1.367-3.479L13.532 33h-2.331l2.393-5.018-2.345-4.936h2.304L14.892 26.465zM22.934 23.047l1.88 7.198 1.873-7.198h2.625V33h-2.017v-2.693l.185-4.149L25.491 33h-1.367l-1.989-6.843.185 4.149V33h-2.01v-9.953H22.934zM33.635 31.332h3.527V33h-5.537v-9.953h2.01V31.332z"/></svg>

ux/public/_assets/icons/color-zip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px"><path fill="#ff9100" d="M40 45L8 45 8 3 30 3 40 13z"/><path fill="#ffe0b2" d="M38.5 14L29 14 29 4.5zM17.393 31.331h4.102V33h-6.453v-1.211l4.06-7.066H15v-1.676h6.419v1.184L17.393 31.331zM24.83 33h-2.01v-9.953h2.01V33zM28.528 29.5V33h-2.01v-9.953h3.391c.984 0 1.769.305 2.354.916.586.611.879 1.404.879 2.379s-.29 1.744-.868 2.31c-.579.566-1.381.848-2.406.848H28.528zM28.528 27.824h1.381c.383 0 .679-.125.889-.375.209-.25.315-.615.315-1.094 0-.496-.107-.891-.321-1.188-.215-.293-.502-.441-.861-.445h-1.401V27.824z"/></svg>

ux/src/components/FileManager.vue

@@ -399,7 +399,6 @@ const files = computed(() => {
   }).map(f => {
     switch (f.type) {
       case 'folder': {
-        console.info(f.children)
         f.icon = fileTypes.folder.icon
         f.caption = t('fileman.folderChildrenCount', { count: f.children }, f.children)
         break
@@ -410,12 +409,12 @@ const files = computed(() => {
         break
       }
       case 'asset': {
-        f.icon = fileTypes[f.fileType]?.icon ?? ''
-        f.side = filesize(f.fileSize)
+        f.icon = fileTypes[f.fileExt]?.icon ?? ''
+        f.side = filesize(f.fileSize, { round: 0 })
         if (fileTypes[f.fileType]) {
-          f.caption = t(`fileman.${f.fileType}FileType`)
+          f.caption = t(`fileman.${f.fileExt}FileType`)
         } else {
-          f.caption = t('fileman.unknownFileType', { type: f.fileType.toUpperCase() })
+          f.caption = t('fileman.unknownFileType', { type: f.fileExt.toUpperCase() })
         }
         break
       }
@@ -543,6 +542,8 @@ async function loadTree ({ parentId = null, parentPath = null, types, initLoad =
               createdAt
               updatedAt
               fileSize
+              fileExt
+              mimeType
             }
           }
         }
@@ -598,8 +599,9 @@ async function loadTree ({ parentId = null, parentPath = null, types, initLoad =
                 id: item.id,
                 type: 'asset',
                 title: item.title,
-                fileType: 'pdf',
-                fileSize: 19000,
+                fileExt: item.fileExt,
+                fileSize: item.fileSize,
+                mimeType: item.mimeType,
                 folderPath: item.folderPath,
                 fileName: item.fileName
               })
@@ -744,8 +746,6 @@ async function uploadNewFiles () {
     return
   }
 
-  console.info(fileIpt.value.files)
-
   state.isUploading = true
   state.uploadPercentage = 0
 
@@ -762,10 +762,14 @@ async function uploadNewFiles () {
           const resp = await APOLLO_CLIENT.mutate({
             mutation: gql`
               mutation uploadAssets (
-                $siteId: UUID!
+                $folderId: UUID
+                $locale: String
+                $siteId: UUID
                 $files: [Upload!]!
               ) {
                 uploadAssets (
+                  folderId: $folderId
+                  locale: $locale
                   siteId: $siteId
                   files: $files
                 ) {
@@ -777,7 +781,9 @@ async function uploadNewFiles () {
               }
             `,
             variables: {
+              folderId: state.currentFolderId,
               siteId: siteStore.id,
+              locale: 'en', // TODO: use current locale
               files: [fileToUpload]
             }
           })

ux/src/helpers/fileTypes.js

@@ -1,11 +1,170 @@
 export default {
+  '7z': {
+    icon: 'img:/_assets/icons/color-7zip.svg'
+  },
+  aac: {
+    icon: 'img:/_assets/icons/color-aac.svg'
+  },
+  ai: {
+    icon: 'img:/_assets/icons/color-ai.svg'
+  },
+  aif: {
+    icon: 'img:/_assets/icons/color-audio-file.svg'
+  },
+  apk: {
+    icon: 'img:/_assets/icons/color-apk.svg'
+  },
+  avi: {
+    icon: 'img:/_assets/icons/color-avi.svg'
+  },
+  bin: {
+    icon: 'img:/_assets/icons/color-binary-file.svg'
+  },
+  bz2: {
+    icon: 'img:/_assets/icons/color-archive.svg'
+  },
+  css: {
+    icon: 'img:/_assets/icons/color-css-filetype.svg'
+  },
+  csv: {
+    icon: 'img:/_assets/icons/color-csv.svg'
+  },
+  dat: {
+    icon: 'img:/_assets/icons/color-binary-file.svg'
+  },
+  dmg: {
+    icon: 'img:/_assets/icons/color-dmg.svg'
+  },
+  docx: {
+    icon: 'img:/_assets/icons/color-word.svg'
+  },
+  eps: {
+    icon: 'img:/_assets/icons/color-image-file.svg'
+  },
+  exe: {
+    icon: 'img:/_assets/icons/color-exe.svg'
+  },
+  flac: {
+    icon: 'img:/_assets/icons/color-audio-file.svg'
+  },
   folder: {
     icon: 'img:/_assets/icons/fluent-folder.svg'
   },
+  gif: {
+    icon: 'img:/_assets/icons/color-gif.svg'
+  },
+  gz: {
+    icon: 'img:/_assets/icons/color-archive.svg'
+  },
+  heic: {
+    icon: 'img:/_assets/icons/color-image-file.svg'
+  },
+  ico: {
+    icon: 'img:/_assets/icons/color-image-file.svg'
+  },
+  ics: {
+    icon: 'img:/_assets/icons/color-schedule.svg'
+  },
+  iso: {
+    icon: 'img:/_assets/icons/color-cd.svg'
+  },
+  jpg: {
+    icon: 'img:/_assets/icons/color-jpg.svg'
+  },
+  jpeg: {
+    icon: 'img:/_assets/icons/color-jpg.svg'
+  },
+  json: {
+    icon: 'img:/_assets/icons/color-json.svg'
+  },
+  m4a: {
+    icon: 'img:/_assets/icons/color-audio-file.svg'
+  },
+  mid: {
+    icon: 'img:/_assets/icons/color-audio-file.svg'
+  },
+  mov: {
+    icon: 'img:/_assets/icons/color-mov.svg'
+  },
+  mp3: {
+    icon: 'img:/_assets/icons/color-mp3.svg'
+  },
+  mp4: {
+    icon: 'img:/_assets/icons/color-mpg.svg'
+  },
+  mpg: {
+    icon: 'img:/_assets/icons/color-mpg.svg'
+  },
+  mpeg: {
+    icon: 'img:/_assets/icons/color-mpg.svg'
+  },
+  ogg: {
+    icon: 'img:/_assets/icons/color-ogg.svg'
+  },
+  otf: {
+    icon: 'img:/_assets/icons/color-otf.svg'
+  },
   page: {
     icon: 'img:/_assets/icons/color-document.svg'
   },
   pdf: {
     icon: 'img:/_assets/icons/color-pdf.svg'
+  },
+  png: {
+    icon: 'img:/_assets/icons/color-png.svg'
+  },
+  pptx: {
+    icon: 'img:/_assets/icons/color-ppt.svg'
+  },
+  psd: {
+    icon: 'img:/_assets/icons/color-psd.svg'
+  },
+  rar: {
+    icon: 'img:/_assets/icons/color-rar.svg'
+  },
+  svg: {
+    icon: 'img:/_assets/icons/color-image-file.svg'
+  },
+  tar: {
+    icon: 'img:/_assets/icons/color-tar.svg'
+  },
+  tgz: {
+    icon: 'img:/_assets/icons/color-archive.svg'
+  },
+  tif: {
+    icon: 'img:/_assets/icons/color-tif.svg'
+  },
+  ttf: {
+    icon: 'img:/_assets/icons/color-ttf.svg'
+  },
+  txt: {
+    icon: 'img:/_assets/icons/color-txt.svg'
+  },
+  wav: {
+    icon: 'img:/_assets/icons/color-wav.svg'
+  },
+  wma: {
+    icon: 'img:/_assets/icons/color-audio-file.svg'
+  },
+  wmv: {
+    icon: 'img:/_assets/icons/color-video-file.svg'
+  },
+  woff: {
+    icon: 'img:/_assets/icons/color-woff.svg'
+  },
+  woff2: {
+    icon: 'img:/_assets/icons/color-woff.svg'
+  },
+  xlst: {
+    icon: 'img:/_assets/icons/color-xls.svg'
+  },
+  xml: {
+    icon: 'img:/_assets/icons/color-xml-file.svg'
+  },
+  xz: {
+    icon: 'img:/_assets/icons/color-archive.svg'
+  },
+  zip: {
+    icon: 'img:/_assets/icons/color-zip.svg'
   }
 }