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
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
5 changed files with 30 additions and 2 deletions

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