Add image uploading to game page

src/app/create-game/page.tsx

@@ -14,6 +14,7 @@ import { useRouter } from "next/navigation";
 import { GameType } from "@/types/GameType";
 import { PlatformType, DownloadLinkType } from "@/types/DownloadLinkType";
 import { sanitize } from "@/helpers/sanitize";
+import Image from "next/image";
 
 export default function CreateGamePage() {
   const router = useRouter();
@@ -35,7 +36,7 @@ export default function CreateGamePage() {
   const [gameSlug, setGameSlug] = useState("");
   const [prevSlug, setPrevGameSlug] = useState("");
   const [game, setGame] = useState<GameType>();
-  const [thumbnailUrl, setThumbnailUrl] = useState("");
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
   const [authorSearch, setAuthorSearch] = useState("");
   const [selectedAuthors, setSelectedAuthors] = useState<Array<UserType>>([]);
   const [searchResults, setSearchResults] = useState<Array<UserType>>([]);
@@ -392,14 +393,69 @@ export default function CreateGamePage() {
         <Spacer />
 
         <div className="flex flex-col gap-4">
-          <Input
-            label="Thumbnail URL"
-            labelPlacement="outside"
-            placeholder="https://example.com/thumbnail.png"
-            value={thumbnailUrl}
-            onValueChange={setThumbnailUrl}
+          <p>Thumbnail</p>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={async (e) => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+
+              const formData = new FormData();
+              formData.append("upload", file);
+
+              try {
+                const response = await fetch(
+                  process.env.NEXT_PUBLIC_MODE === "PROD"
+                    ? "https://d2jam.com/api/v1/image"
+                    : "http://localhost:3005/api/v1/image",
+                  {
+                    method: "POST",
+                    body: formData,
+                    headers: {
+                      authorization: `Bearer ${getCookie("token")}`,
+                    },
+                    credentials: "include",
+                  }
+                );
+
+                if (response.ok) {
+                  const data = await response.json();
+                  setThumbnailUrl(data.data);
+                  toast.success(data.message);
+                } else {
+                  toast.error("Failed to upload image");
+                }
+              } catch (error) {
+                console.error(error);
+                toast.error("Error uploading image");
+              }
+            }}
           />
 
+          {thumbnailUrl && (
+            <div className="w-full">
+              <div className="bg-[#222222] h-28 w-full relative">
+                <Image
+                  src={thumbnailUrl}
+                  alt={`${title}'s thumbnail`}
+                  className="object-cover"
+                  fill
+                />
+              </div>
+              <Spacer y={3} />
+              <Button
+                color="danger"
+                size="sm"
+                onPress={() => {
+                  setThumbnailUrl(null);
+                }}
+              >
+                Remove Banner Picture
+              </Button>
+            </div>
+          )}
+
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
               {Array.isArray(downloadLinks) &&

src/components/editor/index.tsx

@@ -124,13 +124,19 @@ export default function Editor({
           const file = event.dataTransfer.files[0];
           const filesize = parseInt((file.size / 1024 / 1024).toFixed(4));
 
-          if (file.type !== "image/jpeg" && file.type !== "image/png") {
+          const allowedTypes = [
+            "image/jpeg", // JPEG images
+            "image/png", // PNG images
+            "image/gif", // GIF images
+            "image/webp", // WebP images
+            "image/svg+xml", // SVG images
+          ];
+
+          if (!allowedTypes.includes(file.type)) {
             toast.error("Invalid file format");
             return false;
           }
 
-          console.log(filesize);
-
           if (filesize > 8) {
             toast.error("Image is too big");
             return false;