yap #1
4 changed files with 95 additions and 11 deletions
32
src/lib/components/File.svelte
Normal file
32
src/lib/components/File.svelte
Normal file
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import { bytesToHumanReadable } from '$lib';
|
||||
import { CircleAlert } from 'lucide-svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
/** @type {File} */
|
||||
export let file;
|
||||
|
||||
/** @type {Number} */
|
||||
export let i;
|
||||
</script>
|
||||
|
||||
<div
|
||||
in:fade|global={{ delay: 100 * i }}
|
||||
class="flex px-1.5 w-full h-14 rounded-md transition-all bg-mantle"
|
||||
>
|
||||
<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
|
||||
<p class="">
|
||||
{file.name}
|
||||
</p>
|
||||
<div class="flex gap-0.5">
|
||||
{#if file.size > 104857600}
|
||||
<p class="font-bold text-red">
|
||||
<CircleAlert class="w-4 h-4"></CircleAlert>
|
||||
</p>
|
||||
{/if}
|
||||
<p class="text-xs my-auto {file.size > 104857600 ? 'text-red font-bold' : 'text-overlay1'}">
|
||||
{bytesToHumanReadable(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -5,3 +5,13 @@ export function goBack() {
|
|||
history.back();
|
||||
}
|
||||
}
|
||||
|
||||
/** @param bytes {Number} */
|
||||
export function bytesToHumanReadable(bytes) {
|
||||
if (bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
let e = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
|
||||
}
|
||||
|
|
|
@ -1,35 +1,52 @@
|
|||
<script>
|
||||
import { Upload } from 'lucide-svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import { user } from '$lib/stores';
|
||||
|
||||
import Button from '$lib/components/Inputs/Button.svelte';
|
||||
import ButtonText from '$lib/components/Inputs/ButtonText.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { bytesToHumanReadable } from '$lib';
|
||||
import File from '$lib/components/File.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
user.set(data?.user);
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
let input;
|
||||
|
||||
/** @type {FileList} */
|
||||
let files;
|
||||
</script>
|
||||
|
||||
<form class="hidden" action="">
|
||||
<input type="file" name="file" id="file" multiple={true} bind:this={input} bind:files />
|
||||
</form>
|
||||
|
||||
<div class="w-[23rem] h-[calc(100vh-4.5rem)] flex mx-auto">
|
||||
<div class="my-auto flex flex-col w-full gap-2">
|
||||
<div class="flex flex-col gap-2 my-auto w-full">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">Welcome, {$page.data.user.username}.</h1>
|
||||
<p class="text-overlay1">Your max upload size is <span class="font-bold">100 MB</span>.</p>
|
||||
</div>
|
||||
<div class="bg-crust w-full mx-auto p-2 rounded-lg shadow-lg">
|
||||
<div class="flex flex-col gap-2 p-2 mx-auto w-full rounded-lg shadow-lg bg-crust">
|
||||
{#if files?.length}
|
||||
{#each Array.from(files) as file, i}
|
||||
<File {file} {i}></File>
|
||||
{/each}
|
||||
{/if}
|
||||
<button
|
||||
class="w-full outline-2 outline-dotted outline-surface2 rounded-sm bg-mantle h-36 flex"
|
||||
class="flex w-full {!files?.length
|
||||
? 'h-36'
|
||||
: 'h-14'} transition-all rounded-md outline-2 outline-dotted outline-surface2 bg-mantle"
|
||||
on:click={() => {
|
||||
input.click();
|
||||
}}
|
||||
>
|
||||
<div class="m-auto text-lg flex text-surface2">
|
||||
<div class="flex m-auto text-lg text-surface2">
|
||||
<Upload></Upload>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-crust w-full mx-auto mb-auto p-2 rounded-lg shadow-lg">
|
||||
<table class="table-auto w-full mx-auto text-sm">
|
||||
<div class="p-2 mx-auto mb-auto w-full rounded-lg shadow-lg bg-crust">
|
||||
<table class="mx-auto w-full text-sm table-auto">
|
||||
<tbody>
|
||||
{#await data?.streamed?.statistics}
|
||||
<div class="h-[66px]"></div>
|
||||
|
|
25
src/routes/(app)/test/+page.svelte
Normal file
25
src/routes/(app)/test/+page.svelte
Normal file
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
import { bytesToHumanReadable } from '$lib';
|
||||
import Button from '$lib/components/Inputs/Button.svelte';
|
||||
import ButtonText from '$lib/components/Inputs/ButtonText.svelte';
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
let input;
|
||||
|
||||
/** @type {FileList} */
|
||||
let files;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
click={() => {
|
||||
input.click();
|
||||
}}
|
||||
>
|
||||
<ButtonText>Select Files</ButtonText>
|
||||
</Button>
|
||||
|
||||
{#if files}
|
||||
{#each Array.from(files) as file}
|
||||
<p>{file.name} ({bytesToHumanReadable(file.size)})</p>
|
||||
{/each}
|
||||
{/if}
|
Loading…
Reference in a new issue