ulith/pronounss
1
0
Fork 0
forked from mirrors/pronouns.cc
Code Pull requests Activity

feat(frontend): better content type detection, add explanation about avatar file types

Browse source
This commit is contained in:
Sam 2023-03-15 00:32:07 +01:00
parent c2a3016265
commit 844f5e9255
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
2 changed files with 29 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -125,25 +125,11 @@
const buffer = await list[0].arrayBuffer(); const buffer = await list[0].arrayBuffer();
const base64 = encode(buffer); const base64 = encode(buffer);
const uri = `data:${dataTypeFromFilename(list[0].name)};base64,${base64}`; const uri = `data:${list[0].type};base64,${base64}`;
return uri; return uri;
}; };
const dataTypeFromFilename = (filename: string) => {
if (filename.endsWith(".webp")) {
return "image/webp";
} else if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
return "image/jpeg";
} else if (filename.endsWith(".png")) {
return "image/png";
} else if (filename.endsWith(".gif")) {
return "image/gif";
} else {
return "application/octet-stream";
}
};
const moveName = (index: number, up: boolean) => { const moveName = (index: number, up: boolean) => {
if (up && index == 0) return; if (up && index == 0) return;
if (!up && index == names.length - 1) return; if (!up && index == names.length - 1) return;
@ -317,15 +303,25 @@
<div class="col-md"> <div class="col-md">
<h4>Avatar</h4> <h4>Avatar</h4>
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md text-center">
{#if avatar} {#if avatar}
<img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" /> <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
{:else} {:else}
<FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} width={200} /> <FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} width={200} />
{/if} {/if}
</div> </div>
<div class="col-md"> <div class="col-md mt-2">
<input class="form-control" id="avatar" type="file" bind:files={avatar_files} /> <input
class="form-control"
id="avatar"
type="file"
bind:files={avatar_files}
accept="image/png, image/jpeg, image/gif, image/webp"
/>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP can be used as avatars.
Avatars cannot be larger than 1 MB, and animated avatars will be made static.
</p>
</div> </div>
</div> </div>
</div> </div>

33
frontend/src/routes/edit/profile/+page.svelte
View file

@ -128,25 +128,12 @@
const buffer = await list[0].arrayBuffer(); const buffer = await list[0].arrayBuffer();
const base64 = encode(buffer); const base64 = encode(buffer);
const uri = `data:${dataTypeFromFilename(list[0].name)};base64,${base64}`; const uri = `data:${list[0].type};base64,${base64}`;
console.log(uri.slice(0, 128));
return uri; return uri;
}; };
const dataTypeFromFilename = (filename: string) => {
if (filename.endsWith(".webp")) {
return "image/webp";
} else if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
return "image/jpeg";
} else if (filename.endsWith(".png")) {
return "image/png";
} else if (filename.endsWith(".gif")) {
return "image/gif";
} else {
return "application/octet-stream";
}
};
const moveName = (index: number, up: boolean) => { const moveName = (index: number, up: boolean) => {
if (up && index == 0) return; if (up && index == 0) return;
if (!up && index == names.length - 1) return; if (!up && index == names.length - 1) return;
@ -273,15 +260,25 @@
<div class="col-md"> <div class="col-md">
<h4>Avatar</h4> <h4>Avatar</h4>
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md text-center">
{#if avatar} {#if avatar}
<img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" /> <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
{:else} {:else}
<FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} /> <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} />
{/if} {/if}
</div> </div>
<div class="col-md"> <div class="col-md mt-2">
<input class="form-control" id="avatar" type="file" bind:files={avatar_files} /> <input
class="form-control"
id="avatar"
type="file"
bind:files={avatar_files}
accept="image/png, image/jpeg, image/gif, image/webp"
/>
<p class="text-muted mt-3">
<Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP images can be used as avatars.
Avatars cannot be larger than 1 MB, and animated avatars will be made static.
</p>
</div> </div>
</div> </div>
</div> </div>