<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <title>Wedding Upload Test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>

      body {

        font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

        padding: 24px;

        max-width: 720px;

        margin: auto;

      }

      h1 { margin-bottom: 8px; }

      h2 { margin-top: 28px; }

      button {

        padding: 8px 14px;

        margin-left: 8px;

        cursor: pointer;

      }

      pre {

        background: #f4f4f5;

        padding: 12px;

        border-radius: 6px;

        white-space: pre-wrap;

        margin-top: 10px;

      }

      small { color: #555; }

    </style>

  </head>


  <body>

    <h1>Wedding Upload Test</h1>

    <small>This page uploads files to your Cloudflare Worker (no page reloads).</small>


    <h2>Upload to Bar (photos only)</h2>

    <input id="barFile" type="file" accept="image/*" />

    <button onclick="uploadBar()">Upload Photo</button>

    <pre id="barResult"></pre>


    <h2>Upload to Album (photos + videos)</h2>

    <input id="albumFile" type="file" accept="image/*,video/*" />

    <button onclick="uploadAlbum()">Upload Media</button>

    <pre id="albumResult"></pre>


    <script>

      // 🔴 IMPORTANT: use the EXACT workers.dev URL from Cloudflare "Visit"

      const BASE_URL = "https://wedding-media-worker.alliewtouchstone.workers.dev/";


      async function upload(endpoint, fileInputId, outputId) {

        const fileInput = document.getElementById(fileInputId);

        const output = document.getElementById(outputId);

        const file = fileInput.files[0];


        if (!file) {

          output.textContent = "Please choose a file first.";

          return;

        }


        const formData = new FormData();

        formData.append("file", file);


        output.textContent = "Uploading…";


        try {

          const response = await fetch(`${BASE_URL}${endpoint}`, {

            method: "POST",

            body: formData

          });


          const text = await response.text();

          output.textContent = `HTTP ${response.status}\n${text}`;

        } catch (err) {

          output.textContent = `Error:\n${err}`;

        }

      }


      function uploadBar() {

        upload("/upload/bar", "barFile", "barResult");

      }


      function uploadAlbum() {

        upload("/upload/album", "albumFile", "albumResult");

      }

    </script>

  </body>

</html>