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}`);
+  }
+}