added static upload webpage. not yet connected to main.py

2026-02-27 21:10:41 +01:00
parent 45397c069c
commit 93cb11d7bb
3 changed files with 71 additions and 1 deletions
--- a/static/upload.html
+++ b/static/upload.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Datei Upload</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; }
+    .card { border: 1px solid #ddd; border-radius: 12px; padding: 16px; }
+    button { padding: 10px 14px; border-radius: 10px; border: 1px solid #ccc; cursor: pointer; }
+    pre { background: #f6f6f6; padding: 12px; border-radius: 10px; overflow: auto; }
+  </style>
+</head>
+<body>
+  <h1>Datei Upload</h1>
+
+  <div class="card">
+    <input id="fileInput" type="file" />
+    <button id="uploadBtn">Hochladen</button>
+    <p id="status"></p>
+    <pre id="result"></pre>
+  </div>
+
+  <script>
+    const API_URL = "http://127.0.0.1:8000/upload";
+
+    const fileInput = document.getElementById("fileInput");
+    const uploadBtn = document.getElementById("uploadBtn");
+    const statusEl = document.getElementById("status");
+    const resultEl = document.getElementById("result");
+
+    uploadBtn.addEventListener("click", async () => {
+      resultEl.textContent = "";
+      statusEl.textContent = "";
+
+      const file = fileInput.files[0];
+      if (!file) {
+        statusEl.textContent = "Bitte zuerst eine Datei auswählen.";
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("file", file); // Name muss zu FastAPI-Parameter passen: file
+
+      statusEl.textContent = "Upload läuft...";
+
+      try {
+        const res = await fetch(API_URL, { method: "POST", body: formData });
+        const data = await res.json();
+
+        if (!res.ok) {
+          statusEl.textContent = "Fehler beim Upload.";
+          resultEl.textContent = JSON.stringify(data, null, 2);
+          return;
+        }
+
+        statusEl.textContent = "Upload erfolgreich ✅";
+        resultEl.textContent = JSON.stringify(data, null, 2);
+      } catch (err) {
+        statusEl.textContent = "Netzwerkfehler (läuft FastAPI? CORS?)";
+        resultEl.textContent = String(err);
+      }
+    });
+  </script>
+</body>
+</html>
+