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);

web/templates/index.html

@@ -6,10 +6,10 @@
 <form id="upload" class="card" method="post" action="{{.Base}}api/upload"
       enctype="multipart/form-data" data-max-size="{{.MaxSizeBytes}}">
 
-  <div class="drop" id="drop">
-    <input type="file" name="file" id="file" required>
-    <p class="hint" id="drop-hint">Choose a file, or drop one here.</p>
-  </div>
+  <!-- Field order is load-bearing: the server streams this body rather than
+       spooling it, so every option and the token have to arrive before the
+       file part does. The drop zone is lifted back to the top of the card with
+       CSS order, which changes what is seen without changing what is sent. -->
 
   <div class="row">
     <label class="field">
@@ -19,7 +19,7 @@
     <label class="field">
       <span>Custom name <em>({{if .AllowVanity}}optional{{else}}needs a token{{end}})</em></span>
       <input type="text" name="vanity" id="vanity" placeholder="auto" autocomplete="off"
-             pattern="[A-Za-z0-9][A-Za-z0-9._-]{1,63}"{{if not .AllowVanity}} disabled{{end}}>
+             pattern="[A-Za-z0-9][A-Za-z0-9._-]{1,63}">
     </label>
   </div>
 
@@ -35,6 +35,11 @@
     </label>
   </details>
 
+  <div class="drop" id="drop">
+    <input type="file" name="file" id="file" required>
+    <p class="hint" id="drop-hint">Choose a file, or drop one here.</p>
+  </div>
+
   <div class="progress" id="progress" hidden>
     <div class="bar"><div class="fill" id="bar-fill"></div></div>
     <p class="hint" id="progress-text"></p>