feat(webui): files can be added or removed from the upload dialog

webui/src/lib/components/AddModal.svelte

@@ -2,6 +2,7 @@
 	import mitt from 'mitt';
 
 	export type AddEvents = {
+		choose: void;
 		files: File[];
 		urls: string[];
 	};
@@ -75,14 +76,25 @@
 	<div class="addmodal" on:click|stopPropagation>
 		<div class="files">
 			{#each files as file}
-				<div class="add">
-					<div class="file">
-						<div class="icon">
-							<Icon name="file" />
+				<div class="entry">
+					<div class="row">
+						<div class="file">
+							<div class="icon">
+								<Icon name="file" />
+							</div>
+							<div class="label">{file.name}</div>
+							{#if file.type.startsWith('image')}
+								<img src={URL.createObjectURL(file)} alt="To be uploaded." />
+							{/if}
 						</div>
-						<div class="label">{file.name}</div>
-						{#if file.type.startsWith('image')}
-							<img src={URL.createObjectURL(file)} alt="To be uploaded." />
+						{#if !uploading}
+							<IconButton
+								small
+								subdued
+								color="#dc322f"
+								name="x-circle"
+								on:click={() => (files = files.filter((f) => f !== file))}
+							/>
 						{/if}
 					</div>
 					{#if uploading && files.length > 1}
@@ -92,6 +104,9 @@
 					{/if}
 				</div>
 			{/each}
+			<div class="entry add">
+				<IconButton outline name="plus-circle" on:click={() => addEmitter.emit('choose')} />
+			</div>
 		</div>
 		<div class="controls">
 			<IconButton small disabled={uploading} name="upload" on:click={upload}>
@@ -158,7 +173,14 @@
 		width: 80vw;
 	}
 
+	.entry .row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
 	.file {
+		flex-grow: 1;
 		display: flex;
 		align-items: center;
 		gap: 1rem;
@@ -182,10 +204,16 @@
 		}
 	}
 
+	.entry.add {
+		display: flex;
+		flex-direction: column;
+		font-size: 1.5em;
+	}
+
 	.controls {
 		display: flex;
 		justify-content: center;
-		font-size: 48px;
+		font-size: 3em;
 		margin-top: 0.5rem;
 	}
 
@@ -194,7 +222,7 @@
 		margin-bottom: 0.5rem;
 	}
 
-	.add .progress {
+	.entry .progress {
 		margin-bottom: 1.5rem;
 	}
 </style>

webui/src/lib/components/layout/Header.svelte

@@ -6,6 +6,7 @@
 	import Selector, { type SelectorValue } from '../utils/Selector.svelte';
 	import { i18n } from '$lib/i18n';
 	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	let selector: Selector;
 
@@ -62,6 +63,10 @@
 		}
 	}
 
+	onMount(() => {
+		addEmitter.on('choose', () => fileInput.click());
+	});
+
 	async function rescan() {
 		await api.refreshVault();
 		jobsEmitter.emit('reload');
@@ -86,7 +91,7 @@
 			<Icon name="search" slot="prefix" />
 		</Selector>
 	</div>
-	<button class="button" on:click={() => fileInput.click()}>
+	<button class="button" on:click={() => addEmitter.emit('choose')}>
 		<Icon name="upload" />
 		<input type="file" multiple bind:this={fileInput} on:change={onFileChange} />
 	</button>