index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />

<header
  id="view-source"
  style="position: absolute; top: 0; right: 0; padding: 16px">
  <a href="https://github.com/pastagang/spag" target="_blank">View source</a>
</header>

<header>
  <h1>Upload</h1>

  <p>
    All uploaded things are available at
    <code>https://spag.cc/name</code><br />

    Replace <code>name</code> with the name you gave the image.
  </p>

  <ul>
    <li>Uploads may be deleted at any time.</li>
    <li>
      Please delete your uploads after you've finished with them to make space
      for others.
    </li>
    <li>You can catch your singing into the computer with <a target="_blank" href="https://webaudiodemos.appspot.com/AudioRecorder/index.html">a browser based audio recorder</a>.</li>
  </ul>
</header>

<style>
  body {
    max-width: 100%;
  }

  code {
    white-space: nowrap;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    align-items: flex-start;
  }

  label,
  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--shade-4);
    border: 2px solid black;
  }

  label {
    padding: 16px;
  }

  section {
    padding: 16px;
    padding-top: 0px;
  }

  article {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
</style>

<form id="form">
  <label for="file">
    <div
      style="
        border: 1px solid rgb(159, 174, 238);
        width: 100%;
        background-color: rgb(55, 67, 98);
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
      ">
      <img
        style="
          display: none;
          border: 1px solid rgb(159, 174, 238);
          width: 100%;
          background-color: rgb(55, 67, 98);
          height: 100%;
          object-fit: contain;
        "
        alt="Preview of file upload"
        id="preview" />
      <audio controls style="display: none" id="preview-audio"></audio>
    </div>
    <input type="file" id="file" accept="audio/*, image/*" required />
  </label>
  <label for="name">
    Unique upload name
    <input
      type="text"
      id="name"
      autocomplete="off"
      spellcheck="false"
      required />
  </label>
  <button class="primary" id="upload-button">Upload</button>
</form>

<br />

<h2>Uploaded files</h2>
<button id="refresh-button">Refresh</button>
<br />
<br />

<article id="uploads"></article>

<script type="module">
  const form = document.getElementById("form");
  const nameInput = document.getElementById("name");
  const fileInput = document.getElementById("file");
  const previewImage = document.getElementById("preview");
  const previewAudio = document.getElementById("preview-audio");
  const uploadButton = document.getElementById("upload-button");
  const refreshButton = document.getElementById("refresh-button");

  fileInput.addEventListener("change", () => {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result;
      previewImage.src = dataUrl;
      previewAudio.src = dataUrl;
    };
    reader.readAsDataURL(file);
  });

  previewAudio.addEventListener("canplaythrough", () => {
    previewAudio.style.display = "block";
  });

  previewImage.addEventListener("load", () => {
    previewImage.style.display = "block";
  });

  previewAudio.addEventListener("error", () => {
    previewAudio.style.display = "none";
  });

  previewImage.addEventListener("error", () => {
    previewImage.style.display = "none";
  });

  form.addEventListener(
    "submit",
    async (event) => {
      event.preventDefault();
      const name = nameInput.value;
      const dataUrl = previewImage.src;
      const body = JSON.stringify({ name, dataUrl });
      uploadButton.disabled = true;
      uploadButton.textContent = "Uploading...";
      const response = await fetch("https://todepond-spagUpload.web.val.run", {
        method: "POST",
        body,
      });
      const data = await response.json();
      if (data.ok) {
        nameInput.value = "";
        fileInput.value = "";
      } else {
        alert(data.error);
      }
      uploadButton.textContent = "Upload";
      uploadButton.disabled = false;
      pullUploads();
    },
    { passive: false }
  );

  async function fetchUploads() {
    const response = await fetch("https://todepond-spagList.web.val.run");
    const data = await response.json();
    return data.rows;
  }

  async function pullUploads() {
    refreshButton.disabled = true;
    refreshButton.textContent = "Refreshing...";
    const uploads = await fetchUploads();
    renderUploads(uploads);
    refreshButton.textContent = "Refresh";
    refreshButton.disabled = false;
  }

  const uploadsElement = document.getElementById("uploads");
  function renderUploads(_uploads) {
    uploadsElement.innerHTML = "";

    const uploads = _uploads.reverse();

    for (const upload of uploads) {
      const uploadElement = document.createElement("section");
      uploadElement.className = "upload";
      // uploadElement.style.maxWidth = "400px";

      const nameElement = document.createElement("p");
      nameElement.textContent = upload.name;

      const previewContainer = document.createElement("div");
      previewContainer.style.display = "flex";
      previewContainer.style.justifyContent = "center";
      previewContainer.style.alignItems = "center";
      previewContainer.style.height = "300px";
      previewContainer.style.backgroundColor = "rgb(55, 67, 98)";
      previewContainer.style.border = "1px solid rgb(159, 174, 238)";

      try {
        fetch(`https://spag.cc/${upload.name}`).then(async (response) => {
          if (!response.ok) {
            const textElement = document.createElement("p");
            console.log(response);
            textElement.textContent = `Error downloading file.`;
            previewContainer.appendChild(textElement);
            return;
          }

          const contentType = response.headers.get("content-type");
          if (contentType.startsWith("image")) {
            const imageElement = document.createElement("img");
            imageElement.loading = "lazy";
            imageElement.style.width = "100%";
            imageElement.style.objectFit = "contain";
            imageElement.style.height = "300px";
            // src the response
            const blob = await response.blob();
            imageElement.src = URL.createObjectURL(blob);
            imageElement.onerror = () => {
              imageElement.remove();
            };
            previewContainer.appendChild(imageElement);
          } else if (contentType.startsWith("audio")) {
            const audioElement = document.createElement("audio");
            audioElement.controls = true;
            audioElement.style.width = "100%";
            // src the response
            const blob = await response.blob();
            audioElement.src = URL.createObjectURL(blob);
            audioElement.onerror = () => {
              audioElement.remove();
            };
            previewContainer.appendChild(audioElement);
          } else if (contentType.startsWith("video")) {
            const videoElement = document.createElement("video");
            videoElement.controls = true;
            videoElement.style.width = "100%";
            // src the response
            const blob = await response.blob();
            videoElement.src = URL.createObjectURL(blob);
            videoElement.onerror = () => {
              videoElement.remove();
            };
            previewContainer.appendChild(videoElement);
          } else {
            const textElement = document.createElement("p");
            textElement.textContent = `Unsupported content type: ${contentType}`;
            previewContainer.appendChild(textElement);
          }
        });
      } catch (error) {
        const textElement = document.createElement("p");
        textElement.textContent = `Error downloading file.`;
        previewContainer.appendChild(textElement);
      }

      // const imageElement = document.createElement("img");
      // imageElement.loading = "lazy";
      // imageElement.src = `https://tode.party?${upload.name}`;
      // imageElement.style.width = "100%";
      // imageElement.style.objectFit = "contain";
      // imageElement.style.border = "1px solid rgb(159, 174, 238)";
      // imageElement.style.backgroundColor = "rgb(55, 67, 98)";
      // imageElement.style.height = "300px";
      // imageElement.onerror = () => {
      //   imageElement.remove();
      // };

      // const audioElement = document.createElement("audio");
      // audioElement.controls = true;
      // audioElement.src = `https://tode.party?${upload.name}`;
      // audioElement.style.width = "100%";
      // audioElement.onerror = () => {
      //   audioElement.remove();
      // };

      const deleteButton = document.createElement("button");
      deleteButton.textContent = "Delete";
      deleteButton.className = "danger";
      deleteButton.addEventListener("click", async () => {
        deleteButton.disabled = true;
        deleteButton.textContent = "Deleting...";
        const response = await fetch(
          `https://todepond-spagDelete.web.val.run`,
          {
            method: "POST",
            body: JSON.stringify({ name: upload.name }),
          }
        );
        const data = await response.json();
        if (!data.ok) {
          alert(data.error);
        }
        deleteButton.textContent = "Delete";
        deleteButton.disabled = false;
        pullUploads();
      });

      uploadsElement.appendChild(uploadElement);
      uploadElement.appendChild(nameElement);
      uploadElement.appendChild(previewContainer);
      uploadElement.appendChild(deleteButton);
    }
  }

  refreshButton.addEventListener("click", pullUploads);

  pullUploads();
</script>