From abd8fdb35515f0224f936b2f72c4043b247add88 Mon Sep 17 00:00:00 2001
From: Jon Froehlich <jonf@cs.uw.edu>
Date: Mon, 22 Jun 2026 14:18:46 -0700
Subject: [PATCH 1/2] Preserve admin uploads on validation error +
 drag-and-drop (#248)

The Django admin change form renders with novalidate, so the browser
does not enforce the required attributes Django emits. A submit that is
missing a required field round-trips to the server, fails validation, and
the re-rendered form silently drops any file the user had selected -- the
re-upload pain reported in #248.

Add a progressive-enhancement guard on the Talk/Poster/Publication admin
forms (website/static/website/js/admin_artifact_form.js):

- Block the file-losing submit: if any required field is empty, stop the
  POST, show an accessible error summary, and scroll to the first offender,
  so the round-trip never happens and selected files stay attached.
- Pre-check files on selection: extension (from the field's accept list)
  and a %PDF- magic-byte check for the PDF field, mirroring the server
  validators so a bad file is caught before it costs a round-trip.
- Drag-and-drop onto each file field via the DataTransfer API, plus a
  selected-filename readout. The native input stays the accessible control;
  the drop zone is a mouse-only enhancement hidden from assistive tech.

Staying in sync with the backend: required-ness is read from the DOM
([required]), and allowed extensions flow from the PDF_EXTENSIONS /
RAW_FILE_EXTENSIONS constants in upload_validators.py via ArtifactAdmin.
get_form, which sets each file input's accept attribute. Python stays the
single source of truth and the server validators remain authoritative, so
any drift degrades gracefully.

Regression test pins the server-side contract the JS depends on: the guard
assets load on all three artifact add forms and the accept attributes match
the validator allowlists.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 website/admin/artifact_admin.py               |  40 ++-
 .../website/css/admin_artifact_form.css       |  93 +++++
 .../static/website/js/admin_artifact_form.js  | 333 ++++++++++++++++++
 .../tests/test_artifact_admin_upload_guard.py |  55 +++
 4 files changed, 520 insertions(+), 1 deletion(-)
 create mode 100644 website/static/website/css/admin_artifact_form.css
 create mode 100644 website/static/website/js/admin_artifact_form.js
 create mode 100644 website/tests/test_artifact_admin_upload_guard.py

diff --git a/website/admin/artifact_admin.py b/website/admin/artifact_admin.py
index 2f119856..c9175597 100644
--- a/website/admin/artifact_admin.py
+++ b/website/admin/artifact_admin.py
@@ -2,13 +2,32 @@
 from website.models import Artifact
 from django.contrib.admin import widgets
 from sortedm2m_filter_horizontal_widget.forms import SortedFilteredSelectMultiple
+from website.utils.upload_validators import PDF_EXTENSIONS, RAW_FILE_EXTENSIONS
 import logging
 
 # This retrieves a Python logging instance (or creates it)
 _logger = logging.getLogger(__name__)
 
+
+def _accept_attr(extensions):
+    """Build an HTML ``accept`` value (e.g. ``.pdf,.pptx``) from an extension
+    allowlist. Used to seed the file inputs so both the OS file picker and the
+    client-side check in ``admin_artifact_form.js`` read the allowed types
+    straight from the markup — keeping them in sync with the server validators
+    (issue #248)."""
+    return ",".join(f".{ext}" for ext in extensions)
+
+
 class ArtifactAdmin(admin.ModelAdmin):
 
+    # Loaded on every artifact add/change form (Talk/Poster/Publication, which
+    # all subclass this). Guards against losing selected files when the form is
+    # submitted with a missing required field, plus drag-and-drop (issue #248).
+    # PublicationAdmin defines its own Media; Django merges this base in.
+    class Media:
+        css = {"all": ("website/css/admin_artifact_form.css",)}
+        js = ("website/js/admin_artifact_form.js",)
+
     # The list display lets us control what is shown in the default talk table at Home > Website > Talk
     # See: https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display
     list_display = ('title', 'date', 'get_first_author_last_name', 'forum_name', 'location')
@@ -27,9 +46,28 @@ class ArtifactAdmin(admin.ModelAdmin):
         ('Keyword Info',            {'fields': ['keywords']}),
     ]
 
+    def get_form(self, request, obj=None, **kwargs):
+        """
+        Seed the ``accept`` attribute on the file inputs from the same extension
+        allowlists the server validators enforce (``PDF_EXTENSIONS`` /
+        ``RAW_FILE_EXTENSIONS`` in ``website.utils.upload_validators``). This gives
+        the OS file picker a native type filter and is the single source of truth
+        the client-side check in ``admin_artifact_form.js`` reads back from the
+        DOM, so the JS can't drift from the Python rules (issue #248).
+
+        Subclasses (Talk/Publication) call ``super().get_form()`` first and then
+        layer their own widget tweaks, so this runs for all artifact admins.
+        """
+        form = super().get_form(request, obj, **kwargs)
+        if "pdf_file" in form.base_fields:
+            form.base_fields["pdf_file"].widget.attrs["accept"] = _accept_attr(PDF_EXTENSIONS)
+        if "raw_file" in form.base_fields:
+            form.base_fields["raw_file"].widget.attrs["accept"] = _accept_attr(RAW_FILE_EXTENSIONS)
+        return form
+
     def formfield_for_manytomany(self, db_field, request, **kwargs):
         """
-        Overrides the formfield_for_manytomany method of the parent ModelAdmin class to customize the widgets 
+        Overrides the formfield_for_manytomany method of the parent ModelAdmin class to customize the widgets
         used for ManyToMany fields in the admin interface.
 
         Parameters:
diff --git a/website/static/website/css/admin_artifact_form.css b/website/static/website/css/admin_artifact_form.css
new file mode 100644
index 00000000..41be8df2
--- /dev/null
+++ b/website/static/website/css/admin_artifact_form.css
@@ -0,0 +1,93 @@
+/*
+ * Styles for the artifact (Talk / Poster / Publication) admin upload guard and
+ * drag-and-drop. See website/static/website/js/admin_artifact_form.js (issue #248).
+ *
+ * Accessibility: error state is never signaled by color alone — it always pairs
+ * with an outline plus text (the inline message and the top-of-form summary), so
+ * it remains perceivable for low-vision and color-blind users (WCAG 2.0 AA).
+ */
+
+/* --- Drag-and-drop zone (mouse-only enhancement; aria-hidden in the JS) --- */
+.artifact-dropzone {
+  margin-top: 6px;
+  padding: 10px 12px;
+  border: 2px dashed #b0b0b0;
+  border-radius: 6px;
+  color: #555;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+  max-width: 420px;
+  background: #fafafa;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+}
+
+.artifact-dropzone:hover {
+  border-color: #79aec8; /* Django admin accent */
+}
+
+.artifact-dropzone-active {
+  border-color: #417690;
+  border-style: solid;
+  background: #eef6fb;
+  color: #205067;
+}
+
+/* --- Per-field readout / error (under each file input) --- */
+.artifact-file-note {
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.artifact-file-note .artifact-file-name {
+  display: block;
+  color: #2a2a2a;
+}
+
+.artifact-file-note .artifact-file-error {
+  display: block;
+  margin-top: 2px;
+  color: #ba2121; /* Django admin error red */
+  font-weight: 600;
+}
+
+/* Invalid control: outline + the accompanying text above (never color alone). */
+.artifact-field-invalid {
+  outline: 2px solid #ba2121;
+  outline-offset: 1px;
+}
+
+/* --- Top-of-form error summary --- */
+.artifact-error-summary {
+  margin: 0 0 16px 0;
+  padding: 12px 16px;
+  border: 1px solid #ba2121;
+  border-left-width: 6px;
+  border-radius: 4px;
+  background: #fff4f4;
+}
+
+.artifact-error-summary:focus {
+  outline: 2px solid #417690;
+  outline-offset: 2px;
+}
+
+.artifact-error-summary-heading {
+  margin: 0 0 8px 0;
+  font-weight: 700;
+  color: #6b1414;
+}
+
+.artifact-error-summary ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.artifact-error-summary li {
+  margin: 2px 0;
+}
+
+.artifact-error-summary a {
+  color: #ba2121;
+  text-decoration: underline;
+}
diff --git a/website/static/website/js/admin_artifact_form.js b/website/static/website/js/admin_artifact_form.js
new file mode 100644
index 00000000..ad0fb046
--- /dev/null
+++ b/website/static/website/js/admin_artifact_form.js
@@ -0,0 +1,333 @@
+/**
+ * Client-side guard + drag-and-drop for the artifact (Talk / Poster / Publication)
+ * admin add/change forms. Addresses issue #248.
+ *
+ * Why this exists
+ * ---------------
+ * The Django admin renders its change form with the `novalidate` attribute, which
+ * disables the browser's native HTML5 constraint validation. So even though Django
+ * emits `required` on every form-required field, the browser does NOT block a submit
+ * that's missing one. The POST goes to the server, validation fails, the form is
+ * re-rendered with errors — and any file the user had selected is silently dropped
+ * (the browser never re-sends a file input's value, and Django can't repopulate it).
+ * Re-uploading the lost PDF/PPTX after fixing an unrelated required field is the
+ * exact pain reported in #248.
+ *
+ * What this does (all progressive enhancement — the form still works without JS):
+ *   1. Required-field guard: on submit, blocks the POST if any required field is
+ *      empty, shows an accessible summary, and scrolls to the first offender — so
+ *      the round-trip that loses files never happens.
+ *   2. File pre-checks: on selection, validates extension (against the field's
+ *      `accept` list) and, for PDF-only fields, the `%PDF-` signature — mirroring
+ *      the server validators so a bad file is caught before it costs a round-trip.
+ *   3. Drag-and-drop onto each file field, plus a selected-filename readout.
+ *
+ * Staying in sync with the backend (see also website/utils/upload_validators.py):
+ *   - Required-ness is read from the DOM (`[required]`), which Django derives from
+ *     each model field's `blank=`. No field list is hardcoded here.
+ *   - Allowed extensions are read from each file input's `accept` attribute, which
+ *     ArtifactAdmin.get_form sets from the same PDF_EXTENSIONS / RAW_FILE_EXTENSIONS
+ *     constants the server validators use. Python is the single source of truth.
+ *   - The `%PDF-` signature is a frozen part of the PDF spec (mirrors
+ *     _looks_like_pdf in upload_validators.py), so there is nothing to keep in sync.
+ *
+ * The server validators remain authoritative; everything here is a convenience
+ * pre-check, so any drift degrades gracefully (at worst a redundant round-trip).
+ */
+(function () {
+  "use strict";
+
+  // How many leading bytes to sniff for the PDF signature (matches the server's
+  // _read_header default in upload_validators.py).
+  var PDF_HEADER_BYTES = 1024;
+
+  /**
+   * The main artifact form: the multipart add/change form. Returns null on any
+   * other admin page (this script is only loaded on the artifact admins anyway).
+   * @returns {HTMLFormElement|null}
+   */
+  function getArtifactForm() {
+    return document.querySelector('#content-main form[enctype="multipart/form-data"]');
+  }
+
+  /**
+   * Human-readable label for a form control, taken from its <label>, with the
+   * trailing colon and required asterisk stripped. Falls back to the field name.
+   * @param {HTMLElement} el
+   * @returns {string}
+   */
+  function labelFor(el) {
+    var label = el.id ? document.querySelector('label[for="' + el.id + '"]') : null;
+    var text = label ? label.textContent : (el.getAttribute("name") || "This field");
+    return text.replace(/[:*\s]+$/, "").trim();
+  }
+
+  /**
+   * Whether a required control has no value yet.
+   * @param {HTMLElement} el
+   * @returns {boolean}
+   */
+  function isEmpty(el) {
+    if (el.type === "file") {
+      return !el.files || el.files.length === 0;
+    }
+    return !el.value || !String(el.value).trim();
+  }
+
+  /**
+   * Allowed extensions (lowercase, no dot) parsed from a file input's `accept`
+   * attribute, e.g. ".pdf,.pptx" -> ["pdf", "pptx"]. Empty array if unset.
+   * @param {HTMLInputElement} input
+   * @returns {string[]}
+   */
+  function allowedExtensions(input) {
+    var accept = input.getAttribute("accept");
+    if (!accept) return [];
+    return accept
+      .split(",")
+      .map(function (s) { return s.trim().replace(/^\./, "").toLowerCase(); })
+      .filter(Boolean);
+  }
+
+  /** Lowercase extension (no dot) of a filename. */
+  function extensionOf(name) {
+    var dot = name.lastIndexOf(".");
+    return dot === -1 ? "" : name.slice(dot + 1).toLowerCase();
+  }
+
+  /**
+   * Read the first `numBytes` of a File as a Uint8Array (resolves null on error).
+   * @param {File} file
+   * @param {number} numBytes
+   * @returns {Promise<Uint8Array|null>}
+   */
+  function readHeader(file, numBytes) {
+    return new Promise(function (resolve) {
+      var reader = new FileReader();
+      reader.onload = function () { resolve(new Uint8Array(reader.result)); };
+      reader.onerror = function () { resolve(null); };
+      reader.readAsArrayBuffer(file.slice(0, numBytes));
+    });
+  }
+
+  /** True if `bytes` contains the ASCII "%PDF-" signature. */
+  function looksLikePdf(bytes) {
+    if (!bytes) return true; // unreadable -> don't block; let the server decide
+    var sig = "%PDF-";
+    var text = "";
+    for (var i = 0; i < bytes.length; i++) text += String.fromCharCode(bytes[i]);
+    return text.indexOf(sig) !== -1;
+  }
+
+  /**
+   * Validate a freshly selected file against the field's rules. Resolves to an
+   * error string, or "" if the file is acceptable.
+   * @param {HTMLInputElement} input
+   * @returns {Promise<string>}
+   */
+  function validateFile(input) {
+    if (!input.files || input.files.length === 0) return Promise.resolve("");
+    var file = input.files[0];
+    var allowed = allowedExtensions(input);
+    var ext = extensionOf(file.name);
+    if (allowed.length && allowed.indexOf(ext) === -1) {
+      return Promise.resolve(
+        'This file type (.' + (ext || "?") + ") isn't allowed here. Expected: " +
+        allowed.map(function (e) { return "." + e; }).join(", ") + "."
+      );
+    }
+    // Magic-byte check only for PDF-only fields (the pdf_file field). raw_file
+    // accepts many formats, so we don't sniff it (the server's denylist does).
+    if (allowed.length === 1 && allowed[0] === "pdf") {
+      return readHeader(file, PDF_HEADER_BYTES).then(function (bytes) {
+        if (!looksLikePdf(bytes)) {
+          return "This file doesn't look like a real PDF (its contents don't " +
+            "start with the PDF signature). The extension may not match the file.";
+        }
+        return "";
+      });
+    }
+    return Promise.resolve("");
+  }
+
+  // --- DOM helpers for messaging -------------------------------------------
+
+  /** The little per-field readout/error element, created on demand after `input`. */
+  function fieldNote(input) {
+    var note = input.parentNode.querySelector(".artifact-file-note");
+    if (!note) {
+      note = document.createElement("div");
+      note.className = "artifact-file-note";
+      input.parentNode.insertBefore(note, input.nextSibling);
+    }
+    return note;
+  }
+
+  /** Show the selected filename and any error under a file input. */
+  function renderFieldNote(input, error) {
+    var note = fieldNote(input);
+    var name = input.files && input.files.length ? input.files[0].name : "";
+    note.innerHTML = "";
+    if (name) {
+      var fn = document.createElement("span");
+      fn.className = "artifact-file-name";
+      fn.textContent = "Selected: " + name;
+      note.appendChild(fn);
+    }
+    if (error) {
+      var err = document.createElement("span");
+      err.className = "artifact-file-error";
+      err.textContent = error;
+      note.appendChild(err);
+    }
+    input.classList.toggle("artifact-field-invalid", !!error);
+    input.setAttribute("data-artifact-invalid", error ? "true" : "false");
+  }
+
+  /** Remove any existing top-of-form error summary. */
+  function clearSummary(form) {
+    var existing = form.querySelector(".artifact-error-summary");
+    if (existing) existing.parentNode.removeChild(existing);
+  }
+
+  /**
+   * Render an accessible error summary at the top of the form and move focus to
+   * it. `problems` is a list of {label, target} where target is the element to
+   * focus/scroll to when its summary link is clicked.
+   */
+  function showSummary(form, problems) {
+    clearSummary(form);
+    var box = document.createElement("div");
+    box.className = "artifact-error-summary";
+    box.setAttribute("role", "alert");
+    box.setAttribute("tabindex", "-1");
+
+    var heading = document.createElement("p");
+    heading.className = "artifact-error-summary-heading";
+    heading.textContent =
+      "Please fix the following before saving (your selected files are still attached):";
+    box.appendChild(heading);
+
+    var list = document.createElement("ul");
+    problems.forEach(function (p) {
+      var li = document.createElement("li");
+      if (p.target && p.target.id) {
+        var link = document.createElement("a");
+        link.href = "#" + p.target.id;
+        link.textContent = p.label;
+        link.addEventListener("click", function (e) {
+          e.preventDefault();
+          p.target.focus();
+          p.target.scrollIntoView({ behavior: "smooth", block: "center" });
+        });
+        li.appendChild(link);
+      } else {
+        li.textContent = p.label;
+      }
+      list.appendChild(li);
+    });
+    box.appendChild(list);
+
+    form.insertBefore(box, form.firstChild);
+    box.focus();
+    box.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+
+  // --- Wiring --------------------------------------------------------------
+
+  /**
+   * Add drag-and-drop + change-time validation + a filename readout to one file
+   * input. The native input stays fully functional and is the accessible control;
+   * the drop zone is a mouse-only visual enhancement (hidden from assistive tech).
+   * @param {HTMLInputElement} input
+   */
+  function enhanceFileInput(input) {
+    var zone = document.createElement("div");
+    zone.className = "artifact-dropzone";
+    zone.setAttribute("aria-hidden", "true");
+    zone.innerHTML = '<span class="artifact-dropzone-text">Drag a file here</span>';
+    // Clicking the zone opens the same native file picker.
+    zone.addEventListener("click", function () { input.click(); });
+
+    ["dragenter", "dragover"].forEach(function (evt) {
+      zone.addEventListener(evt, function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        zone.classList.add("artifact-dropzone-active");
+      });
+    });
+    ["dragleave", "dragend"].forEach(function (evt) {
+      zone.addEventListener(evt, function () {
+        zone.classList.remove("artifact-dropzone-active");
+      });
+    });
+    zone.addEventListener("drop", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      zone.classList.remove("artifact-dropzone-active");
+      if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+      // Assign the dropped file to the real input via DataTransfer, then fire a
+      // change event so the normal validation/readout path runs.
+      var dt = new DataTransfer();
+      dt.items.add(e.dataTransfer.files[0]);
+      input.files = dt.files;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    input.parentNode.insertBefore(zone, input.nextSibling);
+
+    // validateFile resolves asynchronously (it may read the file's header). If the
+    // user picks a second file before the first finished validating, the stale
+    // result must not clobber the newer one, so each change carries a token and we
+    // only render the latest.
+    var changeSeq = 0;
+    input.addEventListener("change", function () {
+      var token = ++changeSeq;
+      validateFile(input).then(function (error) {
+        if (token === changeSeq) renderFieldNote(input, error);
+      });
+    });
+  }
+
+  /**
+   * Submit handler: block the POST (which would lose files) when a required field
+   * is empty or a selected file already failed its change-time check.
+   * @param {HTMLFormElement} form
+   * @param {Event} e
+   */
+  function onSubmit(form, e) {
+    var problems = [];
+
+    form.querySelectorAll("[required]").forEach(function (el) {
+      if (el.disabled || el.type === "hidden") return;
+      if (isEmpty(el)) {
+        problems.push({ label: labelFor(el) + " is required.", target: el });
+      }
+    });
+
+    form.querySelectorAll('input[type="file"]').forEach(function (input) {
+      if (input.getAttribute("data-artifact-invalid") === "true") {
+        problems.push({ label: labelFor(input) + ": please choose a valid file.", target: input });
+      }
+    });
+
+    if (problems.length) {
+      e.preventDefault();
+      showSummary(form, problems);
+    }
+  }
+
+  function init() {
+    var form = getArtifactForm();
+    if (!form) return;
+    clearSummary(form);
+    form.querySelectorAll('input[type="file"]').forEach(enhanceFileInput);
+    form.addEventListener("submit", function (e) { onSubmit(form, e); });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();
diff --git a/website/tests/test_artifact_admin_upload_guard.py b/website/tests/test_artifact_admin_upload_guard.py
new file mode 100644
index 00000000..bf621959
--- /dev/null
+++ b/website/tests/test_artifact_admin_upload_guard.py
@@ -0,0 +1,55 @@
+"""
+Regression tests for the artifact admin upload guard (issue #248).
+
+The user-facing behavior — blocking a file-losing submit, drag-and-drop — lives
+in ``website/static/website/js/admin_artifact_form.js`` and can't be exercised
+from Python. What we *can* pin here is the server-side contract that JS depends
+on, and which would silently break the whole feature if it regressed:
+
+  1. Every artifact add form (Talk / Poster / Publication) loads the guard's
+     JS and CSS.
+  2. The file inputs carry an ``accept`` attribute derived from the same
+     extension allowlists the server validators enforce — the single source of
+     truth the client-side extension check reads back from the DOM.
+"""
+
+from django.contrib.auth.models import User
+
+from website.tests.base import DatabaseTestCase
+from website.utils.upload_validators import PDF_EXTENSIONS, RAW_FILE_EXTENSIONS
+
+JS_PATH = "website/js/admin_artifact_form.js"
+CSS_PATH = "website/css/admin_artifact_form.css"
+
+PDF_ACCEPT = ",".join("." + e for e in PDF_EXTENSIONS)
+RAW_ACCEPT = ",".join("." + e for e in RAW_FILE_EXTENSIONS)
+
+
+class ArtifactAdminUploadGuardTests(DatabaseTestCase):
+    def setUp(self):
+        User.objects.create_superuser("guard_admin", "g@example.com", "pw12345!")
+        self.client.login(username="guard_admin", password="pw12345!")
+
+    def _get_add_form(self, model):
+        resp = self.client.get(f"/admin/website/{model}/add/")
+        self.assertEqual(resp.status_code, 200)
+        return resp.content.decode()
+
+    def test_assets_loaded_on_all_artifact_add_forms(self):
+        for model in ("talk", "poster", "publication"):
+            html = self._get_add_form(model)
+            self.assertIn(JS_PATH, html, f"{model} add form is missing the guard JS")
+            self.assertIn(CSS_PATH, html, f"{model} add form is missing the guard CSS")
+
+    def test_pdf_file_accept_matches_validator_allowlist(self):
+        for model in ("talk", "poster", "publication"):
+            html = self._get_add_form(model)
+            self.assertIn(f'accept="{PDF_ACCEPT}"', html,
+                          f"{model} pdf_file input is missing the expected accept attribute")
+
+    def test_raw_file_accept_matches_validator_allowlist(self):
+        # Talk and Poster expose raw_file; Publication intentionally does not.
+        for model in ("talk", "poster"):
+            html = self._get_add_form(model)
+            self.assertIn(f'accept="{RAW_ACCEPT}"', html,
+                          f"{model} raw_file input is missing the expected accept attribute")

From 5bf5af0500c51695f3b8dc1b893aa703fc7deedc Mon Sep 17 00:00:00 2001
From: Jon Froehlich <jonf@cs.uw.edu>
Date: Mon, 22 Jun 2026 14:56:33 -0700
Subject: [PATCH 2/2] Redesign artifact upload field as a standard
 drag-and-drop zone (#248)

Follow the conventional file-upload UX (Dropzone/Uppy/GitHub style): hide the
raw native file input (kept focusable + submittable for a11y) and make a single
drop zone the primary control, with idle / hover / drag-over / filled / error
states. The selected file is shown with its name, size, and a Remove/Replace
button, and the field surfaces its accepted types as a quiet hint (read from the
input's accept attribute). Keyboard focus is mirrored onto the zone as a visible
ring; error state pairs an icon-color change with text (never color alone).

No behavior change to the guard or validation: the required-field submit guard,
extension check, and PDF magic-byte check are unchanged; this is presentation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../website/css/admin_artifact_form.css       | 137 +++++++++++----
 .../static/website/js/admin_artifact_form.js  | 156 +++++++++++++-----
 2 files changed, 221 insertions(+), 72 deletions(-)

diff --git a/website/static/website/css/admin_artifact_form.css b/website/static/website/css/admin_artifact_form.css
index 41be8df2..e60ed199 100644
--- a/website/static/website/css/admin_artifact_form.css
+++ b/website/static/website/css/admin_artifact_form.css
@@ -1,60 +1,135 @@
 /*
- * Styles for the artifact (Talk / Poster / Publication) admin upload guard and
- * drag-and-drop. See website/static/website/js/admin_artifact_form.js (issue #248).
+ * Styles for the artifact (Talk / Poster / Publication) admin drag-and-drop
+ * upload zone and the submit guard. See
+ * website/static/website/js/admin_artifact_form.js (issue #248).
  *
  * Accessibility: error state is never signaled by color alone — it always pairs
- * with an outline plus text (the inline message and the top-of-form summary), so
- * it remains perceivable for low-vision and color-blind users (WCAG 2.0 AA).
+ * with an icon-color change plus text (the inline message and the top-of-form
+ * summary), so it stays perceivable for low-vision and color-blind users
+ * (WCAG 2.0 AA). The native file input is visually hidden but kept focusable;
+ * its focus is mirrored onto the zone (`.is-focused`) as a visible ring.
  */
 
-/* --- Drag-and-drop zone (mouse-only enhancement; aria-hidden in the JS) --- */
+/* Visually hide the raw file input while keeping it focusable + submittable. */
+.artifact-file-input-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* --- The drop zone (primary control) --- */
 .artifact-dropzone {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin-top: 6px;
-  padding: 10px 12px;
-  border: 2px dashed #b0b0b0;
-  border-radius: 6px;
-  color: #555;
-  font-size: 12px;
-  text-align: center;
+  padding: 16px 18px;
+  max-width: 520px;
+  border: 2px dashed #b8c4cc;
+  border-radius: 8px;
+  background: #f8fafb;
+  color: #2b3a42;
   cursor: pointer;
-  max-width: 420px;
-  background: #fafafa;
-  transition: border-color 0.12s ease, background-color 0.12s ease;
+  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .artifact-dropzone:hover {
   border-color: #79aec8; /* Django admin accent */
+  background: #f0f6fa;
+}
+
+/* Keyboard focus (mirrored from the hidden native input). */
+.artifact-dropzone.is-focused {
+  outline: 2px solid #417690;
+  outline-offset: 2px;
 }
 
+/* Dragging a file over the zone. */
 .artifact-dropzone-active {
-  border-color: #417690;
   border-style: solid;
-  background: #eef6fb;
-  color: #205067;
+  border-color: #417690;
+  background: #e2f0f8;
+  box-shadow: inset 0 0 0 3px rgba(65, 118, 144, 0.12);
 }
 
-/* --- Per-field readout / error (under each file input) --- */
-.artifact-file-note {
-  margin-top: 4px;
-  font-size: 12px;
+/* Error state (paired with text + icon color below — not color alone). */
+.artifact-dropzone.has-error {
+  border-color: #ba2121;
+  background: #fdf4f4;
 }
 
-.artifact-file-note .artifact-file-name {
-  display: block;
-  color: #2a2a2a;
+.artifact-dropzone-icon {
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  color: #5a7a8a;
 }
 
-.artifact-file-note .artifact-file-error {
-  display: block;
+.artifact-dropzone:hover .artifact-dropzone-icon {
+  color: #417690;
+}
+
+.artifact-dropzone.has-error .artifact-dropzone-icon {
+  color: #ba2121;
+}
+
+.artifact-dropzone-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0; /* allow filename to ellipsize */
+  line-height: 1.3;
+}
+
+.artifact-dropzone-title,
+.artifact-dropzone-filename {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.artifact-dropzone-filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.artifact-dropzone-sub {
   margin-top: 2px;
-  color: #ba2121; /* Django admin error red */
+  font-size: 11px;
+  color: #6a7b85;
+}
+
+.artifact-dropzone.has-error .artifact-dropzone-sub {
+  color: #ba2121;
   font-weight: 600;
 }
 
-/* Invalid control: outline + the accompanying text above (never color alone). */
-.artifact-field-invalid {
-  outline: 2px solid #ba2121;
-  outline-offset: 1px;
+.artifact-dropzone-link {
+  color: #417690;
+  text-decoration: underline;
+}
+
+/* Remove / replace button in the filled state. */
+.artifact-file-remove {
+  flex: 0 0 auto;
+  margin-left: auto;
+  padding: 3px 10px;
+  background: none;
+  border: 1px solid #b8c4cc;
+  border-radius: 4px;
+  color: #444;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.artifact-file-remove:hover {
+  border-color: #ba2121;
+  color: #ba2121;
 }
 
 /* --- Top-of-form error summary --- */
diff --git a/website/static/website/js/admin_artifact_form.js b/website/static/website/js/admin_artifact_form.js
index ad0fb046..4d9cb67a 100644
--- a/website/static/website/js/admin_artifact_form.js
+++ b/website/static/website/js/admin_artifact_form.js
@@ -20,7 +20,15 @@
  *   2. File pre-checks: on selection, validates extension (against the field's
  *      `accept` list) and, for PDF-only fields, the `%PDF-` signature — mirroring
  *      the server validators so a bad file is caught before it costs a round-trip.
- *   3. Drag-and-drop onto each file field, plus a selected-filename readout.
+ *   3. A standard drag-and-drop upload zone per file field: the raw file input is
+ *      hidden (but kept focusable), the zone is the primary control with idle /
+ *      hover / drag-over / filled / error states, and the selected file is shown
+ *      with its name, size, and a Remove/Replace control.
+ *
+ * Accessibility: the native <input type=file> stays in the DOM, focusable, and
+ * keeps its <label> association — it is the control assistive tech uses. The zone
+ * is a mouse/visual layer (aria-hidden); it mirrors the input's focus with a ring
+ * so keyboard users get a visible focus state, and error state is never color-only.
  *
  * Staying in sync with the backend (see also website/utils/upload_validators.py):
  *   - Required-ness is read from the DOM (`[required]`), which Django derives from
@@ -41,6 +49,14 @@
   // _read_header default in upload_validators.py).
   var PDF_HEADER_BYTES = 1024;
 
+  // Inline icons (no external assets / build step). currentColor follows the zone.
+  var UPLOAD_SVG =
+    '<svg class="artifact-dropzone-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<path fill="currentColor" d="M12 3l5.5 5.5-1.42 1.42L13 6.83V16h-2V6.83L8.92 9.92 7.5 8.5 12 3zM5 18h14v2H5z"/></svg>';
+  var FILE_SVG =
+    '<svg class="artifact-dropzone-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
+    '<path fill="currentColor" d="M6 2h7l5 5v15H6V2zm7 1.5V8h4.5L13 3.5z"/></svg>';
+
   /**
    * The main artifact form: the multipart add/change form. Returns null on any
    * other admin page (this script is only loaded on the artifact admins anyway).
@@ -95,6 +111,23 @@
     return dot === -1 ? "" : name.slice(dot + 1).toLowerCase();
   }
 
+  /** Short accepted-types hint from the input's accept list, e.g. "PDF only". */
+  function acceptHint(input) {
+    var exts = allowedExtensions(input);
+    if (!exts.length) return "";
+    if (exts.length === 1) return exts[0].toUpperCase() + " only";
+    return exts.map(function (e) { return e.toUpperCase(); }).join(", ");
+  }
+
+  /** Human-readable file size, e.g. "128 KB" / "3.4 MB". */
+  function humanFileSize(bytes) {
+    if (typeof bytes !== "number") return "";
+    if (bytes < 1024) return bytes + " B";
+    var kb = bytes / 1024;
+    if (kb < 1024) return (kb < 10 ? kb.toFixed(1) : Math.round(kb)) + " KB";
+    return (kb / 1024).toFixed(1) + " MB";
+  }
+
   /**
    * Read the first `numBytes` of a File as a Uint8Array (resolves null on error).
    * @param {File} file
@@ -150,40 +183,51 @@
     return Promise.resolve("");
   }
 
-  // --- DOM helpers for messaging -------------------------------------------
+  // --- Drop-zone rendering --------------------------------------------------
 
-  /** The little per-field readout/error element, created on demand after `input`. */
-  function fieldNote(input) {
-    var note = input.parentNode.querySelector(".artifact-file-note");
-    if (!note) {
-      note = document.createElement("div");
-      note.className = "artifact-file-note";
-      input.parentNode.insertBefore(note, input.nextSibling);
-    }
-    return note;
-  }
+  /**
+   * Paint the drop zone for the current state of its input: a "filled" card
+   * (filename + size + Remove) when a file is selected, otherwise the idle
+   * prompt. `error` (string) puts the zone in its error state. Also records the
+   * validity on the input so the submit guard can read it.
+   * @param {HTMLInputElement} input
+   * @param {string} error
+   */
+  function renderZone(input, error) {
+    var zone = input._artifactZone;
+    var hasFile = input.files && input.files.length > 0;
+    zone.classList.toggle("has-error", !!error);
 
-  /** Show the selected filename and any error under a file input. */
-  function renderFieldNote(input, error) {
-    var note = fieldNote(input);
-    var name = input.files && input.files.length ? input.files[0].name : "";
-    note.innerHTML = "";
-    if (name) {
-      var fn = document.createElement("span");
-      fn.className = "artifact-file-name";
-      fn.textContent = "Selected: " + name;
-      note.appendChild(fn);
-    }
-    if (error) {
-      var err = document.createElement("span");
-      err.className = "artifact-file-error";
-      err.textContent = error;
-      note.appendChild(err);
+    if (hasFile) {
+      var file = input.files[0];
+      var size = humanFileSize(file.size);
+      zone.innerHTML =
+        FILE_SVG +
+        '<span class="artifact-dropzone-copy">' +
+        '  <span class="artifact-dropzone-filename"></span>' +
+        '  <span class="artifact-dropzone-sub"></span>' +
+        '</span>' +
+        '<button type="button" class="artifact-file-remove">Remove</button>';
+      // textContent (not innerHTML) so a crafted filename can't inject markup.
+      zone.querySelector(".artifact-dropzone-filename").textContent = file.name;
+      zone.querySelector(".artifact-dropzone-sub").textContent = error
+        ? error
+        : (size ? size + " · drag or click to replace" : "drag or click to replace");
+    } else {
+      var hint = acceptHint(input);
+      zone.innerHTML =
+        UPLOAD_SVG +
+        '<span class="artifact-dropzone-copy">' +
+        '  <span class="artifact-dropzone-title">Drag &amp; drop a file here</span>' +
+        '  <span class="artifact-dropzone-sub">or <span class="artifact-dropzone-link">click to browse</span>' +
+        (hint ? " · " + hint : "") +
+        '</span></span>';
     }
-    input.classList.toggle("artifact-field-invalid", !!error);
     input.setAttribute("data-artifact-invalid", error ? "true" : "false");
   }
 
+  // --- Error summary (top of form) -----------------------------------------
+
   /** Remove any existing top-of-form error summary. */
   function clearSummary(form) {
     var existing = form.querySelector(".artifact-error-summary");
@@ -217,8 +261,8 @@
         link.textContent = p.label;
         link.addEventListener("click", function (e) {
           e.preventDefault();
+          (p.scrollTo || p.target).scrollIntoView({ behavior: "smooth", block: "center" });
           p.target.focus();
-          p.target.scrollIntoView({ behavior: "smooth", block: "center" });
         });
         li.appendChild(link);
       } else {
@@ -236,18 +280,32 @@
   // --- Wiring --------------------------------------------------------------
 
   /**
-   * Add drag-and-drop + change-time validation + a filename readout to one file
-   * input. The native input stays fully functional and is the accessible control;
-   * the drop zone is a mouse-only visual enhancement (hidden from assistive tech).
+   * Turn one native file input into a standard drag-and-drop upload zone.
+   * The native input is hidden (but kept focusable + submittable); the zone
+   * becomes the visible control. See the file header for the a11y model.
    * @param {HTMLInputElement} input
    */
   function enhanceFileInput(input) {
+    input.classList.add("artifact-file-input-hidden");
+
     var zone = document.createElement("div");
     zone.className = "artifact-dropzone";
     zone.setAttribute("aria-hidden", "true");
-    zone.innerHTML = '<span class="artifact-dropzone-text">Drag a file here</span>';
-    // Clicking the zone opens the same native file picker.
-    zone.addEventListener("click", function () { input.click(); });
+    input._artifactZone = zone;
+    input.parentNode.insertBefore(zone, input.nextSibling);
+
+    // One click handler: the Remove button clears the file; anywhere else in the
+    // zone opens the native picker.
+    zone.addEventListener("click", function (e) {
+      if (e.target.closest(".artifact-file-remove")) {
+        e.preventDefault();
+        input.files = new DataTransfer().files; // clear selection
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+        input.focus();
+        return;
+      }
+      input.click();
+    });
 
     ["dragenter", "dragover"].forEach(function (evt) {
       zone.addEventListener(evt, function (e) {
@@ -267,14 +325,17 @@
       zone.classList.remove("artifact-dropzone-active");
       if (!e.dataTransfer || !e.dataTransfer.files.length) return;
       // Assign the dropped file to the real input via DataTransfer, then fire a
-      // change event so the normal validation/readout path runs.
+      // change event so the normal validation/render path runs.
       var dt = new DataTransfer();
       dt.items.add(e.dataTransfer.files[0]);
       input.files = dt.files;
       input.dispatchEvent(new Event("change", { bubbles: true }));
     });
 
-    input.parentNode.insertBefore(zone, input.nextSibling);
+    // Mirror the (visually hidden) input's focus onto the zone so keyboard users
+    // see a focus ring on the visible control.
+    input.addEventListener("focus", function () { zone.classList.add("is-focused"); });
+    input.addEventListener("blur", function () { zone.classList.remove("is-focused"); });
 
     // validateFile resolves asynchronously (it may read the file's header). If the
     // user picks a second file before the first finished validating, the stale
@@ -284,9 +345,11 @@
     input.addEventListener("change", function () {
       var token = ++changeSeq;
       validateFile(input).then(function (error) {
-        if (token === changeSeq) renderFieldNote(input, error);
+        if (token === changeSeq) renderZone(input, error || "");
       });
     });
+
+    renderZone(input, ""); // initial paint (idle prompt)
   }
 
   /**
@@ -301,13 +364,24 @@
     form.querySelectorAll("[required]").forEach(function (el) {
       if (el.disabled || el.type === "hidden") return;
       if (isEmpty(el)) {
-        problems.push({ label: labelFor(el) + " is required.", target: el });
+        var problem = { label: labelFor(el) + " is required.", target: el };
+        // For a missing required file, flag its zone and scroll to it (the input
+        // itself is visually hidden).
+        if (el.type === "file" && el._artifactZone) {
+          el._artifactZone.classList.add("has-error");
+          problem.scrollTo = el._artifactZone;
+        }
+        problems.push(problem);
       }
     });
 
     form.querySelectorAll('input[type="file"]').forEach(function (input) {
       if (input.getAttribute("data-artifact-invalid") === "true") {
-        problems.push({ label: labelFor(input) + ": please choose a valid file.", target: input });
+        problems.push({
+          label: labelFor(input) + ": please choose a valid file.",
+          target: input,
+          scrollTo: input._artifactZone || input,
+        });
       }
     });