feat: multi-image uploads

src/routes/space/+page.svelte

@@ -5,13 +5,13 @@
     import Navbar from "$lib/components/Navbar.svelte";
     import crossUrl from "$lib/assets/cross.svg";
     import Button from "$lib/components/Button.svelte";
-    import Image from "$lib/components/inputs/Image.svelte";
+    import Images from "$lib/components/inputs/Images.svelte";
     import type { Table } from "$lib";
 
     const { data } = $props();
     const { supabase } = $derived(data);
 
-    let spaceImg = $state<FileList>();
+    let spaceImgs = $state<FileList>();
     let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
         description: "",
         building_location: "",
@@ -19,8 +19,7 @@
     });
 
     async function uploadStudySpace() {
-        const imageFile = spaceImg?.[0];
-        if (!imageFile) return alert("Please select an image file.");
+        if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
 
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
@@ -30,21 +29,31 @@
         if (studySpaceError)
             return alert(`Error uploading study space: ${studySpaceError.message}`);
 
-        const { data: imgUpload, error: imageError } = await supabase.storage
-            .from("files_bucket")
-            .upload(`public/${studySpaceInsert.id}-${imageFile.name}`, imageFile, {
-                contentType: imageFile.type
-            });
+        const imgUploads = await Promise.all(
+            Array(spaceImgs.length)
+                .keys()
+                .map(async (i) => {
+                    const imageFile = spaceImgs![i];
+                    const resp = await supabase.storage
+                        .from("files_bucket")
+                        .upload(`public/${studySpaceInsert.id}-${imageFile.name}`, imageFile, {
+                            contentType: imageFile.type
+                        });
+                    return resp;
+                })
+        );
+        const imageError = imgUploads.find(({ error }) => error)?.error;
         if (imageError) return alert(`Error uploading image: ${imageError.message}`);
 
         const { error: imageInsertError } = await supabase
             .from("study_space_images")
-            .insert({
-                study_space_id: studySpaceInsert.id,
-                image_path: imgUpload.path
-            })
-            .select()
-            .single();
+            .insert(
+                imgUploads.map(({ data }) => ({
+                    study_space_id: studySpaceInsert.id,
+                    image_path: data!.path
+                }))
+            )
+            .select();
         if (imageInsertError) return alert(`Error creating image: ${imageInsertError.message}`);
 
         alert("Thank you for your contribution!");
@@ -67,7 +76,7 @@
         await uploadStudySpace();
     }}
 >
-    <Image name="study-space-image" minHeight="16rem" bind:files={spaceImg} required />
+    <Images name="study-space-image" minHeight="16rem" bind:files={spaceImgs} required />
 
     <label for="location">Enter the name:</label>
     <Text
@@ -97,7 +106,7 @@
     <div class="submit">
         <Button
             type="submit"
-            disabled={(spaceImg?.length || 0) === 0 ||
+            disabled={(spaceImgs?.length || 0) === 0 ||
                 !studySpaceData.location ||
                 !studySpaceData.description ||
                 !studySpaceData.building_location}