fix: Display file upload limits in UI

Author: Trayshar

client/components/editor/editor-modal-media.vue

@@ -142,15 +142,15 @@
                 :label-idle='$t(`editor:assets.uploadAssetsDropZone`)'
                 allow-multiple='true'
                 :files='files'
-                max-files='10'
+                :max-files='uploadLimits.maxFiles'
                 :server='filePondServerOpts'
                 :instant-upload='false'
                 :allow-revert='false'
                 @processfile='onFileProcessed'
               )
             v-divider
             v-card-actions.pa-3
-              .caption.grey--text.text-darken-2 Max 10 files, 5 MB each
+              .caption.grey--text.text-darken-2 Max {{ uploadLimits.maxFiles }} files, {{ uploadLimits.maxFileSize | prettyBytes }} each
               v-spacer
               v-btn.px-4(color='teal', dark, @click='upload') {{$t('common:actions.upload')}}
 
@@ -239,6 +239,7 @@ import listFolderAssetQuery from 'gql/editor/editor-media-query-folder-list.gql'
 import createAssetFolderMutation from 'gql/editor/editor-media-mutation-folder-create.gql'
 import renameAssetMutation from 'gql/editor/editor-media-mutation-asset-rename.gql'
 import deleteAssetMutation from 'gql/editor/editor-media-mutation-asset-delete.gql'
+import siteConfigQuery from 'gql/editor/editor-site-config.gql'
 
 const FilePond = vueFilePond()
 const localeSegmentRegex = /^[A-Z]{2}(-[A-Z]{2})?$/i
@@ -278,7 +279,11 @@ export default {
       renameAssetName: '',
       renameAssetLoading: false,
       deleteDialog: false,
-      deleteAssetLoading: false
+      deleteAssetLoading: false,
+      uploadLimits: {
+        maxFiles: 10,
+        maxFileSize: 5 * 1000 * 1000 // 5 MB in bytes
+      }
     }
   },
   computed: {
@@ -546,6 +551,15 @@ export default {
         this.loading = isLoading
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'editor-media-list-refresh')
       }
+    },
+    uploadLimits: {
+      query: siteConfigQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => ({
+          maxFileSize: data.site.config.uploadMaxFileSize,
+          maxFiles: data.site.config.uploadMaxFiles
+        }
+      )
     }
   }
 }

client/graph/editor/editor-site-config.gql

@@ -0,0 +1,8 @@
+{
+  site {
+    config {
+      uploadMaxFileSize
+      uploadMaxFiles
+    }
+  }
+}