Load thumbnails for space images instead of the whole file

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -40,7 +40,7 @@ import UploadImage from '../../../mixins/spaces/actions/uploadImage'
 import EditQuota from '../../../mixins/spaces/actions/editQuota'
 import QuotaModal from '../../Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../../components/Spaces/ReadmeContentModal.vue'
-import { ThumbnailService } from '../../../constants'
+import { thumbnailService } from '../../../services'
 
 export default {
   name: 'SpaceActions',
@@ -58,6 +58,9 @@ export default {
     UploadImage,
     EditQuota
   ],
+  data: function () {
+    return { thumbnailService }
+  },
   computed: {
     ...mapGetters('Files', ['highlightedFile']),
     resources() {
@@ -82,9 +85,9 @@ export default {
       return this.$data.$_editQuota_modalOpen
     },
     supportedSpaceImageMimeTypes() {
-      return ThumbnailService.SupportedMimeTypes.filter((mimeType) =>
-        mimeType.startsWith('image/')
-      ).join(',')
+      return thumbnailService.capability.supportedMimeTypes
+        .filter((mimeType) => mimeType.startsWith('image/'))
+        .join(',')
     }
   },
   methods: {

packages/web-app-files/src/constants.ts

@@ -12,14 +12,3 @@ export abstract class ImageType {
   static readonly Preview: string = 'preview'
   static readonly Avatar: string = 'avatar'
 }
-
-// FIXME: Load supported mime types of the thumbnail service via capabilities
-export abstract class ThumbnailService {
-  static readonly SupportedMimeTypes: Array<string> = [
-    'image/png',
-    'image/jpg',
-    'image/jpeg',
-    'image/gif',
-    'text/plain'
-  ]
-}

packages/web-app-files/src/index.js

@@ -17,7 +17,7 @@ import quickActions from './quickActions'
 import store from './store'
 import { FilterSearch, SDKSearch } from './search'
 import { bus } from 'web-pkg/src/instance'
-import { archiverService, Registry } from './services'
+import { archiverService, thumbnailService, Registry } from './services'
 import fileSideBars from './fileSideBars'
 import { buildRoutes } from './router'
 import get from 'lodash-es/get'
@@ -138,5 +138,13 @@ export default {
       store.getters.configuration.server || window.location.origin,
       get(store, 'getters.capabilities.files.archivers', [])
     )
+    // FIXME: Remove mock data
+    thumbnailService.initialize(
+      get(store, 'getters.capabilities.files.thumbnail', {
+        enabled: true,
+        version: 'v0.1',
+        supportedMimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'text/plain']
+      })
+    )
   }
 }

packages/web-app-files/src/mixins/spaces/actions/setImage.js

@@ -3,9 +3,14 @@ import { clientService } from 'web-pkg/src/services'
 import { mapMutations, mapActions, mapGetters } from 'vuex'
 import { buildResource } from '../../../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
-import { ThumbnailService } from '../../../constants'
+import { thumbnailService } from '../../../services'
 
 export default {
+  data: function () {
+    return {
+      $_setSpaceImage_thumbnailService: thumbnailService
+    }
+  },
   computed: {
     ...mapGetters(['configuration']),
     $_setSpaceImage_items() {
@@ -21,7 +26,15 @@ export default {
             if (resources.length !== 1) {
               return false
             }
-            if (!this.$_setSpaceImage_supportedMimeTypes.includes(resources[0].mimeType)) {
+            if (!resources[0].mimeType) {
+              return false
+            }
+            if (
+              !this.$data.$_setSpaceImage_thumbnailService.isMimetypeSupported(
+                resources[0].mimeType,
+                true
+              )
+            ) {
               return false
             }
             return isLocationSpacesActive(this.$router, 'files-spaces-project')
@@ -31,9 +44,6 @@ export default {
           class: 'oc-files-actions-set-space-image-trigger'
         }
       ]
-    },
-    $_setSpaceImage_supportedMimeTypes: function () {
-      return ThumbnailService.SupportedMimeTypes.filter((mimeType) => mimeType.startsWith('image/'))
     }
   },
   methods: {

packages/web-app-files/src/mixins/spaces/actions/uploadImage.js

@@ -1,12 +1,13 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 import { bus } from 'web-pkg/src/instance'
-import { ThumbnailService } from '../../../constants'
+import { thumbnailService } from '../../../services'
 
 export default {
   data: function () {
     return {
-      $_uploadImage_selectedSpace: null
+      $_uploadImage_selectedSpace: null,
+      $_uploadImage_thumbnailService: thumbnailService
     }
   },
   computed: {
@@ -43,11 +44,7 @@ export default {
       const graphClient = clientService.graphAuthenticated(this.configuration.server, this.getToken)
       const file = ev.currentTarget.files[0]
 
-      if (
-        !ThumbnailService.SupportedMimeTypes.filter((mimeType) =>
-          mimeType.startsWith('image/')
-        ).includes(file.type)
-      ) {
+      if (!this.$data.$_uploadImage_thumbnailService.isMimetypeSupported(file.type, true)) {
         return this.showMessage({
           title: this.$gettext('The file type is unsupported'),
           status: 'danger'

packages/web-app-files/src/services/index.ts

@@ -1,3 +1,4 @@
 export * from './archiver'
+export * from './thumbnail'
 export * from './cache'
 export { default as Registry } from './registry'

packages/web-app-files/src/services/thumbnail.ts

@@ -0,0 +1,26 @@
+interface ThumbnailCapability {
+  enabled: boolean
+  version: string // version is just a major version, e.g. `v2`
+  supportedMimeTypes: string[]
+}
+
+export class ThumbnailService {
+  serverUrl: string
+  capability?: ThumbnailCapability
+
+  public initialize(thumbnailCapability: ThumbnailCapability): void {
+    this.capability = thumbnailCapability
+  }
+
+  public get available(): boolean {
+    return !!this.capability?.version
+  }
+
+  public isMimetypeSupported(mimeType: string, onlyImages = false) {
+    return onlyImages
+      ? mimeType.startsWith('image/') && this.capability.supportedMimeTypes.includes(mimeType)
+      : this.capability.supportedMimeTypes.includes(mimeType)
+  }
+}
+
+export const thumbnailService = new ThumbnailService()

packages/web-app-files/src/views/spaces/Project.vue

@@ -49,7 +49,7 @@
                     name="file"
                     multiple
                     tabindex="-1"
-                    accept="image/*"
+                    :accept="supportedSpaceImageMimeTypes"
                     @change="$_uploadImage_uploadImageSpace"
                   />
                   <ul class="oc-list oc-files-context-actions">
@@ -160,7 +160,7 @@ import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
 import MixinFileActions from '../../mixins/fileActions'
-import { ImageDimension, ImageType, ThumbnailService } from '../../constants'
+import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { clientService } from 'web-pkg/src/services'
@@ -176,6 +176,7 @@ import EditQuota from '../../mixins/spaces/actions/editQuota'
 import EditReadmeContent from '../../mixins/spaces/actions/editReadmeContent'
 import QuotaModal from '../../components/Spaces/QuotaModal.vue'
 import ReadmeContentModal from '../../components/Spaces/ReadmeContentModal.vue'
+import { thumbnailService } from '../../services'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -303,7 +304,8 @@ export default {
       showMarkdownCollapse: false,
       markdownResizeObserver: new ResizeObserver(this.onMarkdownResize),
       imageExpanded: false,
-      imageContent: null
+      imageContent: null,
+      thumbnailService
     }
   },
   computed: {
@@ -361,9 +363,9 @@ export default {
       return this.$data.$_editReadmeContent_modalOpen
     },
     supportedSpaceImageMimeTypes() {
-      return ThumbnailService.SupportedMimeTypes.filter((mimeType) =>
-        mimeType.startsWith('image/')
-      ).join(',')
+      return thumbnailService.capability.supportedMimeTypes
+        .filter((mimeType) => mimeType.startsWith('image/'))
+        .join(',')
     }
   },
   watch: {