<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title>ファイル一覧</title>

  <script>

    async function fetchFiles() {

      const res = await fetch("/list?token=mypassword");

      const files = await res.json();

      const list = document.getElementById("file-list");

      files.forEach(file => {

        const li = document.createElement("li");

        li.innerHTML = `

          <a href="/download/${file}?token=mypassword" download>${file}</a>

          <button onclick="deleteFile('${file}')">削除</button>

        `;

        list.appendChild(li);

      });

    }

    async function deleteFile(name) {

      await fetch(`/delete/${name}?token=mypassword`, { method: "DELETE" });

      location.reload();

    }

    window.onload = fetchFiles;

  </script>

</head>

<body>

  <h1>アップロード済みファイル</h1>

  <ul id="file-list"></ul>

</body>

</html>