resolves fileLimit issue and adds harnesses for testing.

Author: chanced

src/lib/file.ts

@@ -7,8 +7,16 @@ import {
 	FileSizeMinimumNotMetError,
 	InvalidFileTypeError,
 } from "./errors";
+
 import type { FileWithPath } from "file-selector";
 
+declare module "file-selector" {
+	interface FileWithPath extends Blob {
+		readonly path?: string;
+		readonly webkitRelativePath: string;
+	}
+}
+
 export interface RejectedFile {
 	file: FileWithPath;
 	error: FileDropError;
@@ -27,7 +35,8 @@ type CheckParams = {
 
 export function processFiles(files: FileWithPath[], options: FileDropOptions): Files {
 	let { fileLimit } = options;
-	if (options.multiple) {
+
+	if (options.multiple != undefined && !options.multiple) {
 		fileLimit = 1;
 	}
 	let count = 0;
@@ -37,7 +46,7 @@ export function processFiles(files: FileWithPath[], options: FileDropOptions): F
 			if (error != undefined) {
 				accumulator.rejected.push({ file, error });
 				return accumulator;
-			} else if (fileLimit > 0 && count > fileLimit) {
+			} else if (fileLimit > 0 && count >= fileLimit) {
 				error = new FileCountExceededError(file, fileLimit);
 				accumulator.rejected.push({ file, error });
 				return accumulator;
@@ -50,7 +59,7 @@ export function processFiles(files: FileWithPath[], options: FileDropOptions): F
 	);
 }
 
-export function checkFile(file: File, params: CheckParams): FileDropError | undefined {
+export function checkFile(file: FileWithPath, params: CheckParams): FileDropError | undefined {
 	const { accept, minSize: min, maxSize: max } = params;
 	return checkFileType(file, accept) || checkFileSize(file, { min, max });
 }

src/routes/test/action.svelte

@@ -1,9 +1,49 @@
-<script lang="ts">
-	import type { FileDropOptions } from "$lib";
-	// import { filedrop } from "$lib/actions/filedrop";
-	let options: FileDropOptions = {};
+<script context="module" lang="ts">
+	import type { Load } from "@sveltejs/kit";
+	import type { FileDropOptions } from "$lib/options";
 
-	globalThis.setOptions = (opts: FileDropOptions) => {
-		options = opts;
+	export const load: Load = async function ({ page }) {
+		const { query } = page;
+		function getNumber(key: string): number | undefined {
+			const str = query.get(key);
+			const n = parseInt(str);
+			if (!isNaN(n)) {
+				return n;
+			}
+			return undefined;
+		}
+		function getBool(key: string): boolean | undefined {
+			const b = query.get(key);
+			if (b === "true") {
+				return true;
+			}
+			if (b === "false") {
+				return false;
+			}
+			return undefined;
+		}
+		function getAccept(): string | string[] | undefined {
+			const accept = query.getAll("accept").filter((v) => v.length > 0);
+			if (accept.length === 1) {
+				return accept[0];
+			}
+			if (accept.length > 1) {
+				return accept;
+			}
+			return undefined;
+		}
+		const opts: FileDropOptions = {
+			accept: getAccept(),
+			clickToUpload: getBool("clickToUpload"),
+			disabled: getBool("disabled"),
+			hideInput: getBool("hideInput"),
+			fileLimit: getNumber("fileLimit"),
+			maxSize: getNumber("maxSize"),
+			minSize: getNumber("minSize"),
+			windowDrop: getBool("windowDrop"),
+			multiple: getBool("multiple"),
+			tabIndex: getNumber("tabIndex"),
+		};
+		return { props: { opts } };
 	};
 </script>

src/routes/test/component.svelte

@@ -1,12 +1,75 @@
-<script lang="ts">
-	import type { FileDropOptions } from "$lib";
-
-	import FileDrop from "$lib/components";
-	let options: FileDropOptions = {};
+<script context="module" lang="ts">
+	import type { Load } from "@sveltejs/kit";
+	import type { FileDropOptions } from "$lib/options";
 
-	globalThis.setOptions = (opts: FileDropOptions) => {
-		options = opts;
+	export const load: Load = async function ({ page }) {
+		const { query } = page;
+		function getNumber(key: string): number | undefined {
+			const str = query.get(key);
+			const n = parseInt(str);
+			if (!isNaN(n)) {
+				return n;
+			}
+			return undefined;
+		}
+		function getBool(key: string): boolean | undefined {
+			const b = query.get(key);
+			if (b === "true") {
+				return true;
+			}
+			if (b === "false") {
+				return false;
+			}
+			return undefined;
+		}
+		function getAccept(): string | string[] | undefined {
+			const accept = query.getAll("accept").filter((v) => v.length > 0);
+			if (accept.length === 1) {
+				return accept[0];
+			}
+			if (accept.length > 1) {
+				return accept;
+			}
+			return undefined;
+		}
+		const opts: FileDropOptions = {
+			accept: getAccept(),
+			clickToUpload: getBool("clickToUpload"),
+			disabled: getBool("disabled"),
+			hideInput: getBool("hideInput"),
+			fileLimit: getNumber("fileLimit"),
+			maxSize: getNumber("maxSize"),
+			minSize: getNumber("minSize"),
+			windowDrop: getBool("windowDrop"),
+			multiple: getBool("multiple"),
+			tabIndex: getNumber("tabIndex"),
+		};
+		return { props: { opts } };
 	};
 </script>
 
-<FileDrop {...options} />
+<script lang="ts">
+	import FileDrop from "$lib/components";
+	import type { Files } from "$lib/file";
+	import fileSize from "filesize";
+	export let opts: FileDropOptions = {};
+	let files: Files;
+	console.log(opts);
+</script>
+
+<FileDrop {...opts} on:filedrop={(e) => (files = e.detail.files)} />
+
+{#if files}
+	<h3>Accepted files</h3>
+	<ul>
+		{#each files.accepted as file}
+			<li>{file.name} - {fileSize(file.size)}</li>
+		{/each}
+	</ul>
+	<h3>Rejected files</h3>
+	<ul>
+		{#each files.rejected as rejected}
+			<li>{rejected.file.name} - {rejected.error.message}</li>
+		{/each}
+	</ul>
+{/if}

tests/components/FileDrop.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("basic test", async ({ page }) => {
-	await page.goto("http://localhost:3000");
+	page.on("console", (msg) => console.log(msg.text()));
+
+	await page.goto("http://localhost:3000/test/component?disabled=true");
 });