add support for files

client/src/app.css

@@ -97,3 +97,24 @@ fieldset {
 	padding: 0;
 	border: none;
 }
+
+.box {
+	width: 100%;
+	min-height: min(calc(100vh - 30rem), 30rem);
+	margin: 0;
+	border: 2px solid var(--ui-bg-1);
+	resize: vertical;
+	outline: none;
+	padding: 0.5rem;
+}
+
+@media screen and (max-width: 30rem) {
+	.box {
+		min-height: calc(100vh - 25rem);
+	}
+}
+
+.box:hover,
+.box:focus {
+	border-color: var(--ui-clr-primary);
+}

client/src/lib/api.ts

@@ -1,10 +1,18 @@
+export type NoteMeta = { type: 'text' | 'file' }
+
 export type Note = {
 	contents: string
+	meta: NoteMeta
 	views?: number
 	expiration?: number
 }
 export type NoteInfo = {}
-export type NotePublic = Pick<Note, 'contents'>
+export type NotePublic = Pick<Note, 'contents' | 'meta'>
+export type NoteCreate = Omit<Note, 'meta'> & { meta: string }
+
+export type FileDTO = Pick<File, 'name' | 'size' | 'type'> & {
+	contents: string
+}
 
 type CallOptions = {
 	url: string
@@ -32,26 +40,35 @@ async function call(options: CallOptions) {
 }
 
 export async function create(note: Note) {
+	const { meta, ...rest } = note
+	const body: NoteCreate = {
+		...rest,
+		meta: JSON.stringify(meta),
+	}
 	const data = await call({
 		url: 'notes',
 		method: 'post',
-		body: note,
+		body,
 	})
 	return data as { id: string }
 }
 
-export async function get(id: string) {
+export async function get(id: string): Promise<NotePublic> {
 	const data = await call({
 		url: `notes/${id}`,
 		method: 'delete',
 	})
-	return data as NotePublic
+	const { contents, meta } = data
+	return {
+		contents,
+		meta: JSON.parse(meta) as NoteMeta,
+	}
 }
 
-export async function info(id: string) {
+export async function info(id: string): Promise<NoteInfo> {
 	const data = await call({
 		url: `notes/${id}`,
 		method: 'get',
 	})
-	return data as NoteInfo
+	return data
 }

client/src/lib/files.ts

@@ -0,0 +1,13 @@
+export class Files {
+	static toString(f: File | Blob): Promise<string> {
+		const reader = new window.FileReader()
+		reader.readAsDataURL(f)
+		return new Promise((resolve) => {
+			reader.onloadend = () => resolve(reader.result as string)
+		})
+	}
+
+	static fromString(s: string): Promise<Blob> {
+		return fetch(s).then((r) => r.blob())
+	}
+}

client/src/lib/ui/FileUpload.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { FileDTO } from '$lib/api'
+	import { Files } from '$lib/files'
+	import { createEventDispatcher } from 'svelte'
+
+	export let label: string = ''
+	let files: File[] = []
+
+	const dispatch = createEventDispatcher<{ file: string }>()
+
+	async function onInput(e: Event) {
+		const input = e.target as HTMLInputElement
+		if (input.files.length) {
+			files = Array.from(input.files)
+			const data: FileDTO[] = await Promise.all(
+				files.map(async (file) => ({
+					name: file.name,
+					type: file.type,
+					size: file.size,
+					contents: await Files.toString(file),
+				}))
+			)
+			console.debug(
+				'files',
+				data.map((d) => d.contents.length)
+			)
+			dispatch('file', JSON.stringify(data))
+		} else {
+			dispatch('file', '')
+		}
+	}
+</script>
+
+<label>
+	<small>
+		{label}
+	</small>
+	<input type="file" on:change={onInput} multiple />
+	<div class="box">
+		{#if files.length}
+			<div>
+				<b>Selected Files</b>
+				{#each files as file}
+					<div class="file">
+						{file.name}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div>
+				<b>No Files Selected</b>
+			</div>
+		{/if}
+	</div>
+</label>
+
+<style>
+	input {
+		display: none;
+	}
+
+	.box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+</style>

client/src/lib/ui/ShowNote.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { FileDTO, NotePublic } from '$lib/api'
+	import { Files } from '$lib/files'
+	import copy from 'copy-to-clipboard'
+	import { saveAs } from 'file-saver'
+	import prettyBytes from 'pretty-bytes'
+	import Button from './Button.svelte'
+
+	export let note: NotePublic
+
+	let files: FileDTO[] = []
+
+	$: if (note.meta.type === 'file') {
+		files = JSON.parse(note.contents) as FileDTO[]
+	}
+
+	$: download = () => {
+		for (const file of files) {
+			downloadFile(file)
+		}
+	}
+
+	async function downloadFile(file: FileDTO) {
+		const f = new File([await Files.fromString(file.contents)], file.name, {
+			type: file.type,
+		})
+		saveAs(f)
+	}
+</script>
+
+<p class="error-text">you will <b>not</b> get the chance to see the note again.</p>
+{#if note.meta.type === 'text'}
+	<div class="note" data-testid="note-result">
+		{note.contents}
+	</div>
+	<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
+{:else}
+	{#each files as file}
+		<div class="note file" data-testid="note-result">
+			<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
+			<small> {file.type} － {prettyBytes(file.size)}</small>
+		</div>
+	{/each}
+	<Button on:click={download}>download all</Button>
+{/if}
+
+<style>
+	.note {
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		border: 2px solid var(--ui-bg-1);
+		outline: none;
+		padding: 0.5rem;
+		white-space: pre;
+		overflow: auto;
+		margin-bottom: 0.5rem;
+	}
+
+	.note b {
+		cursor: pointer;
+	}
+
+	.note.file {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+</style>

client/src/lib/ui/Switch.svelte

@@ -4,7 +4,7 @@
 	export let color = true
 </script>
 
-<div>
+<div {...$$restProps}>
 	<label class="switch">
 		<small>{label}</small>
 		<input type="checkbox" bind:checked={value} />

client/src/lib/ui/TextArea.svelte

@@ -7,28 +7,5 @@
 	<small>
 		{label}
 	</small>
-	<textarea {...$$restProps} bind:value />
+	<textarea class="box" {...$$restProps} bind:value />
 </label>
-
-<style>
-	textarea {
-		width: 100%;
-		min-height: min(calc(100vh - 30rem), 30rem);
-		margin: 0;
-		border: 2px solid var(--ui-bg-1);
-		resize: vertical;
-		outline: none;
-		padding: 0.5rem;
-	}
-
-	@media screen and (max-width: 30rem) {
-		textarea {
-			min-height: calc(100vh - 25rem);
-		}
-	}
-
-	textarea:hover,
-	textarea:focus {
-		border-color: var(--ui-clr-primary);
-	}
-</style>

client/src/lib/views/Create.svelte

@@ -4,17 +4,20 @@
 	import { getKeyFromString, encrypt, Hex, getRandomBytes } from '$lib/crypto'
 
 	import Button from '$lib/ui/Button.svelte'
+	import FileUpload from '$lib/ui/FileUpload.svelte'
 	import Switch from '$lib/ui/Switch.svelte'
 	import TextArea from '$lib/ui/TextArea.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
 
 	let note: Note = {
 		contents: '',
+		meta: { type: 'text' },
 		views: 1,
 		expiration: 60,
 	}
 	let result: { password: string; id: string } | null = null
 	let advanced = false
+	let file = false
 	let type = false
 	let message = ''
 	let loading = false
@@ -31,6 +34,8 @@
 		message = 'the note will expire and be destroyed after ' + fraction
 	}
 
+	$: note.meta.type = file ? 'file' : 'text'
+
 	async function submit() {
 		try {
 			error = null
@@ -39,6 +44,7 @@
 			const key = await getKeyFromString(password)
 			const data: Note = {
 				contents: await encrypt(note.contents, key),
+				meta: note.meta,
 			}
 			// @ts-ignore
 			if (type) data.expiration = parseInt(note.expiration)
@@ -89,15 +95,21 @@
 {:else}
 	<form on:submit|preventDefault={submit}>
 		<fieldset disabled={loading}>
-			<TextArea
-				label="note"
-				bind:value={note.contents}
-				placeholder="..."
-				data-testid="input-note"
-			/>
+			{#if file}
+				<FileUpload label="file" on:file={(f) => (note.contents = f.detail)} />
+			{:else}
+				<TextArea
+					label="note"
+					bind:value={note.contents}
+					placeholder="..."
+					data-testid="input-note"
+				/>
+			{/if}
 
 			<div class="bottom">
+				<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>
 
@@ -152,11 +164,19 @@
 <style>
 	.bottom {
 		display: flex;
-		justify-content: space-between;
+		/* justify-content: space-between; */
 		align-items: flex-end;
 		margin-top: 0.5rem;
 	}
 
+	.bottom :global(.file) {
+		margin-right: 0.5rem;
+	}
+
+	.grow {
+		flex: 1;
+	}
+
 	.middle-switch {
 		margin: 0 1rem;
 	}

client/src/routes/note/[id].svelte

@@ -7,13 +7,12 @@
 </script>
 
 <script lang="ts">
-	import { onMount } from 'svelte'
-	import copy from 'copy-to-clipboard'
-
 	import type { NotePublic } from '$lib/api'
-	import { info, get } from '$lib/api'
+	import { get, info } from '$lib/api'
 	import { decrypt, getKeyFromString } from '$lib/crypto'
 	import Button from '$lib/ui/Button.svelte'
+	import ShowNote from '$lib/ui/ShowNote.svelte'
+	import { onMount } from 'svelte'
 
 	export let id: string
 
@@ -29,7 +28,6 @@
 			loading = true
 			error = null
 			password = window.location.hash.slice(1)
-			console.log(password)
 			await info(id)
 			exists = true
 		} catch {
@@ -61,12 +59,7 @@
 			note was not found or was already deleted.
 		</p>
 	{:else if note && !error}
-		<p class="error-text">you will not get the chance to see the note again.</p>
-		<div class="note" data-testid="note-result">
-			{note.contents}
-		</div>
-		<br />
-		<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
+		<ShowNote {note} />
 	{:else}
 		<form on:submit|preventDefault={show}>
 			<fieldset>
@@ -86,16 +79,3 @@
 {#if loading}
 	<p>loading...</p>
 {/if}
-
-<style>
-	.note {
-		width: 100%;
-		margin: 0;
-		padding: 0;
-		border: 2px solid var(--ui-bg-1);
-		outline: none;
-		padding: 0.5rem;
-		white-space: pre;
-		overflow: auto;
-	}
-</style>