From 2acfc1defbaf7e92b1f457c88dec8d67ac71746a Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 14 Jun 2024 16:04:02 +0000
Subject: [PATCH 1/2] Image upload for adventures

---
 package.json                                 |   5 +-
 src/lib/components/AdventureCard.svelte      |  20 ++-
 src/lib/components/CreateNewAdventure.svelte |  27 +++-
 src/lib/components/ImageModal.svelte         | 146 +++++++++++++++++++
 src/routes/api/upload/+server.ts             |   2 +-
 5 files changed, 185 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/ImageModal.svelte

diff --git a/package.json b/package.json
index 0a9812e6..08ae22ec 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,14 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
+    "generate": "drizzle-kit generate:pg --config drizzle.config.ts",
+    "migrate": "drizzle-kit push:pg --config drizzle.config.ts",
+    "minio": "cd minio && docker-compose up",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "studio": "drizzle-kit studio --config drizzle.config.ts",
-    "generate": "drizzle-kit generate:pg --config drizzle.config.ts",
-    "migrate": "drizzle-kit push:pg --config drizzle.config.ts",
     "seed": "node seed.js"
   },
   "devDependencies": {
diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 816cd2e3..d919093e 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -42,12 +42,20 @@
 >
   <figure>
     <!-- svelte-ignore a11y-img-redundant-alt -->
-    <img
-      src={adventure.imageUrl ||
-        "https://placehold.co/300?text=No%20Image%20Found&font=roboto"}
-      alt="No image available"
-      class="w-full h-48 object-cover"
-    />
+    {#if adventure.imageUrl && adventure.imageUrl !== ""}
+      <img
+        src="/cdn/adventures/{adventure.imageUrl}"
+        alt="No image available"
+        class="w-full h-48 object-cover"
+        crossorigin="anonymous"
+      />
+    {:else}
+      <img
+        src={"https://placehold.co/300?text=No%20Image%20Found&font=roboto"}
+        alt="No image available"
+        class="w-full h-48 object-cover"
+      />
+    {/if}
   </figure>
 
   <div class="card-body">
diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 4ef3dc42..74401025 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -18,8 +18,11 @@
   import { onMount } from "svelte";
   import { addActivityType, generateDescription, getImage } from "$lib";
   import AutoComplete from "./AutoComplete.svelte";
+  import ImageModal from "./ImageModal.svelte";
   let modal: HTMLDialogElement;
 
+  let isImageModalOpen: boolean = false;
+
   let activityTypes: string[] = [];
 
   $: selected = "";
@@ -96,8 +99,18 @@
     newAdventure = addActivityType(activityInput, newAdventure);
     activityInput = "";
   }
+
+  function upload(e: CustomEvent<any>) {
+    let key = e.detail;
+    console.log("EE" + key);
+    newAdventure.imageUrl = key;
+  }
 </script>
 
+{#if isImageModalOpen}
+  <ImageModal on:submit={upload} on:close={() => (isImageModalOpen = false)} />
+{/if}
+
 <dialog id="my_modal_1" class="modal">
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -176,12 +189,14 @@
         </div>
         <div>
           <label for="rating">Image URL</label>
-          <input
-            type="url"
-            id="iamgeUrl"
-            bind:value={newAdventure.imageUrl}
-            class="input input-bordered w-full max-w-xs"
-          />
+          <button
+            type="button"
+            class="btn btn-secondary"
+            on:click={() => {
+              isImageModalOpen = true;
+            }}
+          >
+          </button>
         </div>
 
         <button
diff --git a/src/lib/components/ImageModal.svelte b/src/lib/components/ImageModal.svelte
new file mode 100644
index 00000000..5d7f7cc0
--- /dev/null
+++ b/src/lib/components/ImageModal.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { onMount } from "svelte";
+  let modal: HTMLDialogElement;
+
+  let viewType: string = "upload";
+
+  let imageUrl: string = "";
+
+  let imageFile: File | null = null;
+
+  let key: string;
+
+  const dispatch = createEventDispatcher();
+
+  onMount(() => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  });
+
+  function close() {
+    dispatch("close");
+  }
+
+  async function submit() {
+    try {
+      let key: string;
+      if (viewType === "url") {
+        // Get image from URL
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+
+        const uploadResponse = await fetch("/api/upload", {
+          method: "POST",
+          body: blob,
+          headers: {
+            bucket: "adventures",
+            type: "adventure",
+            "Content-Type": blob.type,
+          },
+        });
+
+        const result = await uploadResponse.json();
+        key = result.key;
+        console.log(result);
+      } else if (imageFile) {
+        // Get the image from the file input
+
+        const uploadResponse = await fetch("/api/upload", {
+          method: "POST",
+          body: imageFile,
+          headers: {
+            bucket: "adventures",
+            type: "adventure",
+            "Content-Type": imageFile.type,
+          },
+        });
+
+        const result = await uploadResponse.json();
+        key = result.key;
+        console.log(result);
+      } else {
+        console.error("No file selected for upload");
+        return;
+      }
+
+      dispatch("submit", key);
+      close();
+    } catch (error) {
+      console.error("Error during submission", error);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+
+  function setViewType(type: string) {
+    viewType = type;
+  }
+
+  function handleFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files.length > 0) {
+      imageFile = target.files[0];
+    }
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">Image Upload</h3>
+    <div class="join items-center justify-center flex">
+      <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="upload"
+        checked
+        aria-label="Upload File"
+        on:click={() => setViewType("upload")}
+      />
+      <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="upload"
+        aria-label="Url"
+        on:click={() => setViewType("url")}
+      />
+    </div>
+    {#if viewType == "url"}
+      <form method="dialog" style="width: 100%;">
+        <div>
+          <label for="rating">Image URL</label>
+          <input
+            type="text"
+            id="imageUrl"
+            bind:value={imageUrl}
+            placeholder="Enter the URL of the image"
+          />
+        </div>
+      </form>
+    {/if}
+    {#if viewType == "upload"}
+      <form method="dialog" style="width: 100%;">
+        <div>
+          <label for="rating">Image Upload</label>
+          <input
+            type="file"
+            id="imageFile"
+            on:change={handleFileChange}
+            placeholder="Upload an image file"
+          />
+        </div>
+      </form>
+    {/if}
+
+    <button class="btn btn-neutral" on:click={close}>Close</button>
+    <button class="btn btn-primary" on:click={submit}>Submit</button>
+  </div>
+</dialog>
diff --git a/src/routes/api/upload/+server.ts b/src/routes/api/upload/+server.ts
index 2c403945..bb39d0fe 100644
--- a/src/routes/api/upload/+server.ts
+++ b/src/routes/api/upload/+server.ts
@@ -64,7 +64,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
       "Content-Type": contentType,
     };
 
-    const allowedBuckets = ["backgrounds", "profile-pics"];
+    const allowedBuckets = ["backgrounds", "profile-pics", "adventures"];
 
     if (!allowedBuckets.includes(bucket)) {
       return new Response(JSON.stringify({ error: "Invalid bucket name" }), {

From 0637ab2df60986b5c056727f7ab2cf0553dee851 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 14 Jun 2024 16:25:45 +0000
Subject: [PATCH 2/2] feat: Add image upload functionality to adventure
 creation and editing

---
 src/lib/components/CreateNewAdventure.svelte | 21 ++++---------
 src/lib/components/EditModal.svelte          | 33 +++++++++++++++-----
 src/lib/components/ImageModal.svelte         | 20 ++++++++++--
 3 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 74401025..60a01f20 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -83,16 +83,6 @@
     }
   }
 
-  async function searchImage() {
-    try {
-      const imageUrl = await getImage(newAdventure.name);
-      newAdventure.imageUrl = imageUrl;
-    } catch (error) {
-      console.error(error);
-      // Handle the error
-    }
-  }
-
   let activityInput: string = "";
 
   function activitySetup() {
@@ -108,7 +98,11 @@
 </script>
 
 {#if isImageModalOpen}
-  <ImageModal on:submit={upload} on:close={() => (isImageModalOpen = false)} />
+  <ImageModal
+    name={newAdventure.name}
+    on:submit={upload}
+    on:close={() => (isImageModalOpen = false)}
+  />
 {/if}
 
 <dialog id="my_modal_1" class="modal">
@@ -188,7 +182,6 @@
           />
         </div>
         <div>
-          <label for="rating">Image URL</label>
           <button
             type="button"
             class="btn btn-secondary"
@@ -196,6 +189,7 @@
               isImageModalOpen = true;
             }}
           >
+            Upload Image
           </button>
         </div>
 
@@ -211,9 +205,6 @@
         <button class="btn btn-secondary" on:click={generate}
           >Generate Description</button
         >
-        <button class="btn btn-secondary" on:click={searchImage}
-          >Search for Image</button
-        >
       </div>
     </div>
   </div>
diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 95c55ba5..01b01018 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -6,6 +6,7 @@
   import { onMount } from "svelte";
   import { addActivityType, generateDescription, getImage } from "$lib";
   import AutoComplete from "./AutoComplete.svelte";
+  import ImageModal from "./ImageModal.svelte";
   let modal: HTMLDialogElement;
 
   console.log(adventureToEdit.id);
@@ -87,8 +88,24 @@
       // Handle the error
     }
   }
+
+  let isImageModalOpen: boolean = false;
+
+  function upload(e: CustomEvent<any>) {
+    let key = e.detail;
+    console.log("EE" + key);
+    adventureToEdit.imageUrl = key;
+  }
 </script>
 
+{#if isImageModalOpen}
+  <ImageModal
+    name={adventureToEdit.name}
+    on:submit={upload}
+    on:close={() => (isImageModalOpen = false)}
+  />
+{/if}
+
 <dialog id="my_modal_1" class="modal">
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -163,13 +180,15 @@
           />
         </div>
         <div>
-          <label for="rating">Image URL</label>
-          <input
-            type="url"
-            id="imageUrl"
-            bind:value={adventureToEdit.imageUrl}
-            class="input input-bordered w-full max-w-xs"
-          />
+          <button
+            type="button"
+            class="btn btn-secondary"
+            on:click={() => {
+              isImageModalOpen = true;
+            }}
+          >
+            Upload Image
+          </button>
         </div>
         <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button
         >
diff --git a/src/lib/components/ImageModal.svelte b/src/lib/components/ImageModal.svelte
index 5d7f7cc0..35bccca6 100644
--- a/src/lib/components/ImageModal.svelte
+++ b/src/lib/components/ImageModal.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { getImage } from "$lib";
   import { createEventDispatcher } from "svelte";
   import { onMount } from "svelte";
   let modal: HTMLDialogElement;
+  export let name: string;
 
   let viewType: string = "upload";
 
@@ -89,6 +91,15 @@
       imageFile = target.files[0];
     }
   }
+
+  async function searchImage() {
+    try {
+      imageUrl = await getImage(name);
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -96,7 +107,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
     <h3 class="font-bold text-lg">Image Upload</h3>
-    <div class="join items-center justify-center flex">
+    <div class="join items-center justify-center flex mb-8">
       <input
         class="join-item btn btn-neutral"
         type="radio"
@@ -114,7 +125,10 @@
       />
     </div>
     {#if viewType == "url"}
-      <form method="dialog" style="width: 100%;">
+      <button class="btn btn-secondary" on:click={searchImage}
+        >Search for Image</button
+      >
+      <form method="dialog" style="width: 100%;" class="mb-4">
         <div>
           <label for="rating">Image URL</label>
           <input
@@ -127,7 +141,7 @@
       </form>
     {/if}
     {#if viewType == "upload"}
-      <form method="dialog" style="width: 100%;">
+      <form method="dialog" style="width: 100%;" class="mb-4">
         <div>
           <label for="rating">Image Upload</label>
           <input