feat(filesLimit): handle if user goes over size limit

components/ui/Progress/Progress.vue

@@ -1,4 +1,4 @@
-<template src="./Progress.html" />
+<template src="./Progress.html"></template>
 <script lang="ts">
 import Vue from 'vue'
 

components/views/files/aside/Aside.html

@@ -9,9 +9,11 @@
       :data-tooltip="$t('pages.files.aside.coming_soon')"
     />
   </div>
-  <UiProgress :progress="80" />
+  <UiProgress :progress="progress" />
   <div>
-    <span class="usage-text"> <span class="red">3.8GB</span> of 4GB </span>
+    <span class="usage-text">
+      <span :class="sizeColor">{{totalSize}}</span> of {{sizeLimit}}
+    </span>
   </div>
   <UiSpacer :height="10" />
   <div>

components/views/files/aside/Aside.vue

@@ -1,7 +1,29 @@
-<template src="./Aside.html" />
+<template src="./Aside.html"></template>
 <script lang="ts">
 import Vue from 'vue'
 
-export default Vue.extend({})
+export default Vue.extend({
+  data() {
+    return {
+      progress: this.$FileSystem.percentStorageUsed as number,
+    }
+  },
+  computed: {
+    totalSize(): string {
+      return this.$filesize(this.$FileSystem.totalSize)
+    },
+    sizeLimit(): string {
+      return this.$filesize(this.$Config.personalFilesLimit)
+    },
+    sizeColor(): string {
+      return this.progress > 90 ? 'red' : 'green'
+    },
+  },
+  watch: {
+    totalSize() {
+      this.progress = this.$FileSystem.percentStorageUsed
+    },
+  },
+})
 </script>
 <style scoped lang="less" src="./Aside.less"></style>

components/views/files/controls/Controls.vue

@@ -82,8 +82,19 @@ export default Vue.extend({
     async handleFile(event: any) {
       this.errors = []
       this.$store.commit('ui/setIsLoadingFileIndex', true)
-
       const originalFiles: File[] = [...event.target.files]
+
+      // if these files go over the storage limit, prevent upload
+      if (
+        originalFiles.reduce(
+          (total, curr) => total + curr.size,
+          this.$FileSystem.totalSize,
+        ) > this.$Config.personalFilesLimit
+      ) {
+        this.$store.commit('ui/setIsLoadingFileIndex', false)
+        this.errors.push(this.$t('pages.files.errors.limit') as string)
+        return
+      }
       // todo - for now, index is stored in the bucket. we could try moving it to the thread, then sat.json wouldn't be reserved
       const protectedNameResults: File[] = originalFiles.filter(
         (file) => !(file.name === 'sat.json'),

config.ts

@@ -101,7 +101,8 @@ export const Config = {
   routingMiddleware: {
     prerequisitesCheckBypass: ['auth', 'setup'],
   },
-  uploadByteLimit: 1048576 * 8, // 8mb
+  uploadByteLimit: 1000000 * 8, // 8MB - the current limit for an nsfw scan. Should be fixed in AP-807
+  personalFilesLimit: 1000000000 * 4, // 4GB - free tier limit
   regex: {
     // Regex to identify if a filetype is an image we support
     image: '^.*.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$',
@@ -139,4 +140,8 @@ export const Config = {
     size: { width: 600, height: 600 },
     format: 'jpeg',
   },
+  locale:
+    navigator.languages && navigator.languages.length
+      ? navigator.languages[0]
+      : navigator.language,
 }

libraries/Files/FilSystem.ts

@@ -11,6 +11,7 @@ import {
   ExportDirectory,
 } from './types/filesystem'
 import { FILE_TYPE } from './types/file'
+import { Config } from '~/config'
 
 export class FilSystem {
   private _self = new Directory({ name: 'root' })
@@ -116,6 +117,28 @@ export class FilSystem {
     return flatDeepByKey(this.export.content, 'children')
   }
 
+  /**
+   * @method totalSize
+   * @returns {number} total size of all tracked files
+   */
+  get totalSize(): number {
+    return this.flat.reduce(
+      (total, curr) =>
+        (Object.values(FILE_TYPE) as string[]).includes(curr.type)
+          ? total + (curr as ExportFile).size
+          : total,
+      0,
+    )
+  }
+
+  /**
+   * @method percentStorageUsed
+   * @returns {number} percentage of available storage used
+   */
+  get percentStorageUsed(): number {
+    return (this.totalSize / Config.personalFilesLimit) * 100
+  }
+
   /**
    * @method exportChildren
    * @param {Item} item

locales/en-US.js

@@ -153,6 +153,7 @@ export default {
         reserved_name: 'sat.json is a reserved file name',
         empty_file: 'File needs to have a size of 1 byte or greater',
         file_name: 'File with name already exists in this file system',
+        limit: 'This upload would exceed your storage limit',
       },
     },
     unlock: {

plugins/thirdparty/filesize.ts

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 
-import fileSize from 'filesize'
+import { filesize } from '~/utilities/Filesize'
 
 declare module '@nuxt/types' {
   interface Context {
-    $filesize: typeof fileSize
+    $filesize: typeof Function
   }
 }
 
-Vue.prototype.$filesize = fileSize
+Vue.prototype.$filesize = filesize

utilities/Filesize.ts

@@ -0,0 +1,8 @@
+import fileSize from 'filesize'
+import { Config } from '~/config'
+
+export function filesize(bytes: number) {
+  return fileSize(bytes, {
+    locale: Config.locale,
+  })
+}