file upload

client/src/app.css

@@ -100,7 +100,7 @@ fieldset {
 
 .box {
 	width: 100%;
-	min-height: min(calc(100vh - 30rem), 30rem);
+	min-height: min(calc(100vh - 30rem), 20rem);
 	margin: 0;
 	border: 2px solid var(--ui-bg-1);
 	resize: vertical;
@@ -118,3 +118,7 @@ fieldset {
 .box:focus {
 	border-color: var(--ui-clr-primary);
 }
+
+.tr {
+	text-align: right;
+}

client/src/lib/api.ts

@@ -22,7 +22,7 @@ type CallOptions = {
 
 export class PayloadToLargeError extends Error {}
 
-async function call(options: CallOptions) {
+export async function call(options: CallOptions) {
 	const response = await fetch('/api/' + options.url, {
 		method: options.method,
 		body: options.body === undefined ? undefined : JSON.stringify(options.body),
@@ -46,7 +46,7 @@ export async function create(note: Note) {
 		meta: JSON.stringify(meta),
 	}
 	const data = await call({
-		url: 'notes',
+		url: 'notes/',
 		method: 'post',
 		body,
 	})

client/src/lib/stores/status.ts

@@ -0,0 +1,17 @@
+import { call } from '$lib/api'
+import { onMount } from 'svelte'
+import { writable } from 'svelte/store'
+
+export type Status = {
+	max_size: number
+}
+
+export const status = writable<null | Status>(null)
+
+export async function init() {
+	const data = await call({
+		url: 'status',
+		method: 'get',
+	})
+	status.set(data)
+}

client/src/lib/ui/FileUpload.svelte

@@ -2,6 +2,7 @@
 	import type { FileDTO } from '$lib/api'
 	import { Files } from '$lib/files'
 	import { createEventDispatcher } from 'svelte'
+	import MaxSize from './MaxSize.svelte'
 
 	export let label: string = ''
 	let files: File[] = []
@@ -49,6 +50,8 @@
 		{:else}
 			<div>
 				<b>No Files Selected</b>
+				<br />
+				<small>max: <MaxSize /></small>
 			</div>
 		{/if}
 	</div>

client/src/lib/ui/MaxSize.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { status } from '$lib/stores/status'
+	import prettyBytes from 'pretty-bytes'
+</script>
+
+<span>
+	{#if $status !== null}
+		{prettyBytes($status.max_size, { binary: true })}
+	{:else}
+		loading...
+	{/if}
+</span>

client/src/lib/views/Create.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Note, PayloadToLargeError } from '$lib/api'
-	import { create } from '$lib/api'
-	import { getKeyFromString, encrypt, Hex, getRandomBytes } from '$lib/crypto'
-
+	import { create, Note, PayloadToLargeError } from '$lib/api'
+	import { encrypt, getKeyFromString, getRandomBytes, Hex } from '$lib/crypto'
 	import Button from '$lib/ui/Button.svelte'
 	import FileUpload from '$lib/ui/FileUpload.svelte'
+	import MaxSize from '$lib/ui/MaxSize.svelte'
 	import Switch from '$lib/ui/Switch.svelte'
 	import TextArea from '$lib/ui/TextArea.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
+	import { blur } from 'svelte/transition'
 
 	let note: Note = {
 		contents: '',
@@ -36,6 +36,10 @@
 
 	$: note.meta.type = file ? 'file' : 'text'
 
+	$: if (!file) {
+		note.contents = ''
+	}
+
 	async function submit() {
 		try {
 			error = null
@@ -110,7 +114,11 @@
 				<Switch class="file" label="file" bind:value={file} />
 				<Switch label="advanced" bind:value={advanced} />
 				<div class="grow" />
-				<Button type="submit" data-testid="button-create">create</Button>
+				<div class="tr">
+					<small>max: <MaxSize /> </small>
+					<br />
+					<Button type="submit" data-testid="button-create">create</Button>
+				</div>
 			</div>
 
 			{#if error}
@@ -126,37 +134,30 @@
 				{/if}
 			</p>
 
-			<div class="advanced" class:hidden={!advanced}>
-				<br />
-				<div class="fields">
-					<TextInput
-						type="number"
-						label="views"
-						bind:value={note.views}
-						disabled={type}
-						max={100}
-					/>
-					<div class="middle-switch">
-						<Switch label="mode" bind:value={type} color={false} />
+			{#if advanced}
+				<div transition:blur={{ duration: 250 }}>
+					<br />
+					<div class="fields">
+						<TextInput
+							type="number"
+							label="views"
+							bind:value={note.views}
+							disabled={type}
+							max={100}
+						/>
+						<div class="middle-switch">
+							<Switch label="mode" bind:value={type} color={false} />
+						</div>
+						<TextInput
+							type="number"
+							label="minutes"
+							bind:value={note.expiration}
+							disabled={!type}
+							max={360}
+						/>
 					</div>
-					<TextInput
-						type="number"
-						label="minutes"
-						bind:value={note.expiration}
-						disabled={!type}
-						max={360}
-					/>
 				</div>
-			</div>
-
-			<style>
-				.fields {
-					display: flex;
-				}
-				.spacer {
-					width: 3rem;
-				}
-			</style>
+			{/if}
 		</fieldset>
 	</form>
 {/if}
@@ -164,7 +165,6 @@
 <style>
 	.bottom {
 		display: flex;
-		/* justify-content: space-between; */
 		align-items: flex-end;
 		margin-top: 0.5rem;
 	}
@@ -181,17 +181,11 @@
 		margin: 0 1rem;
 	}
 
-	.advanced {
-		max-height: 14em;
-		overflow: hidden;
-		transition: var(--ui-anim);
-	}
-
-	.advanced.hidden {
-		max-height: 0;
-	}
-
 	.error-text {
 		margin-top: 0.5rem;
 	}
+
+	.fields {
+		display: flex;
+	}
 </style>

client/src/routes/__layout.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
+	import { init } from '$lib/stores/status'
 	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
-
+	import { onMount } from 'svelte'
 	import '../app.css'
+
+	onMount(() => {
+		init()
+	})
 </script>
 
 <svelte:head>