<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .file-upload {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
      }
      .file-upload .file-upload__area {
        width: 600px;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        border: 2px dashed #ccc;
        margin-top: 40px;
      }

      .file-preview-container {
        display: flex;
        justify-content: center;
        margin: 10px auto 20px;
      }

      .file-preview {
        display: grid;
        max-width: 1000px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px;
      }

      .file-preview .file-preview__el {
        border: 2px dashed rgb(112, 102, 245);
        padding: 5px;
        max-height: 200px;
      }

      .file-preview .file-preview__el .file-preview__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
    <title>File upload in Golang</title>
  </head>
  <body>
    <div class="file-preview-container">
      <div class="file-preview" id="file-preview"></div>
    </div>
    <div class="file-upload">
      <div class="file-upload__area">
        <h3>Single File Upload</h3>
        <input type="file" name="" id="single_file_upload" max="1" />
      </div>
    </div>
    <div class="file-upload">
      <div class="file-upload__area">
        <h3>Multiple File Upload</h3>
        <input type="file" name="" id="mulitple_files_upload" multiple />
      </div>
    </div>
    <script>
      const SERVER_ENDPOINT = "http://localhost:8000";
      const IMAGE_PREVIEW = document.getElementById("file-preview");
      //   Upload Single Image
      document
        .getElementById("single_file_upload")
        .addEventListener("change", async (event) => {
          try {
            let formData = new FormData();
            formData.append("image", event.target.files[0]);
            const data = await fetch(`${SERVER_ENDPOINT}/upload/single`, {
              body: formData,
              method: "POST",
            }).then((res) => res.json());

            const imgHolder = document.createElement("div");
            const imgElement = document.createElement("img");
            imgHolder.classList.add("file-preview__el");
            imgElement.classList.add("file-preview__img");
            imgElement.src = data.filepath;
            imgHolder.appendChild(imgElement);
            IMAGE_PREVIEW.appendChild(imgHolder);
          } catch (error) {
            alert(error.message);
          }
        });

      // Mulitple File Upload
      document
        .getElementById("mulitple_files_upload")
        .addEventListener("change", async (event) => {
          try {
            let formData = new FormData();
            for (let key in event.target.files) {
              formData.append("images", event.target.files[key]);
            }

            const data = await fetch(`${SERVER_ENDPOINT}/upload/multiple`, {
              body: formData,
              method: "POST",
            }).then((res) => res.json());

            data.filepaths.forEach((filepath) => {
              const imgHolder = document.createElement("div");
              const imgElement = document.createElement("img");
              imgHolder.classList.add("file-preview__el");
              imgElement.classList.add("file-preview__img");
              imgElement.src = filepath;
              imgHolder.appendChild(imgElement);
              IMAGE_PREVIEW.appendChild(imgHolder);
            });
          } catch (error) {
            alert(error.message);
          }
        });
    </script>
  </body>
</html>
