Update static/js/app.js

static/js/app.js

@@ -15,6 +15,7 @@
   const historyList = document.getElementById("historyList");
   const clearHistoryBtn = document.getElementById("clearHistory");
   const apiBtn = document.getElementById("apiBtn");
+  // NOTE: these might be null in some edge cases, so guard below
   const apiModal = document.getElementById("apiModal");
   const closeApi = document.getElementById("closeApi");
   const copyCurl = document.getElementById("copyCurl");
@@ -38,13 +39,17 @@
   }
 
   // show placeholder click to open file picker
-  placeholder.addEventListener("click", () => fileInput.click());
+  if (placeholder && fileInput) {
+    placeholder.addEventListener("click", () => fileInput.click());
+  }
 
-  fileInput.addEventListener("change", (ev) => {
-    const f = ev.target.files[0];
-    if (!f) return;
-    selectFile(f);
-  });
+  if (fileInput) {
+    fileInput.addEventListener("change", (ev) => {
+      const f = ev.target.files[0];
+      if (!f) return;
+      selectFile(f);
+    });
+  }
 
   function selectFile(file) {
     // client-side checks
@@ -62,23 +67,24 @@
     previewName.textContent = file.name;
     previewSize.textContent = humanFileSize(file.size);
     // preview thumb for images
-    if (file.type.startsWith("image/")) {
+    if (file.type && file.type.startsWith("image/")) {
       const url = URL.createObjectURL(file);
       previewThumb.style.backgroundImage = `url(${url})`;
+      previewThumb.textContent = "";
     } else {
       previewThumb.style.backgroundImage = 'none';
-      previewThumb.textContent = ext.toUpperCase();
+      previewThumb.textContent = ext ? ext.toUpperCase() : "";
     }
-    placeholder.hidden = true;
-    preview.hidden = false;
-    uploadProgress.value = 0;
-    progressText.textContent = "";
+    if (placeholder) placeholder.hidden = true;
+    if (preview) preview.hidden = false;
+    if (uploadProgress) uploadProgress.value = 0;
+    if (progressText) progressText.textContent = "";
   }
 
   async function uploadSelectedFile(customSlug = "") {
     if (!currentFile) {
       // trigger file picker
-      fileInput.click();
+      if (fileInput) fileInput.click();
       return;
     }
     const fd = new FormData();
@@ -91,8 +97,8 @@
     xhr.upload.onprogress = (e) => {
       if (e.lengthComputable) {
         const pct = Math.floor((e.loaded / e.total) * 100);
-        uploadProgress.value = pct;
-        progressText.textContent = `${pct}%`;
+        if (uploadProgress) uploadProgress.value = pct;
+        if (progressText) progressText.textContent = `${pct}%`;
       }
     };
 
@@ -120,8 +126,8 @@
         const err = tryParseJSON(xhr.responseText);
         alert((err && err.detail) ? err.detail : "Upload failed.");
       }
-      progressText.textContent = "";
-      uploadProgress.value = 0;
+      if (progressText) progressText.textContent = "";
+      if (uploadProgress) uploadProgress.value = 0;
       // keep preview visible and set currentUrl for view/download
       if (currentSlug) {
         currentUrl = `/f/${currentSlug}`;
@@ -136,33 +142,42 @@
   }
 
   // wire upload button
-  uploadBtn.addEventListener("click", async () => {
-    // prompt for custom slug on long-press? For simplicity: hold Shift to allow slug
-    let custom = "";
-    if (window.event && window.event.shiftKey) {
-      custom = prompt("Enter custom slug (letters, numbers, -, _ )");
-      if (!custom) custom = "";
-    }
-    await uploadSelectedFile(custom);
-  });
+  if (uploadBtn) {
+    uploadBtn.addEventListener("click", async (ev) => {
+      // Shift-click allows custom slug (legacy behavior)
+      const isShift = ev.shiftKey;
+      let custom = "";
+      if (isShift) {
+        custom = prompt("Enter custom slug (letters, numbers, -, _ )");
+        if (!custom) custom = "";
+      }
+      await uploadSelectedFile(custom);
+    });
+  }
 
-  copyBtn.addEventListener("click", () => {
-    if (!currentUrl && !currentSlug) return showToast("No link yet");
-    const u = window.location.origin + (currentUrl || `/f/${currentSlug}`);
-    navigator.clipboard.writeText(u).then(() => showToast("Copied"));
-  });
+  if (copyBtn) {
+    copyBtn.addEventListener("click", () => {
+      if (!currentUrl && !currentSlug) return showToast("No link yet");
+      const u = window.location.origin + (currentUrl || `/f/${currentSlug}`);
+      navigator.clipboard.writeText(u).then(() => showToast("Copied"));
+    });
+  }
 
-  viewBtn.addEventListener("click", () => {
-    if (!currentUrl && !currentSlug) return showToast("No file to view");
-    const u = (currentUrl || `/f/${currentSlug}`);
-    window.open(u, "_blank");
-  });
+  if (viewBtn) {
+    viewBtn.addEventListener("click", () => {
+      if (!currentUrl && !currentSlug) return showToast("No file to view");
+      const u = (currentUrl || `/f/${currentSlug}`);
+      window.open(u, "_blank");
+    });
+  }
 
-  dlBtn.addEventListener("click", () => {
-    if (!currentUrl && !currentSlug) return showToast("No file to download");
-    const u = (currentUrl || `/f/${currentSlug}`) + "?dl=1";
-    window.open(u, "_blank");
-  });
+  if (dlBtn) {
+    dlBtn.addEventListener("click", () => {
+      if (!currentUrl && !currentSlug) return showToast("No file to download");
+      const u = (currentUrl || `/f/${currentSlug}`) + "?dl=1";
+      window.open(u, "_blank");
+    });
+  }
 
   // history in localStorage
   function historyKey(){ return "doto_history_v1" }
@@ -191,6 +206,7 @@
 
   function renderHistory(){
     const arr = getHistory();
+    if (!historyList) return;
     historyList.innerHTML = "";
     if (arr.length === 0) {
       historyList.innerHTML = "<div class='muted'>No recent uploads</div>";
@@ -199,8 +215,11 @@
     arr.forEach(item => {
       const el = document.createElement("div");
       el.className = "history-item";
+      // show inline thumbnail only for images (browser will try to load)
+      const thumbStyle = (item.filename && item.filename.match(/\.(jpg|jpeg|png|gif|webp)$/i))
+        ? `background-image:url(${window.location.origin}/f/${item.slug})` : "";
       el.innerHTML = `
-        <div class="history-thumb" style="${item.filename && item.filename.match(/\.(jpg|jpeg|png|gif|webp)$/i) ? 'background-image:url('+ window.location.origin + '/f/' + item.slug + ')' : ''}"></div>
+        <div class="history-thumb" style="${thumbStyle}"></div>
         <div class="history-meta">
           <div style="font-weight:700">${escapeHtml(item.filename || item.slug)}</div>
           <div style="font-size:12px;color:var(--muted)">${timeAgo(item.created_at)}</div>
@@ -214,35 +233,69 @@
     });
   }
 
-  historyList.addEventListener("click", (e) => {
-    const btn = e.target.closest("button");
-    if (!btn) return;
-    const slug = btn.dataset.slug;
-    const action = btn.dataset.action;
-    if (action === "copy") {
-      const u = window.location.origin + `/f/${slug}`;
-      navigator.clipboard.writeText(u).then(()=> showToast("Copied"));
-    } else if (action === "open") {
-      window.open(`/f/${slug}`, "_blank");
-    }
-  });
+  if (historyList) {
+    historyList.addEventListener("click", (e) => {
+      const btn = e.target.closest("button");
+      if (!btn) return;
+      const slug = btn.dataset.slug;
+      const action = btn.dataset.action;
+      if (action === "copy") {
+        const u = window.location.origin + `/f/${slug}`;
+        navigator.clipboard.writeText(u).then(()=> showToast("Copied"));
+      } else if (action === "open") {
+        window.open(`/f/${slug}`, "_blank");
+      }
+    });
+  }
 
-  clearHistoryBtn.addEventListener("click", () => {
-    if (confirm("Clear local history?")) clearHistory();
-  });
+  if (clearHistoryBtn) {
+    clearHistoryBtn.addEventListener("click", () => {
+      if (confirm("Clear local history?")) clearHistory();
+    });
+  }
 
-  // modal api
-  apiBtn.addEventListener("click", () => {
-    apiModal.hidden = false;
-  });
-  closeApi.addEventListener("click", () => apiModal.hidden = true);
-  copyCurl.addEventListener("click", () => {
-    navigator.clipboard.writeText(curlExample.textContent).then(()=> showToast("Copied"));
+  // modal api - robust handlers
+  if (apiBtn && apiModal) {
+    apiBtn.addEventListener("click", () => {
+      apiModal.hidden = false;
+      // focus first interactive element in modal if any
+      const focusable = apiModal.querySelector("button, [tabindex]:not([tabindex='-1'])");
+      if (focusable) focusable.focus();
+    });
+  }
+
+  // close click handler (guarded)
+  if (closeApi && apiModal) {
+    closeApi.addEventListener("click", () => {
+      apiModal.hidden = true;
+    });
+  }
+
+  // click outside modal content (backdrop)
+  if (apiModal) {
+    apiModal.addEventListener("click", (e) => {
+      // if click directly on the backdrop (modal container) close it
+      if (e.target === apiModal) {
+        apiModal.hidden = true;
+      }
+    });
+  }
+
+  // close on Escape key
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && apiModal && !apiModal.hidden) {
+      apiModal.hidden = true;
+    }
   });
 
+  if (copyCurl && curlExample) {
+    copyCurl.addEventListener("click", () => {
+      navigator.clipboard.writeText(curlExample.textContent).then(()=> showToast("Copied"));
+    });
+  }
+
   // small helpers
   function showToast(text) {
-    // lightweight toast
     const t = document.createElement("div");
     t.textContent = text;
     t.style.position = "fixed";
@@ -285,11 +338,10 @@
       currentSlug = arr[0].slug;
       currentUrl = `/f/${currentSlug}`;
       currentFile = null;
-      // set preview to first history filename
       previewName.textContent = arr[0].filename;
       previewSize.textContent = humanFileSize(arr[0].size || 0);
-      placeholder.hidden = true;
-      preview.hidden = false;
+      if (placeholder) placeholder.hidden = true;
+      if (preview) preview.hidden = false;
     }
   })();