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

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

This reverts commit 5b5901c4c7.
This commit is contained in:
not-nullptr 2025-04-13 12:56:06 +01:00
parent c6ccba97db
commit 7151a2dbce
1 changed files with 73 additions and 80 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,99 +1,92 @@
<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 handleFileChange = (e: Event) => { const uploadFiles = async () => {
if (!fileInput) return; if(!fileInput) return
fileInput.click();
};
const oldLength = files.files.length; const handleFileChange = (e: Event) => {
files.add(fileInput.files); if(!fileInput) return;
if (oldLength !== files.files.length) goto("/convert");
};
onMount(() => { const oldLength = files.files.length;
const handler = (e: Event) => { files.add(fileInput.files);
e.preventDefault(); if (oldLength !== files.files.length) goto("/convert");
return false; };
};
uploaderButton?.addEventListener("dragover", handler);
uploaderButton?.addEventListener("dragenter", handler);
uploaderButton?.addEventListener("dragleave", handler);
uploaderButton?.addEventListener("drop", handler);
void setupFileInput(); onMount(() => {
const handler = (e: Event) => {
e.preventDefault();
return false;
};
return () => { uploaderButton?.addEventListener("dragover", handler);
uploaderButton?.removeEventListener("dragover", handler); uploaderButton?.addEventListener("dragenter", handler);
uploaderButton?.removeEventListener("dragenter", handler); uploaderButton?.addEventListener("dragleave", handler);
uploaderButton?.removeEventListener("dragleave", handler); uploaderButton?.addEventListener("drop", 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 <input bind:this={fileInput} type="file" multiple class="hidden" onchange={handleFileChange} accept={acceptedTypes}>
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( class={clsx(`hover:scale-105 active:scale-100 ${$effects ? "" : "!scale-100"} duration-200 ${classList}`)}
`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 >
class="flex justify-center items-center w-full h-full flex-col pointer-events-none" <div
> class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4"
<div >
class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4" <UploadIcon class="w-full h-full text-on-accent" />
> </div>
<UploadIcon class="w-full h-full text-on-accent" /> <h2 class="text-center text-2xl font-semibold mt-4">
</div> Drop or click to upload
<h2 class="text-center text-2xl font-semibold mt-4"> </h2>
Drop or click to convert </Panel>
</h2>
</Panel>
</button> </button>