From b45baf7b603c19af7c9f0c98a0df291ca2c305a8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 17 Oct 2022 13:31:15 -0700
Subject: max file size

---
 src/routes/[username]/settings/_account.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index bb229b93..10756c7a 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -36,9 +36,14 @@
 		percent = Math.round((event.loaded / event.total) * 100);
 	};
 
+	let tooLarge = {};
+
 	let files = { profile: {}, banner: {} };
 	let handleFile = async ({ target }, type) => {
+		tooLarge[type] = false;
 		let file = target.files[0];
+		console.log('TYPE', file.size);
+		if (file.size > 5000000) return (tooLarge[type] = true);
 		var reader = new FileReader();
 		reader.onload = async (e) => {
 			files[type].src = e.target.result;
@@ -118,6 +123,7 @@
 
 <div>
 	<span class="font-bold">{$t('user.settings.profileImage')}</span>
+
 	<div class="flex">
 		{#if profile}
 			<div
@@ -136,7 +142,7 @@
 				on:click={() => select('profile')}
 			>
 				<img
-					src={`/api/public/${user.username}-profile.png`}
+					src={`/api/public/${user.username}-profile.webp`}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 					alt={user.username}
 				/>
@@ -167,6 +173,10 @@
 			{/if}
 		</div>
 	</div>
+
+	{#if tooLarge['profile']}
+		<div class="text-red-600">Max file size 5MB</div>
+	{/if}
 </div>
 
 <div>
@@ -184,7 +194,7 @@
 		/>
 	{:else if user.banner}
 		<img
-			src={`/api/public/${user.username}-banner.png`}
+			src={`/api/public/${user.username}-banner.webp`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
 			alt="Banner"
@@ -212,6 +222,10 @@
 	{#if files.banner.filename}
 		<div class="mt-2 text-sm">{files.banner.filename}</div>
 	{/if}
+
+	{#if tooLarge['banner']}
+		<div class="text-red-600">Max file size 5MB</div>
+	{/if}
 </div>
 
 <!-- TODO
-- 
cgit v1.2.3