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

fix uploader for ios (#51)

This commit is contained in:
Quinn Vinlove 2025-04-12 13:46:27 -04:00 committed by GitHub
parent 90524358d6
commit 8017d5d72d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 80 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,78 +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>();
const uploadFiles = async () => { let acceptedTypes = $state<string>();
const input = document.createElement("input");
input.type = "file";
input.multiple = true;
// filter converters to ones where await converter.valid() is true
const filteredConverters = (
await Promise.all(
converters.map(async (c) => {
if (await c.valid()) return c;
}),
)
).filter((c) => typeof c !== "undefined");
input.accept = filteredConverters
.map((c) => c.supportedFormats.join(","))
.join(",");
input.onchange = (e) => {
const oldLength = files.files.length;
files.add(input.files);
if (oldLength !== files.files.length) goto("/convert");
};
input.click();
};
onMount(() => { const setupFileInput = async () => {
const handler = (e: Event) => { if(!fileInput) return;
e.preventDefault();
return false;
};
uploaderButton?.addEventListener("dragover", handler); const filteredConverters = (
uploaderButton?.addEventListener("dragenter", handler); await Promise.all(
uploaderButton?.addEventListener("dragleave", handler); converters.map(async (c) => {
uploaderButton?.addEventListener("drop", handler); if (await c.valid()) return c;
}),
)
).filter((c) => typeof c !== "undefined");
acceptedTypes = filteredConverters
.map((c) => c.supportedFormats.join(","))
.join(",");
};
return () => {
uploaderButton?.removeEventListener("dragover", handler); const uploadFiles = async () => {
uploaderButton?.removeEventListener("dragenter", handler); if(!fileInput) return
uploaderButton?.removeEventListener("dragleave", handler); fileInput.click();
uploaderButton?.removeEventListener("drop", handler); };
};
}); const handleFileChange = (e: Event) => {
if(!fileInput) return;
const oldLength = files.files.length;
files.add(fileInput.files);
if (oldLength !== files.files.length) goto("/convert");
};
onMount(() => {
const handler = (e: Event) => {
e.preventDefault();
return false;
};
uploaderButton?.addEventListener("dragover", handler);
uploaderButton?.addEventListener("dragenter", handler);
uploaderButton?.addEventListener("dragleave", handler);
uploaderButton?.addEventListener("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}>
<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"
> >
<div <div
class="w-16 h-16 bg-accent rounded-full flex items-center justify-center p-4" 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" /> <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 upload
</h2> </h2>
</Panel> </Panel>
</button> </button>