hanna/fabrica

feat(web): drag-and-drop release asset uploader

11e96da · hanna committed on 2026-07-26

Replace the bare file input on the release edit page with a dashed dropzone that
accepts a file by drop or click, then shows an editable name, size, and a remove
button before uploading. The edited name overrides the file's own (basename only,
so it can't smuggle a path). Progressive enhancement: the plain file input still
works without JavaScript.

Also strengthen the release Delete button's margin reset so it beats the
card-form rule and lines up with Edit.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +42 −3

assets/fabrica.js +27 −0

crates/web/src/releases.rs +25 −1

   flex: none;
+}
 /* The Delete button sits in a card form, so it would otherwise inherit the
-   stacked-form top margin and float below the Edit link. */
+   stacked-form top margin and float below the Edit link. Specificity here must
-.release-actions form button[type="submit"] {
+   beat `.card form button[type="submit"]:not(.inline-btn)`. */
+.card .release-actions form button[type="submit"]:not(.inline-btn) {
   margin-top: 0;
+}
 /* Asset management sits below the edit form; give it room to breathe. */
   font-size: 0.85em;
+}
 .asset-upload {
+  margin-top: 0.75rem;
+}
+/* A dashed drop target that also opens the file picker on click (the file input
+   is visually hidden inside the label but stays keyboard- and click-reachable). */
+.dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border: 1px dashed var(--fb-border);
+  border-radius: var(--fb-radius);
+  color: var(--fb-fg-muted);
+  text-align: center;
+  cursor: pointer;
+}
+.dropzone:hover,
+.dropzone.drag {
+  border-color: var(--fb-accent);
+  color: var(--fb-fg);
+}
+.dropzone-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+/* The pending (not-yet-uploaded) file: editable name, size, remove. */
+.asset-pending {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  margin-bottom: 0.75rem;
+}
+.asset-pending-name {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--fb-font-mono);
+}
+.asset-upload .btn {
   margin-top: 0.75rem;
-  flex-wrap: wrap;
+}
 .release-form-actions {
   display: flex;

       });
+    }
   });
+  // ---- Release asset dropzone (drag-drop / click, editable name + size) ----
+  document.querySelectorAll(".asset-upload").forEach(function (form) {
+    var input = form.querySelector("input[type=file]");
+    var zone = form.querySelector(".dropzone");
+    var pending = form.querySelector(".asset-pending");
+    if (!input || !zone || !pending) return;
+    function show() {
+      var f = input.files[0];
+      pending.hidden = !f;
+      if (!f) return;
+      pending.querySelector("input[type=text]").value = f.name;
+      pending.querySelector(".asset-size").textContent =
+        "(" + (f.size < 1048576 ? (f.size / 1024).toFixed(1) + " KB" : (f.size / 1048576).toFixed(2) + " MB") + ")";
+    }
+    input.addEventListener("change", show);
+    pending.querySelector(".asset-remove").addEventListener("click", function () {
+      input.value = ""; pending.hidden = true;
+    });
+    ["dragover", "dragenter", "dragleave", "drop"].forEach(function (ev) {
+      zone.addEventListener(ev, function (e) {
+        e.preventDefault();
+        zone.classList.toggle("drag", ev === "dragover" || ev === "dragenter");
+        if (ev === "drop" && e.dataTransfer.files.length) { input.files = e.dataTransfer.files; show(); }
+      });
+    });
+  });
 })();

+                }
                 form method="post" action=(format!("/release/{release_id}/asset")) enctype="multipart/form-data" class="asset-upload" {
                     input type="hidden" name="_csrf" value=(csrf);
-                    input type="file" name="asset" required;
+                    // Populated by JS when a file is picked (editable name, size,
+                    // remove); stays hidden without JS.
+                    div class="asset-pending" hidden {
+                        input type="text" name="name" class="asset-pending-name" aria-label="Asset name";
+                        span class="asset-size muted" {}
+                        button type="button" class="asset-remove icon-btn" aria-label="Remove file" title="Remove file" { (icon(Icon::X)) }
+                    }
+                    label class="dropzone" {
+                        input type="file" name="asset" class="dropzone-input" required;
+                        (icon(Icon::Download))
+                        span { "Attach a file by dropping it here or selecting it." }
+                    }
                     button class="btn inline-btn" type="submit" { "Upload asset" }
+                }
+            }
     mut multipart: Multipart,
 ) -> Response {
     let mut csrf: Option<String> = None;
+    let mut override_name: Option<String> = None;
     let mut saved: Option<(String, String, i64, String)> = None; // (tmp_name, name, size, ctype)
     while let Ok(Some(mut field)) = multipart.next_field().await {
         match field.name() {
             Some("_csrf") => csrf = field.text().await.ok(),
+            Some("name") => override_name = field.text().await.ok(),
             Some("asset") => {
                 let name = field
                     .file_name()
     if crate::session::verify_csrf(&jar, &HeaderMap::new(), csrf.as_deref()).is_err() {
         return AppError::Forbidden.into_response();
+    }
+    // An edited name from the form overrides the uploaded file's own name; keep
+    // only the basename so it can't smuggle a path.
+    if let Some(name) = &mut saved
+        && let Some(ov) = override_name
+            .as_deref()
+            .map(str::trim)
+            .and_then(|s| s.rsplit(['/', '\\']).next())
+            .filter(|s| !s.is_empty())
+    {
+        name.1 = ov.to_string();
+    }
     let result = async {
         let (release, _repo, _user) = writer_release(&state, viewer.as_ref(), &id).await?;
         if let Some((tmp_name, name, size, ctype)) = saved {