feat: support office file types

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { CarouselApi } from '../../nc/Carousel/interface'
 import { useAttachmentCell } from './utils'
+import { isOffice } from '~/utils/fileUtils'
 
 const { selectedFile, visibleItems, downloadAttachment, removeFile, renameFile, isPublic, isReadonly } = useAttachmentCell()!
 
@@ -132,6 +133,11 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                 class="keep-open"
                 :src="getPossibleAttachmentSrc(item)[0]"
               />
+              <LazyCellAttachmentPreviewMiscOffice
+                v-else-if="isOffice(item.title, item.mimeType)"
+                class="keep-open"
+                :src="getPossibleAttachmentSrc(item)[0]"
+              />
               <div v-else class="bg-white h-full flex flex-col justify-center rounded-md gap-1 items-center w-full">
                 <component :is="iconMap.file" class="text-gray-600 w-20 h-20" />
                 <div class="text-gray-800 text-sm">{{ item.title }}</div>
@@ -173,6 +179,13 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
                   <GeneralIcon class="text-white" icon="play" />
                 </div>
 
+                <div
+                  v-else-if="isPdf(item.title, item.mimeType)"
+                  class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200"
+                >
+                  <GeneralIcon class="text-white" icon="pdfFile" />
+                </div>
+
                 <div v-else class="h-full flex items-center h-6 justify-center rounded-md px-2 py-1 border-1 border-gray-200">
                   <GeneralIcon class="text-white" icon="file" />
                 </div>

packages/nc-gui/components/cell/attachment/Preview/MiscOffice.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const openMethod = ref<'google' | undefined>()
+</script>
+
+<template>
+  <div v-if="!openMethod" :class="props.class" class="flex flex-col text-white gap-2 items-center justify-center">
+    <GeneralIcon class="w-28 h-28" icon="pdfFile" />
+
+    <h1 class="font-bold text-white text-center text-lg">Opening your file in external service exposes your data</h1>
+
+    <NcButton type="secondary" @click="openMethod = 'google'">
+      <div class="flex items-center gap-1">
+        <GeneralIcon class="w-4 h-4" icon="googleDocs" />
+
+        Open with Google Docs
+      </div>
+    </NcButton>
+  </div>
+
+  <iframe
+    v-else-if="openMethod === 'google'"
+    :class="props.class"
+    :src="`https://docs.google.com/viewer?url=${src}&embedded=true`"
+    width="100%"
+    height="100%"
+    frameborder="0"
+  ></iframe>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/utils/fileUtils.ts

@@ -36,6 +36,37 @@ const videoExt = [
   'ts',
 ]
 
+const officeExt = [
+  'txt',
+  'css',
+  'html',
+  'php',
+  'c',
+  'cpp',
+  'h',
+  'hpp',
+  'js',
+  'doc',
+  'docx',
+  'xls',
+  'xlsx',
+  'ppt',
+  'pptx',
+  'pdf',
+  'pages',
+  'ai',
+  'psd',
+  'tiff',
+  'dxf',
+  'svg',
+  'eps',
+  'ps',
+  'ttf',
+  'xps',
+  'zip',
+  'rar',
+]
+
 const isVideo = (name: string, mimetype?: string) => {
   return videoExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('video/')
 }
@@ -48,7 +79,11 @@ const isPdf = (name: string, mimetype?: string) => {
   return name?.toLowerCase().endsWith('.pdf') || mimetype?.startsWith('application/pdf')
 }
 
-export { isImage, imageExt, isVideo, isPdf }
+const isOffice = (name: string, mimetype?: string) => {
+  return officeExt.some((e) => name?.toLowerCase().endsWith(`.${e}`))
+}
+
+export { isImage, imageExt, isVideo, isPdf, isOffice }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome