Add save image browse and external preview

js/save_image/index.js

@@ -136,8 +136,15 @@ function imageUrl(meta) {
   return `/view?filename=${encodeURIComponent(meta.filename)}&type=${encodeURIComponent(meta.type)}&subfolder=${encodeURIComponent(meta.subfolder || "")}&t=${Date.now()}`;
 }
 
+function entrySrc(meta) {
+  if (!meta) return null;
+  if (meta.type === "output" && meta.filename) return imageUrl(meta);
+  if (meta.token) return `/dumas/api/save_image/file?t=${encodeURIComponent(meta.token)}`;
+  return null;
+}
+
 function canPreview(meta) {
-  return meta?.type === "output";
+  return !!entrySrc(meta);
 }
 
 function updateActionState(node, ui) {
@@ -154,7 +161,9 @@ function updateActionState(node, ui) {
 async function copyCurrentImage(node) {
   const entry = node._dsiImages?.[node._dsiImageIndex || 0];
   if (!entry || !navigator.clipboard?.write || typeof ClipboardItem === "undefined") return false;
-  const response = await fetch(imageUrl(entry));
+  const src = entrySrc(entry);
+  if (!src) return false;
+  const response = await fetch(src);
   if (!response.ok) return false;
   const blob = await response.blob();
   await navigator.clipboard.write([new ClipboardItem({ [blob.type || "image/png"]: blob })]);
@@ -188,7 +197,7 @@ function renderPreview(node, ui) {
     ui.view.classList.add("has");
     ui.placeholder.style.display = "none";
     ui.img.style.display = "block";
-    ui.img.src = imageUrl(current);
+    ui.img.src = entrySrc(current);
     ui.info.textContent = images.length > 1
       ? `Showing saved image ${currentIndex + 1} of ${images.length}`
       : "Showing latest saved image";
@@ -341,7 +350,24 @@ function createRoot(node) {
     renderPreview(node, ui);
   });
   browseButton.addEventListener("click", async () => {
-    ui.info.textContent = "Browser folder picking cannot provide a real filesystem path here. Paste the full path into the folder field.";
+    try {
+      const response = await fetch(`/dumas/api/pick_directory?path=${encodeURIComponent((folderInput.value || "").trim())}`);
+      const data = await response.json();
+      if (data?.ok && data.path) {
+        folderInput.value = data.path;
+        setWidgetValue(node, "folder", folderInput.value);
+        renderPreview(node, ui);
+        ui.info.textContent = `Selected folder: ${data.path}`;
+        return;
+      }
+      if (data?.cancelled) {
+        ui.info.textContent = "Folder selection cancelled";
+        return;
+      }
+      ui.info.textContent = data?.message || "Folder picker is unavailable here";
+    } catch (_error) {
+      ui.info.textContent = "Folder picker is unavailable here";
+    }
   });
   fmtPng.addEventListener("click", () => {
     ui.format = "png";
@@ -366,7 +392,9 @@ function createRoot(node) {
   openButton.addEventListener("click", () => {
     const entry = node._dsiImages?.[node._dsiImageIndex || 0];
     if (!entry) return;
-    window.open(imageUrl(entry), "_blank", "noopener,noreferrer");
+    const src = entrySrc(entry);
+    if (!src) return;
+    window.open(src, "_blank", "noopener,noreferrer");
   });
   copyButton.addEventListener("click", async () => {
     try {