diff options
| author | Adam Soltys <[email protected]> | 2022-10-17 13:31:15 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-10-17 13:31:15 -0700 |
| commit | bdd4f03a11032a291b8f648aad646590098aa19f (patch) | |
| tree | faa5fe8233956df1d1666ba85b8675310edd3294 /src | |
| parent | 82ebed83f7222ed33d40c1a5b46be871de53751f (diff) | |
| download | coinos-ui-bdd4f03a11032a291b8f648aad646590098aa19f.tar.gz coinos-ui-bdd4f03a11032a291b8f648aad646590098aa19f.zip | |
max file size
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 18 |
1 files changed, 16 insertions, 2 deletions
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 |