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

@@ @@ -2250,8 +2250,9 @@ pre.code { @@
   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. */
 .release-actions form button[type="submit"] {
    stacked-form top margin and float below the Edit link. Specificity here must
    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. */
@@ @@ -2299,11 +2300,49 @@ pre.code { @@
   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;

@@ @@ -169,4 +169,31 @@ @@
       });
+    }
   });
   // ---- 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" }
+                }
+            }
@@ @@ -551,10 +562,12 @@ pub async fn asset_upload( @@
     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()
@@ @@ -587,6 +600,17 @@ pub async fn asset_upload( @@
     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 {