Handle file parsing

src/routes/+page.svelte

@@ -12,10 +12,7 @@
 	let modal: HTMLDialogElement;
 </script>
 
-<Button variant="primary" on:click={onClick}>Upload</Button>
-<Button variant="secondary" on:click={() => showSnackbar('Snackbar')}>Upload</Button>
-<Button variant="tertiary" on:click={() => modal.showModal()}>Upload</Button>
-<Button variant="danger" on:click={onClick}>Upload</Button>
+<Button variant="secondary" on:click={onClick}>Upload</Button>
 <Modal bind:modal>
 	<div slot="title">Title</div>
 	<div slot="content">

src/routes/upload/+page.svelte

@@ -1,24 +1,44 @@
 <script lang="ts">
+	import Button from '$lib/components/Button.svelte';
 	import FileUpload from '$lib/components/FileUpload.svelte';
-	import { unzipManga } from '$lib/upload';
-	import type { Entry } from '@zip.js/zip.js';
+	import { processFiles, unzipManga, type Volume } from '$lib/upload';
 
-	let promise: Promise<Entry[]> | undefined;
+	let promise: Promise<Volume[] | undefined> | undefined;
 
 	async function onUpload(files: FileList) {
-		const [file] = files;
-		promise = unzipManga(file);
+		promise = processFiles(files);
 	}
+
+	function up() {
+		page++;
+	}
+
+	function down() {
+		if (page > 0) {
+			page--;
+		}
+	}
+
+	let page = 0;
 </script>
 
-<FileUpload {onUpload} accept=".mokuro,.zip,.cbz,.rar" />
-
+<!-- Note:  webkitdirectory is not fully supported and does not work on mobile -->
+<Button on:click={down}>{'<'}</Button>
+<Button on:click={up}>{'>'}</Button>
+{page}
+<FileUpload {onUpload} webkitdirectory>Upload directory</FileUpload>
+<FileUpload {onUpload} accept=".mokuro,.zip,.cbz,.rar" multiple>Upload files</FileUpload>
 {#if promise}
 	{#await promise}
 		<p>Loading...</p>
-	{:then entries}
-		{#each entries as entry}
-			<p>{entry.filename}</p>
-		{/each}
+	{:then volumes}
+		{#if volumes}
+			{#each volumes as { mokuroData, volumeName, archiveFile, files }}
+				<p>{volumeName}</p>
+				{#if files}
+					<img src={URL.createObjectURL(Object.values(files)[page])} alt="img" />
+				{/if}
+			{/each}
+		{/if}
 	{/await}
 {/if}