Allow deleting explorer images

app.py

@@ -1928,6 +1928,21 @@ def image_download(body: DownloadRequest):
     )
 
 
+@api.post(
+    "/api/images/delete",
+    dependencies=[Depends(require_pass)],
+)
+def image_delete(body: DownloadRequest):
+    paths = selected_paths(body.items)
+    for path in paths.values():
+        path.unlink()
+    for value in body.items:
+        path = (IMAGE_DIR / value).resolve()
+        if path.is_dir() and not any(path.iterdir()):
+            path.rmdir()
+    return {"deleted": len(paths)}
+
+
 def login(p):
     if not valid_pass(p):
         raise gr.Error("Invalid password")

explorer.js

@@ -20,6 +20,7 @@ class ImageExplorer extends HTMLElement {
                     <button class="all" type="button">Select all</button>
                     <button class="clear" type="button">Clear</button>
                     <button class="download primary" type="button">Download 7z</button>
+                    <button class="delete" type="button">Delete</button>
                 </div>
                 <div class="status">Loading</div>
                 <div class="content"></div>
@@ -34,6 +35,7 @@ class ImageExplorer extends HTMLElement {
         $(".all", this).addEventListener("click", () => this.select(true))
         $(".clear", this).addEventListener("click", () => this.select(false))
         $(".download", this).addEventListener("click", () => this.download())
+        $(".delete", this).addEventListener("click", () => this.delete())
         $("input[type=search]", this).addEventListener("input", event => {
             this.filter(event.target.value)
         })
@@ -179,6 +181,28 @@ class ImageExplorer extends HTMLElement {
         this.update()
     }
 
+    async delete() {
+        const items = $$(".item:checked", this).map(input => input.dataset.path)
+        if (!items.length || !confirm(`Delete ${items.length} selected item(s)?`)) return
+        const button = $(".delete", this)
+        button.disabled = true
+        $(".status", this).textContent = "Deleting"
+        try {
+            const response = await fetch(api("/api/images/delete"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ items }),
+            })
+            if (!response.ok) throw new Error("Delete failed")
+            this.cache.clear()
+            await this.load(this.folder)
+        } catch (error) {
+            $(".status", this).textContent = error.message
+        } finally {
+            button.disabled = false
+        }
+    }
+
     setupLightbox() {
         const dialog = $(".lightbox", this)
         const viewer = $(".viewer", dialog)