fix(upload): fix upload for large files

components/tailored/core/fileupload/FileUpload.html

@@ -19,6 +19,7 @@
             :src="item.url"
             v-bind:class="{ 'img-blur': item.nsfw.status  }"
           />
+          <UiLoadersLogoLoader v-if="!item.url" :size="48" />
         </div>
         <file-icon
           size="1x"

components/tailored/core/fileupload/FileUpload.less

@@ -54,6 +54,8 @@
       .img-wrapper {
         max-width: 15vw;
         max-height: 10vh;
+        min-width: 64px;
+        min-height: 64px;
         border-radius: 2px;
         margin-right: @normal-spacing;
         overflow: hidden;

components/tailored/core/fileupload/FileUpload.vue

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { Config } from '~/config'
 
 import {
   FileIcon,
@@ -55,21 +56,27 @@ export default Vue.extend({
       this.$data.files = [...files].map((file: File) => {
         return {
           file,
-          nsfw: { status: false, checking: false },
+          nsfw: { status: false, checking: false, tooLarge: false },
           url: '',
         }
       })
       /* nsfw checking after putting all files */
       for (const file of this.$data.files) {
-        file.nsfw.checking = true
-        try {
-          file.nsfw.status = await this.$Security.isNSFW(file.file)
-        } catch (err) {
-          file.nsfw.status = true
+        // don't check nsfw for large files or webgl runs out of memory
+        if (file.file.size > Config.uploadByteLimit) {
+          file.nsfw.tooLarge = true
+        }
+        if (!file.nsfw.tooLarge) {
+          file.nsfw.checking = true
+          try {
+            file.nsfw.status = await this.$Security.isNSFW(file.file)
+          } catch (err) {
+            file.nsfw.status = true
+            file.nsfw.checking = false
+            return
+          }
           file.nsfw.checking = false
-          return
         }
-        file.nsfw.checking = false
         this.loadPicture(file)
       }
       this.$data.uploadStatus = true
@@ -99,9 +106,7 @@ export default Vue.extend({
     isEmbedableImage(filename: string): boolean {
       if (!filename) return false
       // eslint-disable-next-line prefer-regex-literals
-      const imageFormatsRegex = new RegExp(
-        '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$'
-      )
+      const imageFormatsRegex = new RegExp(Config.regex.image)
       return imageFormatsRegex.test(filename.toLowerCase())
     },
     /**

components/tailored/files/uploader/Uploader.vue

@@ -1,6 +1,7 @@
 <template src="./Uploader.html"></template>
 <script lang="ts">
 import Vue from 'vue'
+import { Config } from '~/config'
 
 import { FileIcon, SlashIcon } from 'satellite-lucide-icons'
 
@@ -33,7 +34,7 @@ export default Vue.extend({
     nsfw: {
       type: Object,
       // eslint-disable-next-line vue/require-valid-default-prop
-      default: { status: false, checking: false },
+      default: { status: false, checking: false, tooLarge: false },
     },
   },
   methods: {
@@ -50,9 +51,7 @@ export default Vue.extend({
      */
     isEmbedableImage(filename: string): boolean {
       // eslint-disable-next-line prefer-regex-literals
-      const imageFormatsRegex = new RegExp(
-        '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$'
-      )
+      const imageFormatsRegex = new RegExp(Config.regex.image)
       return imageFormatsRegex.test(filename.toLowerCase())
     },
   },

config.ts

@@ -92,4 +92,8 @@ export const Config = {
   routingMiddleware: {
     prerequisitesCheckBypass: ['auth', 'setup'],
   },
+  uploadByteLimit: 1048576 * 8, // 8mb
+  regex: {
+    image: '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$',
+  },
 }