diff --git a/public/script.js b/public/script.js
index 8b89194..4c4c26e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,4 +1,6 @@
const webroot = document.querySelector("meta[name='webroot']").content;
+const urlInput = document.querySelector("#url-input");
+const urlSubmit = document.querySelector("#url-submit");
const fileInput = document.querySelector('input[type="file"]');
const dropZone = document.getElementById("dropzone");
const convertButton = document.querySelector("input[type='submit']");
@@ -33,6 +35,35 @@ dropZone.addEventListener("drop", (e) => {
}
});
+urlSubmit.addEventListener("click", (e) => {
+ e.preventDefault();
+ handleUrl(urlInput.value);
+});
+
+function handleUrl(url) {
+ fetch(`${webroot}/url`, {
+ method: "POST",
+ body: JSON.stringify({ url }),
+ headers: { "Content-Type": "application/json" },
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ const fileList = document.querySelector("#file-list");
+
+ const row = document.createElement("tr");
+ row.innerHTML = `
+
${res.filename} |
+ |
+ ${(res.fileSizeBytes / 1024).toFixed(2)} kB |
+ Remove |
+ `;
+
+ fileList.appendChild(row);
+ fileNames.push(res.filename);
+ })
+ .catch(console.error);
+}
+
// Extracted handleFile function for reusability in drag-and-drop and file input
function handleFile(file) {
const fileList = document.querySelector("#file-list");
diff --git a/src/index.tsx b/src/index.tsx
index c163e74..c647b98 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -16,6 +16,7 @@ import { listConverters } from "./pages/listConverters";
import { results } from "./pages/results";
import { root } from "./pages/root";
import { upload } from "./pages/upload";
+import { url } from "./pages/url";
import { user } from "./pages/user";
import { healthcheck } from "./pages/healthcheck";
@@ -41,6 +42,7 @@ const app = new Elysia({
.use(user)
.use(root)
.use(upload)
+ .use(url)
.use(history)
.use(convert)
.use(download)
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index bf1a73c..9930664 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -152,6 +152,20 @@ export const root = new Elysia().use(userService).get(
class="absolute inset-0 size-full cursor-pointer opacity-0"
/>
+