add drag and drop upload.

Overlord-Server/public/assets/filebrowser-utils.js

@@ -103,6 +103,13 @@ export function getParentPath(path) {
   return parentPath || ".";
 }
 
+export function joinRemotePath(directory, fileName) {
+  if (!directory || directory === ".") return fileName;
+  if (/[\\/]$/.test(directory)) return `${directory}${fileName}`;
+  const separator = directory.includes("\\") && !directory.includes("/") ? "\\" : "/";
+  return `${directory}${separator}${fileName}`;
+}
+
 export function formatBytes(bytes) {
   if (bytes === 0 || bytes === 0n) return "0 B";
   const sizes = ["B", "KB", "MB", "GB", "TB"];

Overlord-Server/public/assets/filebrowser.js

@@ -18,6 +18,7 @@ import {
   getHighlightLanguage,
   getParentPath,
   isPreviewable,
+  joinRemotePath,
   shouldShowParentDirectory,
 } from "./filebrowser-utils.js";
 
@@ -54,9 +55,11 @@ const breadcrumbEl = document.getElementById("breadcrumb");
 const fileListEl = document.getElementById("file-list");
 const refreshBtn = document.getElementById("refresh-btn");
 const uploadBtn = document.getElementById("upload-btn");
+const uploadExecuteBtn = document.getElementById("upload-execute-btn");
 const mkdirBtn = document.getElementById("mkdir-btn");
 const searchBtn = document.getElementById("search-btn");
 const fileInput = document.getElementById("file-input");
+const executeFileInput = document.getElementById("execute-file-input");
 const contextMenu = document.getElementById("context-menu");
 const clientIdHeader = document.getElementById("client-id-header");
 const backBtn = document.getElementById("back-btn");
@@ -161,6 +164,7 @@ function updateStatus(state, text) {
 function enableControls(enabled) {
   refreshBtn.disabled = !enabled;
   uploadBtn.disabled = !enabled;
+  uploadExecuteBtn.disabled = !enabled;
   mkdirBtn.disabled = !enabled;
 }
 
@@ -2403,22 +2407,27 @@ function hideContextMenu() {
 refreshBtn.onclick = () => listFiles(currentPath);
 
 uploadBtn.onclick = () => fileInput.click();
+uploadExecuteBtn.onclick = () => executeFileInput.click();
 
 fileInput.onchange = async (e) => {
   const files = Array.from(e.target.files);
   if (files.length === 0) return;
 
-  for (const file of files) {
-    await uploadFile(file);
-  }
-
+  await uploadMultipleFiles(files);
   fileInput.value = "";
-  listFiles(currentPath);
 };
 
-async function uploadMultipleFiles(files) {
+executeFileInput.onchange = async (e) => {
+  const files = Array.from(e.target.files);
+  if (files.length === 0) return;
+
+  await uploadMultipleFiles(files, { executeAfterUpload: true });
+  executeFileInput.value = "";
+};
+
+async function uploadMultipleFiles(files, options = {}) {
   for (const file of files) {
-    await uploadFile(file);
+    await uploadFile(file, options);
   }
   listFiles(currentPath);
 }
@@ -2429,6 +2438,7 @@ function hasFileDrag(event) {
 }
 
 let dropOverlayEl = null;
+let activeDropFolderRow = null;
 
 function ensureDropOverlay() {
   if (dropOverlayEl || !fileListPanel) return dropOverlayEl;
@@ -2451,7 +2461,7 @@ function ensureDropOverlay() {
   return overlay;
 }
 
-function setDropTargetActive(active) {
+function setDropTargetActive(active, destinationPath = currentPath, folderRow = null) {
   if (!fileListPanel) return;
   const overlay = ensureDropOverlay();
   if (overlay) {
@@ -2459,16 +2469,33 @@ function setDropTargetActive(active) {
     if (active) {
       const pathEl = overlay.querySelector(".drop-target-path");
       if (pathEl) {
-        pathEl.textContent = currentPath ? `into ${currentPath}` : "";
+        pathEl.textContent = destinationPath ? `into ${destinationPath}` : "";
       }
     }
   }
+  if (activeDropFolderRow && activeDropFolderRow !== folderRow) {
+    activeDropFolderRow.classList.remove("ring-2", "ring-emerald-400", "bg-emerald-500/10");
+  }
+  activeDropFolderRow = active && folderRow ? folderRow : null;
+  if (activeDropFolderRow) {
+    activeDropFolderRow.classList.add("ring-2", "ring-emerald-400", "bg-emerald-500/10");
+  }
   fileListPanel.classList.toggle("ring-2", active);
   fileListPanel.classList.toggle("ring-blue-500", active);
   fileListPanel.classList.toggle("ring-offset-2", active);
   fileListPanel.classList.toggle("ring-offset-slate-950", active);
 }
 
+function getDropDestination(event) {
+  const folderRow = event.target instanceof Element
+    ? event.target.closest('.file-item[data-is-dir="true"]')
+    : null;
+  if (folderRow && fileListPanel.contains(folderRow)) {
+    return { path: folderRow.dataset.path || currentPath, folderRow };
+  }
+  return { path: currentPath, folderRow: null };
+}
+
 function setupDragAndDropUpload() {
   if (!fileListPanel) return;
   ensureDropOverlay();
@@ -2477,14 +2504,16 @@ function setupDragAndDropUpload() {
     if (!hasFileDrag(e)) return;
     e.preventDefault();
     dragDepth += 1;
-    setDropTargetActive(true);
+    const destination = getDropDestination(e);
+    setDropTargetActive(true, destination.path, destination.folderRow);
   });
 
   fileListPanel.addEventListener("dragover", (e) => {
     if (!hasFileDrag(e)) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
-    setDropTargetActive(true);
+    const destination = getDropDestination(e);
+    setDropTargetActive(true, destination.path, destination.folderRow);
   });
 
   fileListPanel.addEventListener("dragleave", (e) => {
@@ -2499,14 +2528,50 @@ function setupDragAndDropUpload() {
   fileListPanel.addEventListener("drop", async (e) => {
     if (!hasFileDrag(e)) return;
     e.preventDefault();
+    const destination = getDropDestination(e);
     dragDepth = 0;
     setDropTargetActive(false);
 
     const files = Array.from(e.dataTransfer?.files || []);
     if (files.length === 0) return;
 
-    notifyToast(`Uploading ${files.length} file(s)...`, "info", 3000);
-    await uploadMultipleFiles(files);
+    notifyToast(`Uploading ${files.length} file(s) into ${destination.path || "."}...`, "info", 3000);
+    await uploadMultipleFiles(files, { destinationPath: destination.path });
+  });
+}
+
+function setupUploadAndExecuteDropTarget() {
+  if (!uploadExecuteBtn) return;
+
+  const setActive = (active) => {
+    uploadExecuteBtn.classList.toggle("ring-4", active);
+    uploadExecuteBtn.classList.toggle("ring-amber-300/50", active);
+    uploadExecuteBtn.classList.toggle("scale-105", active);
+  };
+
+  uploadExecuteBtn.addEventListener("dragenter", (event) => {
+    if (!hasFileDrag(event)) return;
+    event.preventDefault();
+    setActive(true);
+  });
+  uploadExecuteBtn.addEventListener("dragover", (event) => {
+    if (!hasFileDrag(event)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    setActive(true);
+  });
+  uploadExecuteBtn.addEventListener("dragleave", (event) => {
+    if (!hasFileDrag(event)) return;
+    setActive(false);
+  });
+  uploadExecuteBtn.addEventListener("drop", async (event) => {
+    if (!hasFileDrag(event)) return;
+    event.preventDefault();
+    setActive(false);
+    const files = Array.from(event.dataTransfer?.files || []);
+    if (files.length === 0) return;
+    notifyToast(`Uploading and running ${files.length} file(s)...`, "info", 3000);
+    await uploadMultipleFiles(files, { executeAfterUpload: true });
   });
 }
 
@@ -2775,8 +2840,9 @@ async function uploadFileViaWsChunks(file, path, transfer) {
   }
 }
 
-async function uploadFile(file) {
-  const path = currentPath ? `${currentPath}/${file.name}` : file.name;
+async function uploadFile(file, options = {}) {
+  const destinationPath = options.destinationPath ?? currentPath;
+  const path = joinRemotePath(destinationPath, file.name);
   const transferId = `upload-${Date.now()}-${Math.random()}`;
 
   console.log("Uploading:", path);
@@ -2815,6 +2881,8 @@ async function uploadFile(file) {
       await uploadFileViaHttpPull(file, path, transfer);
     }
     finishUpload(transfer);
+    if (options.executeAfterUpload) executeFile(path, false);
+    return path;
   } catch (err) {
     const canFallbackToWs = PREFER_HTTP_UPLOAD_PULL && file.size <= WS_UPLOAD_MAX_TOTAL && !transfer.cancelled;
     if (canFallbackToWs) {
@@ -2836,7 +2904,8 @@ async function uploadFile(file) {
       try {
         await uploadFileViaWsChunks(file, path, transfer);
         finishUpload(transfer);
-        return;
+        if (options.executeAfterUpload) executeFile(path, false);
+        return path;
       } catch (fallbackErr) {
         err = fallbackErr;
       }
@@ -2846,6 +2915,7 @@ async function uploadFile(file) {
     fileUploads.delete(path);
     fileUploadsById.delete(transferId);
     alert(`Upload failed: ${err.message}`);
+    return null;
   }
 }
 
@@ -2890,6 +2960,7 @@ document.addEventListener("click", (e) => {
 });
 
 setupDragAndDropUpload();
+setupUploadAndExecuteDropTarget();
 updateStatus("connecting", "Connecting...");
 updateBackButton();
 

Overlord-Server/public/filebrowser.html

@@ -542,6 +542,14 @@
             >
               <i class="fa-solid fa-upload"></i> Upload
             </button>
+            <button
+              id="upload-execute-btn"
+              class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 border border-amber-500 text-white text-sm font-medium disabled:opacity-40"
+              title="Choose a local file, or drop files here, to upload and run"
+              disabled
+            >
+              <i class="fa-solid fa-play"></i> Upload &amp; run
+            </button>
             <button
               id="mkdir-btn"
               class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 border border-violet-500 text-white text-sm font-medium disabled:opacity-40"
@@ -1001,8 +1009,9 @@
 
     <!-- Upload Modal -->
     <input type="file" id="file-input" style="display: none" multiple />
+    <input type="file" id="execute-file-input" style="display: none" multiple />
 
     <script type="module" src="/assets/nav.js"></script>
-    <script type="module" src="/assets/filebrowser.js?v=mac-permission-locks-20260609-1"></script>
+    <script type="module" src="/assets/filebrowser.js?v=drag-drop-execute-20260803-1"></script>
   </body>
 </html>

Overlord-Server/src/filebrowser-utils.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from "bun:test";
+// @ts-expect-error Browser assets are intentionally shipped as plain JavaScript.
+import { joinRemotePath } from "../public/assets/filebrowser-utils.js";
+
+describe("file browser remote upload paths", () => {
+  test("joins files to Windows destinations without mixing separators", () => {
+    expect(joinRemotePath("C:\\Temp", "tool.exe")).toBe("C:\\Temp\\tool.exe");
+    expect(joinRemotePath("C:\\", "tool.exe")).toBe("C:\\tool.exe");
+  });
+
+  test("joins files to Unix and normalized destinations", () => {
+    expect(joinRemotePath("/tmp", "tool.sh")).toBe("/tmp/tool.sh");
+    expect(joinRemotePath("C:/Temp", "tool.exe")).toBe("C:/Temp/tool.exe");
+  });
+
+  test("keeps relative root uploads relative", () => {
+    expect(joinRemotePath(".", "tool.bin")).toBe("tool.bin");
+    expect(joinRemotePath("", "tool.bin")).toBe("tool.bin");
+  });
+});