VYBECODEDDDDDDDDD

src/public/app.js

@@ -0,0 +1,384 @@
+"use strict";
+
+const $ = (id) => document.getElementById(id);
+
+const STORAGE_KEY = "filehost.uploads";
+
+const dropzone = $("dropzone");
+const fileInput = $("fileInput");
+const progress = $("progress");
+const progressBar = $("progressBar");
+const progressPct = $("progressPct");
+const progressName = $("progressName");
+const result = $("result");
+const resultUrl = $("resultUrl");
+const resultName = $("resultName");
+const resultSize = $("resultSize");
+const copyBtn = $("copyBtn");
+const deleteBtn = $("deleteBtn");
+const againBtn = $("againBtn");
+const notice = $("notice");
+const fileListWrap = $("fileListWrap");
+const fileList = $("fileList");
+const clearListBtn = $("clearListBtn");
+
+let current = null;
+let uploading = false;
+
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let i = -1;
+  do {
+    value /= 1024;
+    i += 1;
+  } while (value >= 1024 && i < units.length - 1);
+  return `${value.toFixed(value >= 100 ? 0 : 1)} ${units[i]}`;
+}
+
+function showNotice(message, kind) {
+  notice.textContent = message;
+  notice.className = kind;
+}
+
+function clearNotice() {
+  notice.className = "hidden";
+  notice.textContent = "";
+}
+
+function setProgress(loaded, total) {
+  const pct = total > 0 ? Math.round((loaded / total) * 100) : 0;
+  progressBar.style.width = `${pct}%`;
+  progressPct.textContent = `${pct}%`;
+}
+
+function reset() {
+  uploading = false;
+  current = null;
+  result.classList.add("hidden");
+  progress.classList.add("hidden");
+  progressBar.style.width = "0%";
+  progressPct.textContent = "0%";
+  fileInput.value = "";
+  clearNotice();
+}
+
+// ---- client-side upload history (localStorage) ----
+
+function loadUploads() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveUploads(list) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+  } catch {
+    /* storage unavailable (e.g. private mode) — ignore */
+  }
+}
+
+function addUpload(record) {
+  const list = loadUploads();
+  const idx = list.findIndex((item) => item.id === record.id);
+  if (idx !== -1) list[idx] = record;
+  else list.unshift(record);
+  saveUploads(list);
+  renderList();
+}
+
+function removeUpload(id) {
+  saveUploads(loadUploads().filter((item) => item.id !== id));
+  renderList();
+}
+
+function downloadUrl(item) {
+  return new URL(item.url, window.location.origin).href;
+}
+
+async function copyText(text) {
+  const fallback = () => {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand("copy");
+    } catch {
+      ok = false;
+    }
+    ta.remove();
+    return ok;
+  };
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      return fallback();
+    }
+  }
+  return fallback();
+}
+
+function setCopyFeedback(btn, label) {
+  const original = btn.textContent;
+  btn.textContent = label;
+  setTimeout(() => {
+    btn.textContent = original;
+  }, 1500);
+}
+
+function renderList() {
+  const list = loadUploads();
+  if (list.length === 0) {
+    fileListWrap.classList.add("hidden");
+    fileList.innerHTML = "";
+    return;
+  }
+  fileListWrap.classList.remove("hidden");
+  fileList.innerHTML = "";
+
+  for (const item of list) {
+    const li = document.createElement("li");
+    li.className = "file-item";
+
+    const meta = document.createElement("div");
+    meta.className = "file-item-meta";
+
+    const name = document.createElement("span");
+    name.className = "file-item-name";
+    name.textContent = item.originalName;
+    name.title = item.originalName;
+
+    const sub = document.createElement("span");
+    sub.className = "file-item-sub";
+    let subText = formatBytes(item.size || 0);
+    if (item.createdAt) {
+      try {
+        subText += ` \u00b7 ${new Date(item.createdAt).toLocaleString()}`;
+      } catch {
+        /* ignore date formatting */
+      }
+    }
+    sub.textContent = subText;
+
+    meta.appendChild(name);
+    meta.appendChild(sub);
+
+    const actions = document.createElement("div");
+    actions.className = "file-item-actions";
+
+    const dl = document.createElement("a");
+    dl.className = "btn-link";
+    dl.href = downloadUrl(item);
+    dl.textContent = "Download";
+    dl.setAttribute("download", "");
+    dl.title = "Open download link";
+
+    const copy = document.createElement("button");
+    copy.type = "button";
+    copy.textContent = "Copy";
+    copy.addEventListener("click", async () => {
+      const ok = await copyText(downloadUrl(item));
+      setCopyFeedback(copy, ok ? "Copied" : "Copy failed");
+    });
+
+    const del = document.createElement("button");
+    del.type = "button";
+    del.className = "danger";
+    del.textContent = "Delete";
+    del.addEventListener("click", () => deleteFile(item, () => removeUpload(item.id)));
+
+    actions.appendChild(dl);
+    actions.appendChild(copy);
+    actions.appendChild(del);
+
+    li.appendChild(meta);
+    li.appendChild(actions);
+    fileList.appendChild(li);
+  }
+}
+
+async function deleteFile(item, onSuccess) {
+  const ok = window.confirm(`Delete "${item.originalName}" permanently? This cannot be undone.`);
+  if (!ok) return;
+  try {
+    const res = await fetch(`/api/files/${item.id}`, {
+      method: "DELETE",
+      headers: { "X-Delete-Key": item.key },
+    });
+    if (res.ok) {
+      onSuccess();
+      showNotice(`"${item.originalName}" was deleted.`, "info");
+    } else {
+      let message = "Deletion failed.";
+      try {
+        const data = await res.json();
+        if (data && data.error) message = data.error;
+      } catch {
+        /* keep fallback message */
+      }
+      showNotice(message, "error");
+    }
+  } catch {
+    showNotice("Deletion failed: network error.", "error");
+  }
+}
+
+// ---- upload flow ----
+
+function showResult(data) {
+  progress.classList.add("hidden");
+  result.classList.remove("hidden");
+  resultName.textContent = data.originalName;
+  resultSize.textContent = formatBytes(data.size);
+  resultUrl.value = downloadUrl(data);
+  current = data;
+  addUpload({
+    id: data.id,
+    key: data.key,
+    url: data.url,
+    originalName: data.originalName,
+    size: data.size,
+    createdAt: new Date().toISOString(),
+  });
+}
+
+function startUpload(file) {
+  if (uploading) return;
+  clearNotice();
+  progress.classList.remove("hidden");
+  progressName.textContent = file.name;
+  setProgress(0, file.size);
+  uploading = true;
+
+  const xhr = new XMLHttpRequest();
+  const form = new FormData();
+  form.append("file", file);
+
+  xhr.upload.addEventListener("progress", (e) => {
+    if (e.lengthComputable) setProgress(e.loaded, e.total);
+  });
+
+  xhr.addEventListener("load", () => {
+    uploading = false;
+    if (xhr.status >= 200 && xhr.status < 300) {
+      try {
+        showResult(JSON.parse(xhr.responseText));
+      } catch {
+        progress.classList.add("hidden");
+        showNotice("Invalid server response.", "error");
+      }
+      return;
+    }
+    progress.classList.add("hidden");
+    let message = `Upload failed (HTTP ${xhr.status})`;
+    try {
+      const data = JSON.parse(xhr.responseText);
+      if (data && data.error) message = data.error;
+    } catch {
+      /* keep fallback message */
+    }
+    showNotice(message, "error");
+  });
+
+  xhr.addEventListener("error", () => {
+    uploading = false;
+    progress.classList.add("hidden");
+    showNotice("Network error during upload.", "error");
+  });
+
+  xhr.addEventListener("abort", () => {
+    uploading = false;
+    progress.classList.add("hidden");
+  });
+
+  xhr.open("POST", "/api/upload");
+  xhr.send(form);
+}
+
+function handleFile(file) {
+  if (!file) return;
+  if (file.size === 0) {
+    showNotice("Empty files are not supported.", "error");
+    return;
+  }
+  startUpload(file);
+}
+
+dropzone.addEventListener("click", () => {
+  if (!uploading) fileInput.click();
+});
+
+dropzone.addEventListener("keydown", (e) => {
+  if ((e.key === "Enter" || e.key === " ") && !uploading) {
+    e.preventDefault();
+    fileInput.click();
+  }
+});
+
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files ? fileInput.files[0] : null;
+  handleFile(file);
+});
+
+let dragDepth = 0;
+document.addEventListener("dragenter", (e) => {
+  e.preventDefault();
+  if (!uploading) {
+    dragDepth += 1;
+    dropzone.classList.add("drag");
+  }
+});
+document.addEventListener("dragover", (e) => e.preventDefault());
+document.addEventListener("dragleave", (e) => {
+  e.preventDefault();
+  dragDepth = Math.max(0, dragDepth - 1);
+  if (dragDepth === 0) dropzone.classList.remove("drag");
+});
+document.addEventListener("drop", (e) => {
+  e.preventDefault();
+  dragDepth = 0;
+  dropzone.classList.remove("drag");
+  if (uploading) return;
+  const file = e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files[0] : null;
+  if (file) handleFile(file);
+});
+
+copyBtn.addEventListener("click", async () => {
+  const ok = await copyText(resultUrl.value);
+  setCopyFeedback(copyBtn, ok ? "Copied" : "Copy failed");
+});
+
+deleteBtn.addEventListener("click", () => {
+  if (!current) return;
+  deleteFile(current, () => {
+    removeUpload(current.id);
+    reset();
+  });
+});
+
+againBtn.addEventListener("click", reset);
+
+clearListBtn.addEventListener("click", () => {
+  if (loadUploads().length === 0) return;
+  const ok = window.confirm(
+    "Clear this list? This only removes the entries from THIS browser. The uploaded files remain on the server.",
+  );
+  if (!ok) return;
+  saveUploads([]);
+  renderList();
+  showNotice("List cleared. Files on the server were not touched.", "info");
+});
+
+renderList();

src/public/index.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="referrer" content="no-referrer" />
+    <link rel="icon" href="data:," />
+    <title>File drop</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <main class="card">
+      <h1>File drop</h1>
+      <p class="tagline">Drop a file to get a private download link. Files are kept forever.</p>
+
+      <div id="dropzone" class="dropzone" role="button" tabindex="0" aria-label="Upload a file">
+        <input type="file" id="fileInput" hidden />
+        <p class="dz-main">Drag &amp; drop a file here</p>
+        <p class="dz-sub">or click to choose</p>
+      </div>
+
+      <div id="progress" class="progress hidden">
+        <div class="progress-label">
+          <span id="progressName"></span>
+          <span id="progressPct">0%</span>
+        </div>
+        <div class="progress-track">
+          <div id="progressBar" class="progress-bar"></div>
+        </div>
+      </div>
+
+      <div id="result" class="result hidden">
+        <div class="result-meta">
+          <strong id="resultName"></strong>
+          <span id="resultSize"></span>
+        </div>
+        <div class="url-row">
+          <input id="resultUrl" type="text" readonly aria-label="Download URL" />
+          <button id="copyBtn" type="button">Copy</button>
+        </div>
+        <div class="result-actions">
+          <button id="deleteBtn" type="button" class="danger">Delete file</button>
+          <button id="againBtn" type="button" class="ghost">Upload another</button>
+        </div>
+      </div>
+
+      <div id="notice" class="hidden"></div>
+
+      <section id="fileListWrap" class="files hidden" aria-label="Your uploaded files">
+        <div class="files-head">
+          <h2>Your files</h2>
+          <button id="clearListBtn" type="button" class="ghost">Clear list</button>
+        </div>
+        <p class="files-note">
+          Stored locally in this browser only. Other visitors cannot see them.
+        </p>
+        <ul id="fileList"></ul>
+      </section>
+    </main>
+    <script src="/app.js"></script>
+  </body>
+</html>

src/public/style.css

@@ -0,0 +1,325 @@
+:root {
+  --bg: #0f1115;
+  --card: #171a21;
+  --border: #2a2f3a;
+  --text: #e6e8ee;
+  --muted: #9aa3b2;
+  --accent: #4f8cff;
+  --accent-hover: #3a74e0;
+  --danger: #e05252;
+  --ok: #46b076;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.card {
+  width: 100%;
+  max-width: 560px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 28px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+}
+
+h1 {
+  margin: 0 0 4px;
+  font-size: 24px;
+}
+
+.tagline {
+  margin: 0 0 20px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.dropzone {
+  border: 2px dashed var(--border);
+  border-radius: 12px;
+  padding: 40px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  outline: none;
+}
+
+.dropzone:hover,
+.dropzone.drag,
+.dropzone:focus-visible {
+  border-color: var(--accent);
+  background: rgba(79, 140, 255, 0.06);
+}
+
+.dz-main {
+  margin: 0;
+  font-weight: 600;
+}
+
+.dz-sub {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.progress {
+  margin-top: 20px;
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+.progress-label span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progress-track {
+  height: 8px;
+  background: var(--border);
+  border-radius: 99px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  width: 0%;
+  background: var(--accent);
+  border-radius: 99px;
+  transition: width 0.15s;
+}
+
+.result {
+  margin-top: 20px;
+}
+
+.result-meta {
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: var(--muted);
+  word-break: break-all;
+}
+
+.result-meta strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.url-row {
+  display: flex;
+  gap: 8px;
+}
+
+.url-row input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+}
+
+.result-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+button {
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  padding: 9px 14px;
+  font-size: 13px;
+  background: var(--accent);
+  color: #fff;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: var(--accent-hover);
+}
+
+button.danger {
+  background: transparent;
+  border: 1px solid var(--danger);
+  color: var(--danger);
+}
+
+button.danger:hover {
+  background: rgba(224, 82, 82, 0.1);
+}
+
+button.ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+
+button.ghost:hover {
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+#notice {
+  margin-top: 16px;
+  font-size: 13px;
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+#notice.error {
+  color: var(--danger);
+  background: rgba(224, 82, 82, 0.08);
+  border: 1px solid rgba(224, 82, 82, 0.3);
+}
+
+#notice.info {
+  color: var(--ok);
+  background: rgba(70, 176, 118, 0.08);
+  border: 1px solid rgba(70, 176, 118, 0.3);
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Client-side upload list */
+.files {
+  margin-top: 24px;
+  border-top: 1px solid var(--border);
+  padding-top: 18px;
+}
+
+.files-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.files-head h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.files-note {
+  margin: 6px 0 12px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+#fileList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.file-item-meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.file-item-name {
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-item-sub {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.file-item-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.btn-link {
+  font: inherit;
+  font-size: 13px;
+  color: #fff;
+  background: var(--accent);
+  border-radius: 8px;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.btn-link:hover {
+  background: var(--accent-hover);
+}
+
+.file-item-actions button {
+  font-size: 12px;
+  padding: 8px 10px;
+}
+
+@media (max-width: 480px) {
+  .card {
+    padding: 20px;
+  }
+
+  .dropzone {
+    padding: 28px 16px;
+  }
+
+  .url-row {
+    flex-direction: column;
+  }
+
+  .file-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .file-item-actions {
+    justify-content: flex-end;
+  }
+}