feat(frontend): add toast if avatar is too big

frontend/package.json

@@ -44,6 +44,7 @@
 		"jose": "^4.13.1",
 		"luxon": "^3.3.0",
 		"markdown-it": "^13.0.1",
+		"pretty-bytes": "^6.1.0",
 		"sanitize-html": "^2.10.0"
 	}
 }

frontend/pnpm-lock.yaml

@@ -23,6 +23,7 @@ specifiers:
   markdown-it: ^13.0.1
   prettier: ^2.8.7
   prettier-plugin-svelte: ^2.10.0
+  pretty-bytes: ^6.1.0
   sanitize-html: ^2.10.0
   svelte: ^3.58.0
   svelte-check: ^3.1.4
@@ -41,6 +42,7 @@ dependencies:
   jose: 4.13.1
   luxon: 3.3.0
   markdown-it: 13.0.1
+  pretty-bytes: 6.1.0
   sanitize-html: 2.10.0
 
 devDependencies:
@@ -1802,6 +1804,11 @@ packages:
     hasBin: true
     dev: true
 
+  /pretty-bytes/6.1.0:
+    resolution: {integrity: sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false
+
   /punycode/2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}

frontend/src/routes/edit/member/[id]/+page.svelte

@@ -29,6 +29,7 @@
     Alert,
   } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
+  import prettyBytes from "pretty-bytes";
   import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
   import EditableField from "../../EditableField.svelte";
@@ -149,7 +150,16 @@
 
   const getAvatar = async (list: FileList | null) => {
     if (!list || list.length === 0) return null;
-    if (list[0].size > MAX_AVATAR_BYTES) return null;
+    if (list[0].size > MAX_AVATAR_BYTES) {
+      addToast({
+        header: "Avatar too large",
+        body:
+          `This avatar is too large, please resize it (maximum is ${prettyBytes(
+            MAX_AVATAR_BYTES,
+          )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
 
     const buffer = await list[0].arrayBuffer();
     const base64 = encode(buffer);

frontend/src/routes/edit/profile/+page.svelte

@@ -36,6 +36,7 @@
   import type { PageData } from "./$types";
   import { charCount, renderMarkdown } from "$lib/utils";
   import MarkdownHelp from "../MarkdownHelp.svelte";
+  import prettyBytes from "pretty-bytes";
 
   const MAX_AVATAR_BYTES = 1_000_000;
 
@@ -137,7 +138,15 @@
 
   const getAvatar = async (list: FileList | null) => {
     if (!list || list.length === 0) return null;
-    if (list[0].size > MAX_AVATAR_BYTES) return null;
+    if (list[0].size > MAX_AVATAR_BYTES) {
+      addToast({
+        header: "Avatar too large",
+        body: `This avatar is too large, please resize it (maximum is ${prettyBytes(
+          MAX_AVATAR_BYTES,
+        )}, the file you tried to upload is ${prettyBytes(list[0].size)})`,
+      });
+      return null;
+    }
 
     const buffer = await list[0].arrayBuffer();
     const base64 = encode(buffer);

frontend/tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"ignoreDeprecations": "5.0",
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,