media-transform/public/app.js
2026-03-23 23:08:40 +01:00

64 lines
1.8 KiB
JavaScript

const form = document.getElementById("job-form");
const filesInput = document.getElementById("files");
const promptInput = document.getElementById("prompt");
const statusBox = document.getElementById("status");
const resultBox = document.getElementById("result");
const submitButton = document.getElementById("submit-button");
const fileList = document.getElementById("file-list");
function setStatus(kind, message) {
statusBox.className = `status ${kind}`;
statusBox.textContent = message;
}
function renderFiles() {
fileList.innerHTML = "";
for (const file of filesInput.files) {
const pill = document.createElement("div");
pill.className = "file-pill";
pill.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
fileList.appendChild(pill);
}
}
filesInput.addEventListener("change", renderFiles);
form.addEventListener("submit", async (event) => {
event.preventDefault();
resultBox.hidden = true;
resultBox.innerHTML = "";
submitButton.disabled = true;
setStatus("busy", "Uploading files and processing them. This can take a little while.");
try {
const payload = new FormData();
for (const file of filesInput.files) {
payload.append("files", file);
}
payload.append("prompt", promptInput.value.trim());
const response = await fetch("/api/process", {
method: "POST",
body: payload,
});
const body = await response.json();
if (!response.ok) {
throw new Error(body.error || "The request failed.");
}
setStatus("success", "Result ready.");
resultBox.hidden = false;
resultBox.innerHTML = `
<strong>Result ready.</strong>
<a href="${body.downloadUrl}">Download ${body.resultFile}</a>
`;
} catch (error) {
setStatus("error", error.message);
} finally {
submitButton.disabled = false;
}
});