diff --git a/web/i18n/en/receiver.json b/web/i18n/en/receiver.json index 567e569f..43144ae9 100644 --- a/web/i18n/en/receiver.json +++ b/web/i18n/en/receiver.json @@ -1,5 +1,7 @@ { "title": "drag or select a file", + "title.multiple": "drag or select files", "title.drop": "drop the file here!", + "title.drop.multiple": "drop the files here!", "accept": "supported formats: {{ formats }}." } diff --git a/web/src/components/misc/DropReceiver.svelte b/web/src/components/misc/DropReceiver.svelte index a653067d..4a51407a 100644 --- a/web/src/components/misc/DropReceiver.svelte +++ b/web/src/components/misc/DropReceiver.svelte @@ -3,19 +3,20 @@ export let classes = ""; export let draggedOver = false; - export let file: File | undefined; + export let files: FileList | undefined; const dropHandler = async (ev: DragEvent) => { draggedOver = false; ev.preventDefault(); - if (ev?.dataTransfer?.files.length === 1) { - file = ev.dataTransfer.files[0]; - return file; + if (ev?.dataTransfer?.files && ev?.dataTransfer?.files.length > 0) { + files = ev.dataTransfer.files; + return files; } }; const dragOverHandler = (ev: DragEvent) => { + console.log("dragged over omg") draggedOver = true; ev.preventDefault(); }; @@ -25,6 +26,7 @@ {id} class={classes} role="region" + aria-hidden="true" on:drop={(ev) => dropHandler(ev)} on:dragover={(ev) => dragOverHandler(ev)} on:dragend={() => { diff --git a/web/src/components/misc/FileReceiver.svelte b/web/src/components/misc/FileReceiver.svelte index 59d1b406..d2921be7 100644 --- a/web/src/components/misc/FileReceiver.svelte +++ b/web/src/components/misc/FileReceiver.svelte @@ -5,22 +5,33 @@ import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte"; import IconUpload from "@tabler/icons-svelte/IconUpload.svelte"; - export let file: File | undefined; + export let files: FileList | undefined; export let draggedOver = false; export let acceptTypes: string[]; export let acceptExtensions: string[]; + export let maxFileNumber: number = 100; + + let selectorStringMultiple = maxFileNumber > 1 ? ".multiple" : ""; let fileInput: HTMLInputElement; + const openFile = async () => { fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = acceptTypes.join(","); + if (maxFileNumber > 1) { + fileInput.multiple = true; + } + fileInput.click(); fileInput.onchange = async () => { - if (fileInput.files?.length === 1) { - file = fileInput.files[0]; - return file; + let userFiles = fileInput?.files; + if (userFiles && userFiles.length >= 1) { + if (userFiles.length > maxFileNumber) { + return alert("too many files, limit is " + maxFileNumber); + } + return files = userFiles; } }; }; @@ -47,9 +58,9 @@