First Commit

2024-04-03 18:18:32 -07:00
commit 6bcac29211
5 changed files with 216 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE >
+<html>
+    <head>
+        <title>Image Uploader</title>
+        <style>
+            body {
+                margin-top: 50px;
+                margin-bottom: 50px;
+                text-align: center;
+            }
+
+            form {
+                display: flex;
+                gap: 20px;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            #image-container {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+
+            img {
+                width: 200px;
+                height: 200px;
+                object-fit: cover;
+                margin: 10px;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Image Uploader</h1>
+        <form action="/upload" method="post" enctype="multipart/form-data">
+            <img id="filePreview" src="https://via.placeholder.com/200" />
+            <input id="fileInput" type="file" name="image" accept="image/*" />
+            <input type="submit" value="Upload" />
+        </form>
+        <div id="image-container">
+            <!-- Images will be displayed here -->
+        </div>
+    </body>
+    <script>
+        // Preview Image Logic
+        const imageInput = document.getElementById("fileInput");
+        const imagePreview = document.getElementById("filePreview");
+
+        imageInput.addEventListener("change", function () {
+            const file = this.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function () {
+                    imagePreview.src = reader.result;
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    </script>
+    <script>
+        // Fetch Uploaded Images Logic
+        fetch("/images")
+            .then((response) => response.json())
+            .then(({ images }) => {
+                console.log(images);
+                const imageContainer =
+                    document.getElementById("image-container");
+
+                images.forEach((image) => {
+                    let extension = image.type.split("/")[1];
+                    const img = document.createElement("img");
+                    img.src = `/image/${image.id}.${extension}`;
+                    imageContainer.appendChild(img);
+                });
+            });
+    </script>
+</html>