you can now upload the img and vids and you get a url for it ill implement seeing that img and vid latter

src/routes/kahootclone/create/components/Questions/question.svelte

@@ -3,9 +3,12 @@
 	import GenerateOptionsUsingAI from "../buttons/GenerateOptionsUsingAI.svelte";
 	import Answers from "./answers.svelte";
 	import { questions } from "../../logic/GameCreateData.svelte.js";
+	import { UpLoadFiles } from "../../logic/UpLoadFiles.js";
 
 	let props = $props();
 	let index = props.index;
+
+	let files;
 </script>
 
 <div class="flex items-center gap-3">
@@ -50,5 +53,6 @@
 			{/each}
 		</div>
 		<GenerateOptionsUsingAI {index} />
+		<input type="file" onchange={() => UpLoadFiles(files[0])} bind:files accept="image/*,video/*" />
 	</div>
 </div>

src/routes/kahootclone/create/logic/GameCreateData.svelte.js

@@ -1,8 +1,6 @@
 import { DefaultQuestions } from "$lib/config.js";
 
-export let Wait = $state({
-	v: false,
-});
+export let Wait = $state({ v: false });
 export let questions = $state({
 	v: [
 		{

src/routes/kahootclone/create/logic/UpLoadFiles.js

@@ -0,0 +1,31 @@
+import toast from "svelte-5-french-toast";
+import { supabase } from "$lib/supabase.js";
+
+export async function UpLoadFiles(file) {
+	if (!file) {
+		toast.error("Please select a file to upload first.");
+		return;
+	}
+
+	const fileExt = file.name.split(".").pop();
+	const fileName = `${Date.now()}.${fileExt}`;
+	const filePath = `${fileName}`;
+
+	const uploadPromise = supabase.storage.from("useruploadedcontent").upload(filePath, file);
+
+	const result = await toast.promise(uploadPromise, {
+		loading: "Uploading...",
+		success: "Upload successful!",
+		error: (error) => `Upload failed. ${error.message} Please try again.`,
+	});
+
+	if (result.error) {
+		console.error("Upload error:", result.error.message);
+		return;
+	}
+
+	// Retrieve public URL
+	const { data: publicData } = supabase.storage.from("useruploadedcontent").getPublicUrl(filePath);
+
+	toast.success(publicData.publicUrl);
+}