RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/lib/components/functional/Uploader.svelte
View File

@ -1,92 +1,99 @@
<script lang="ts"> <script lang="ts">
import { UploadIcon } from "lucide-svelte"; import { UploadIcon } from "lucide-svelte";
import Panel from "../visual/Panel.svelte"; import Panel from "../visual/Panel.svelte";
import clsx from "clsx"; import clsx from "clsx";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { effects, files } from "$lib/store/index.svelte"; import { effects, files } from "$lib/store/index.svelte";
import { converters } from "$lib/converters"; import { converters } from "$lib/converters";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
type Props = { type Props = {
class?: string; class?: string;
}; };
const { class: classList }: Props = $props(); const { class: classList }: Props = $props();
let uploaderButton = $state<HTMLButtonElement>(); let uploaderButton = $state<HTMLButtonElement>();
let fileInput = $state<HTMLInputElement>(); let fileInput = $state<HTMLInputElement>();
let acceptedTypes = $state<string>(); let acceptedTypes = $state<string>();
const setupFileInput = async () => { const setupFileInput = async () => {
if(!fileInput) return; if (!fileInput) return;
const filteredConverters = ( const filteredConverters = (
await Promise.all( await Promise.all(
converters.map(async (c) => { converters.map(async (c) => {
if (await c.valid()) return c; if (await c.valid()) return c;
}), }),
) )
).filter((c) => typeof c !== "undefined"); ).filter((c) => typeof c !== "undefined");
acceptedTypes = filteredConverters acceptedTypes = filteredConverters
.map((c) => c.supportedFormats.join(",")) .map((c) => c.supportedFormats.join(","))
.join(","); .join(",");
}; };
const uploadFiles = async () => {
if (!fileInput) return;
fileInput.click();
};
const uploadFiles = async () => { const handleFileChange = (e: Event) => {
if(!fileInput) return if (!fileInput) return;
fileInput.click();
};
const handleFileChange = (e: Event) => { const oldLength = files.files.length;
if(!fileInput) return; files.add(fileInput.files);
if (oldLength !== files.files.length) goto("/convert");
};
const oldLength = files.files.length; onMount(() => {
files.add(fileInput.files); const handler = (e: Event) => {
if (oldLength !== files.files.length) goto("/convert"); e.preventDefault();
}; return false;
};
uploaderButton?.addEventListener("dragover", handler);
uploaderButton?.addEventListener("dragenter", handler);
uploaderButton?.addEventListener("dragleave", handler);
uploaderButton?.addEventListener("drop", handler);
onMount(() => { void setupFileInput();
const handler = (e: Event) => {
e.preventDefault();
return false;
};
uploaderButton?.addEventListener("dragover", handler); return () => {
uploaderButton?.addEventListener("dragenter", handler); uploaderButton?.removeEventListener("dragover", handler);
uploaderButton?.addEventListener("dragleave", handler); uploaderButton?.removeEventListener("dragenter", handler);
uploaderButton?.addEventListener("drop", handler); uploaderButton?.removeEventListener("dragleave", handler);
uploaderButton?.removeEventListener("drop", handler);
void setupFileInput(); };
});
return () => {
uploaderButton?.removeEventListener("dragover", handler);
uploaderButton?.removeEventListener("dragenter", handler);
uploaderButton?.removeEventListener("dragleave", handler);
uploaderButton?.removeEventListener("drop", handler);
};
});
</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 )}
class="flex justify-center items-center w-full h-full flex-col pointer-events-none" >
> <Panel
<div class="flex justify-center items-center w-full h-full flex-col pointer-events-none"
class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4" >
> <div
<UploadIcon class="w-full h-full text-on-accent" /> class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4"
</div> >
<h2 class="text-center text-2xl font-semibold mt-4"> <UploadIcon class="w-full h-full text-on-accent" />
Drop or click to upload </div>
</h2> <h2 class="text-center text-2xl font-semibold mt-4">
</Panel> Drop or click to convert
</h2>
</Panel>
</button> </button>