Handle file parsing

src/lib/components/FileUpload.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	export let accept: string | null | undefined = undefined;
 	export let files: FileList | null | undefined = undefined;
-	export let multiple: boolean | null | undefined = true;
 	export let onUpload: ((files: FileList) => void) | undefined = undefined;
 
 	let input: HTMLInputElement;
@@ -22,7 +20,7 @@
 	}
 </script>
 
-<input type="file" {multiple} {accept} bind:files bind:this={input} on:change={handleChange} />
+<input type="file" bind:files bind:this={input} on:change={handleChange} {...$$restProps} />
 
 <button
 	on:click={onClick}

src/lib/upload/index.ts

@@ -1,8 +1,88 @@
+import { requestPersistentStorage } from "$lib/util/upload";
 import { BlobReader, ZipReader } from "@zip.js/zip.js";
 
+export type Volume = {
+  mokuroData: any;
+  volumeName: string;
+  archiveFile?: File | undefined;
+  files?: Record<string, File>;
+}
+
 export async function unzipManga(file: File) {
   const zipFileReader = new BlobReader(file);
   const zipReader = new ZipReader(zipFileReader);
 
   return await zipReader.getEntries()
 }
+
+function getDetails(file: File) {
+  const [filename, ext] = file.name.split('.');
+
+  return {
+    filename,
+    ext
+  }
+}
+
+
+export function processVolumes(volumes: Volume[]) {
+  volumes.map(({ mokuroData, volumeName, archiveFile, files }) => {
+    console.log(mokuroData, volumeName, archiveFile, files);
+  })
+}
+
+export async function processFiles(fileList: FileList) {
+  const files = [...fileList]
+  const zipTypes = ['zip', 'rar', 'cbz']
+  const volumes: Record<string, Volume> = {};
+
+  for (const file of files) {
+    const { ext, filename } = getDetails(file)
+    const { type, webkitRelativePath } = file
+
+    if (ext === 'mokuro') {
+      const mokuroData = JSON.parse(await file.text())
+
+      volumes[filename] = {
+        ...volumes[filename],
+        mokuroData,
+        volumeName: filename
+      };
+      continue;
+    }
+
+    if (type === 'image/jpeg' || type === 'image/png') {
+      if (webkitRelativePath) {
+        const imageName = webkitRelativePath.split('/').at(-1)
+        const vol = webkitRelativePath.split('/').at(-2)
+
+        if (vol && imageName) {
+          volumes[vol] = {
+            ...volumes[vol],
+            files: {
+              ...volumes[vol]?.files,
+              [imageName]: file,
+            },
+          };
+        }
+      }
+      continue;
+    }
+
+    if (zipTypes.includes(ext)) {
+      volumes[filename] = {
+        ...volumes[filename],
+        archiveFile: file
+      }
+      continue;
+    }
+  }
+
+  const vols = Object.values(volumes);
+
+  if (vols.length > 0) {
+    await requestPersistentStorage();
+    await processVolumes(vols)
+    return vols;
+  }
+}

src/lib/util/upload.ts

@@ -0,0 +1,6 @@
+export async function requestPersistentStorage() {
+  if (navigator.storage && navigator.storage.persist) {
+    const isPersisted = await navigator.storage.persist();
+    console.log(`Persisted storage granted: ${isPersisted}`);
+  }
+}

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>
+	{: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}