fix: uppercase extensions (#58)

src/lib/types/file.svelte.ts

@@ -5,9 +5,10 @@ import { addToast } from "$lib/store/ToastProvider";
 
 export class VertFile {
 	public id: string = Math.random().toString(36).slice(2, 8);
+	public readonly file: File;
 
 	public get from() {
-		return "." + this.file.name.split(".").pop()!;
+		return ("." + this.file.name.split(".").pop() || "").toLowerCase();
 	}
 
 	public get name() {
@@ -41,11 +42,13 @@ export class VertFile {
 		return converter;
 	}
 
-	constructor(
-		public readonly file: File,
-		to: string,
-		blobUrl?: string,
-	) {
+	constructor(file: File, to: string, blobUrl?: string) {
+		const ext = file.name.split(".").pop();
+		const newFile = new File(
+			[file.slice(0, file.size, file.type)],
+			`${file.name.split(".").slice(0, -1).join(".")}.${ext?.toLowerCase()}`,
+		);
+		this.file = newFile;
 		this.to = to;
 		this.converters = converters.filter((c) =>
 			c.supportedFormats.includes(this.from),

src/routes/+page.svelte

@@ -76,7 +76,7 @@
 		<div class="flex gap-4 mt-8 md:flex-row flex-col">
 			{#each Object.entries(status) as [key, s]}
 				{@const Icon = s.icon}
-				<div class="file-category-card w-full">
+				<div class="file-category-card w-full flex flex-col">
 					<div class="file-category-card-inner">
 						<div
 							class={clsx("icon-container", {
@@ -91,7 +91,7 @@
 						<span>{key}</span>
 					</div>
 
-					<div class="file-category-card-content">
+					<div class="file-category-card-content flex-grow">
 						{#if key === "Video"}
 							<p>
 								Video uploads to a server for processing by
@@ -102,7 +102,9 @@
 								>.
 							</p>
 						{:else}
-							<p class="flex items-center justify-center gap-2">
+							<p
+								class="flex items-center justify-center gap-2 h-full"
+							>
 								<Check size="20" /> Fully supported
 							</p>
 						{/if}