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

This commit is contained in:
Sam 2023-04-13 23:34:19 +02:00
parent a9463896d4
commit 30c086f0f3
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
5 changed files with 30 additions and 2 deletions

View File

@ -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"
}
}

View File

@ -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'}

View File

@ -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);

View File

@ -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);

View File

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