Fix disabled vanity field

web/static/app.js

@@ -108,8 +108,9 @@
     submit.disabled = true;
     progress.hidden = false;
 
-    // FormData follows DOM order, so the token, expiry and vanity fields all
-    // precede the file part, which is exactly what the server requires.
+    // FormData follows markup order, not painted order, so the options and the
+    // token precede the file part exactly as the server requires. The drop
+    // zone only looks like it comes first; see the order rules in style.css.
     var data = new FormData(form);
     var started = Date.now();
 

web/static/style.css

@@ -77,6 +77,14 @@ input[type=text], input[type=password] {
 .row { display: flex; gap: 1rem; flex-wrap: wrap; }
 .row > .field { flex: 1 1 12rem; }
 
+/* The file input has to be the last part in the submitted body, so it sits at
+   the bottom of the form's markup and is lifted back to the top here. Only the
+   painting order moves; the submission order, which the server depends on, is
+   the markup's. */
+#upload { display: flex; flex-direction: column; }
+#upload > .drop { order: -1; }
+#upload > button { align-self: flex-start; }
+
 .drop {
   border: 2px dashed var(--line);
   border-radius: var(--radius);