feat: multi-image uploads

src/lib/components/inputs/Images.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import cameraUrl from "$lib/assets/camera.svg";
+    import Carousel from "../Carousel.svelte";
 
     interface Props {
         name: string;
@@ -18,14 +19,37 @@
     class:no-bg={files && files.length > 0}
 >
     {#if files && files.length > 0}
-        <img src={URL.createObjectURL(files[0])} alt="uploaded study space" class="preview" />
+        <Carousel
+            urls={files
+                ? Array(files.length)
+                      .keys()
+                      .map((i) => URL.createObjectURL(files![i]))
+                      .toArray()
+                : []}
+            ondelete={(idx) => {
+                if (!files) return;
+                const dt = new DataTransfer();
+                for (let i = 0; i < files.length; i++) {
+                    if (i !== idx) dt.items.add(files[i]);
+                }
+                files = dt.files;
+            }}
+        />
     {:else}
         <div class="message">
             <img src={cameraUrl} class="icon" alt="camera icon" />
             <span>Click to upload a photo</span>
         </div>
     {/if}
-    <input type="file" id={name} {name} accept=".png, .jpg, .jpeg, .svg" {...rest} bind:files />
+    <input
+        type="file"
+        id={name}
+        {name}
+        multiple
+        accept=".png, .jpg, .jpeg, .svg"
+        {...rest}
+        bind:files
+    />
 </label>
 
 <style>