feat: drop or click to *convert* (#52)

This commit is contained in:
not-nullptr 2025-04-13 12:47:32 +01:00
parent a8386ee3f1
commit 5b5901c4c7
1 changed files with 80 additions and 73 deletions

View File

@ -33,9 +33,8 @@
.join(","); .join(",");
}; };
const uploadFiles = async () => { const uploadFiles = async () => {
if(!fileInput) return if (!fileInput) return;
fileInput.click(); fileInput.click();
}; };
@ -47,7 +46,6 @@
if (oldLength !== files.files.length) goto("/convert"); if (oldLength !== files.files.length) goto("/convert");
}; };
onMount(() => { onMount(() => {
const handler = (e: Event) => { const handler = (e: Event) => {
e.preventDefault(); e.preventDefault();
@ -70,12 +68,21 @@
}); });
</script> </script>
<input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleFileChange} accept={acceptedTypes}> <input
bind:this={fileInput}
type="file"
multiple
class="hidden"
onchange={handleFileChange}
accept={acceptedTypes}
/>
<button <button
onclick={uploadFiles} onclick={uploadFiles}
bind:this={uploaderButton} bind:this={uploaderButton}
class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)} class={clsx(
`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`,
)}
> >
<Panel <Panel
class="flex justify-center items-center w-full h-full flex-col pointer-events-none" class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
@ -86,7 +93,7 @@
<UploadIcon class="w-full h-full text-on-accent" /> <UploadIcon class="w-full h-full text-on-accent" />
</div> </div>
<h2 class="text-center text-2xl font-semibold mt-4"> <h2 class="text-center text-2xl font-semibold mt-4">
Drop or click to upload Drop or click to convert
</h2> </h2>
</Panel> </Panel>
</button> </button>