68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
<!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>
|
|
|