fix(server): restore multi-file (bulk) upload in the Add Asset modal (#3049)

vpetersson · claude · web-flow · commit bb9da44d02a0 · 2026-06-10T06:45:38.000+02:00
* fix(server): restore multi-file (bulk) upload in the Add Asset modal Multi-file upload (added in #2778 for the React UI) was lost in the #2818 React→Alpine/HTMX rewrite: the file picker accepted a single file only. The assets_upload endpoint already takes one file per POST, so this is a client-only fix. - Add `multiple` to the #add-file input. - Drive the upload from uploadFiles() in home.ts: iterate the selected files and POST them sequentially (one XHR per file) against the existing single-file endpoint, with "X of N" progress. htmx's single-form submit would only ever send the first file, so the file tab is no longer htmx-managed; toasts are replayed from the server's HX-Trigger header by hand. - Single-file uploads still flow through the same path unchanged. Adds an integration test (test_add_multiple_uploads_at_once) that selects two files in one go and asserts both persist. Fixes #3045 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(server): don't clear upload state on closeModal mid-batch Hiding the modal during an in-flight 'sending' upload cleared uploadState, which disarmed uploadFiles()'s re-entry guard and let a reopened modal start a second batch racing the first over the shared progress/index fields. Only reset upload state when nothing is in flight. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(server): surface upload rejections instead of swallowing them assets_upload refused invalid/empty uploads with messages.error + HTTP 200, which the HTMX/XHR path drops silently (the partial carries no toast header) — so the operator saw nothing and the batch uploader counted the rejection as a success. Pass the rejection through _asset_table_response(toast=('error', …)) so it rides the HX-Trigger header on every transport. Client side, uploadOne() now distinguishes 'ok' / 'rejected' (2xx + error toast) / 'error' (transport): a rejected file surfaces its server toast and the batch skips it and keeps going, while a true transport failure aborts. Addresses Copilot review feedback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs(server): update uploadOne comment for the UploadResult return The doc comment still described the old boolean return; it now documents the ok / rejected / error tri-state. Comment-only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs(server): attribute single-file limit to the endpoint, not htmx The comments said htmx "would only ever send the first file", but htmx includes every selected file in the multipart body — the real single-file constraint is assets_upload reading request.FILES.get. Reword both comments. Comment-only. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
diff --git a/src/anthias_server/app/static/src/home.ts b/src/anthias_server/app/static/src/home.ts
@@ -46,6 +46,8 @@ interface HomeAppData {
   uploadState: UploadState
   uploadProgress: number
   uploadFileName: string
+  uploadIndex: number
+  uploadTotal: number
   init(): void
   openAdd(): void
   openEdit(asset: AssetEdit): void
@@ -54,11 +56,17 @@ interface HomeAppData {
   closeModal(): void
   closePreview(): void
   bindFlatpickr(): void
-  onUploadStart(): void
-  onUploadProgress(ev: CustomEvent<ProgressEvent>): void
-  onUploadDone(ev: CustomEvent<{ successful: boolean; xhr: XMLHttpRequest }>): void
+  uploadFiles(input: HTMLInputElement): Promise<void>
+  uploadOne(url: string, csrf: string, file: File): Promise<UploadResult>
 }
 
+// 'ok'       — file accepted and the asset row was created.
+// 'rejected' — server reached, but it refused this file (HTTP 200 +
+//              error toast, e.g. invalid type). The toast already
+//              informed the user; the batch skips it and carries on.
+// 'error'    — transport failure / non-2xx. Aborts the batch.
+type UploadResult = 'ok' | 'rejected' | 'error'
+
 const DATE_FMT_MAP: Record<string, string> = {
   'mm/dd/yyyy': 'm/d/Y',
   'dd/mm/yyyy': 'd/m/Y',
@@ -97,6 +105,8 @@ function homeApp(): HomeAppData {
     uploadState: null,
     uploadProgress: 0,
     uploadFileName: '',
+    uploadIndex: 0,
+    uploadTotal: 0,
 
     init(this: HomeAppData & { $watch: (k: string, cb: () => void) => void }) {
       // Re-bind Flatpickr every time the edit modal opens. The
@@ -190,57 +200,177 @@ function homeApp(): HomeAppData {
       this.pendingDeleteName = name || ''
     },
     closeModal() {
-      // The Hide button stays clickable while the upload bytes are
-      // still going up — that just hides the modal. Once the bytes are
-      // sent and the server is processing, dropping the modal would
-      // strip the form HTMX is still waiting for, so the button is
-      // disabled in the template at that point.
+      // Hiding the modal during an in-flight upload (Hide button, Esc,
+      // backdrop click) must NOT touch the upload state. uploadFiles()
+      // owns uploadState for the whole batch and clears it when the
+      // last file lands; wiping it here mid-batch would disarm the
+      // re-entry guard (a reopened modal could start a second batch
+      // that races the first over the shared progress/index fields)
+      // and tear down the progress UI while files are still uploading.
+      // Only reset when nothing is in flight — by then it's a no-op
+      // anyway.
       this.mode = null
       this.editAsset = null
-      if (this.uploadState !== 'processing') {
-        this.uploadState = null
+      if (!this.uploadState) {
         this.uploadProgress = 0
         this.uploadFileName = ''
+        this.uploadIndex = 0
+        this.uploadTotal = 0
       }
     },
     closePreview() {
       this.previewAsset = null
     },
-    onUploadStart() {
-      this.uploadState = 'sending'
-      this.uploadProgress = 0
-    },
-    onUploadProgress(ev) {
-      const detail = ev.detail
-      if (!detail || !detail.lengthComputable || detail.total === 0) return
-      const pct = Math.min(99, Math.round((detail.loaded / detail.total) * 100))
-      this.uploadProgress = pct
-      // Once bytes hit the server we flip to "processing" — the server
-      // still has to write the file to disk and (for videos) shell out
-      // to ffprobe, which is the longest part of the round-trip.
-      if (detail.loaded >= detail.total) {
-        this.uploadState = 'processing'
+
+    // Multi-file upload (issue #3045). The server's assets_upload
+    // endpoint reads exactly one file per request
+    // (request.FILES.get('file_upload')), so a single htmx form POST —
+    // which would carry every selected file in the multipart body —
+    // would still only create one asset. uploadFiles() instead uploads
+    // the batch sequentially, one XHR (one file) per request. Driving
+    // it from JS (instead of hx-post on the <form>) is also what makes
+    // "X of N" progress and per-file failure handling possible. Mirrors
+    // the pre-#2818 React behaviour added in #2778.
+    async uploadFiles(input: HTMLInputElement) {
+      const files = input.files ? Array.from(input.files) : []
+      const form = input.form
+      // Guard against re-entry: a drop/select while a batch is still
+      // in flight would clobber the progress + index state.
+      if (!files.length || !form || this.uploadState) {
+        input.value = ''
+        return
       }
-    },
-    onUploadDone(ev) {
-      const ok = ev.detail?.successful
-      // Success toast is fired by the server via HX-Trigger so we
-      // don't double up here. The client only owns the failure path
-      // (transport errors that never reach the server) and the
-      // modal-close + state-reset bookkeeping.
+      const url = form.getAttribute('action') || ''
+      const csrf =
+        form.querySelector<HTMLInputElement>(
+          'input[name=csrfmiddlewaretoken]',
+        )?.value || csrfToken()
+
+      this.uploadTotal = files.length
+      let succeeded = 0
+      let aborted = false
+      for (let i = 0; i < files.length; i++) {
+        this.uploadIndex = i + 1
+        this.uploadFileName = files[i].name
+        const result = await this.uploadOne(url, csrf, files[i])
+        if (result === 'error') {
+          // Transport failure — something's wrong with the request
+          // itself, so stop the batch rather than hammering on.
+          aborted = true
+          break
+        }
+        // 'rejected' files already surfaced their own server toast;
+        // skip them and keep uploading the rest of the selection.
+        if (result === 'ok') succeeded += 1
+      }
+
+      // Clear the input so re-selecting the same file(s) fires change
+      // again, then drop the progress UI.
+      input.value = ''
       this.uploadState = null
       this.uploadProgress = 0
-      if (ok) {
-        this.uploadFileName = ''
-        this.mode = null
-      } else {
+      this.uploadFileName = ''
+      this.uploadIndex = 0
+      this.uploadTotal = 0
+
+      if (aborted) {
         const store = window.Alpine.store('toasts') as
           | ToastStoreLike
           | undefined
         store?.push('error', 'Upload failed — check the file and try again')
       }
+      if (succeeded > 0) {
+        this.mode = null
+        // The per-file responses each fan out a WebSocket refresh
+        // nudge, but force one final swap so the new rows land
+        // immediately even when the socket is unavailable.
+        const htmx = (
+          window as unknown as {
+            htmx?: { trigger: (target: string, event: string) => void }
+          }
+        ).htmx
+        htmx?.trigger('body', 'refresh-assets')
+      }
     },
+
+    // POST a single file and resolve an UploadResult: 'ok' on a 2xx
+    // with no error toast, 'rejected' on a 2xx carrying an error toast
+    // (server refused the file), 'error' on a non-2xx or transport
+    // failure. Server toasts ("reading metadata…" / "Uploaded X" /
+    // "Invalid file type") ride back on the HX-Trigger header — we
+    // replay them here since this isn't an htmx-managed request.
+    // Progress flips to "processing" once the bytes are up (the server
+    // still has to write to disk + ffprobe).
+    uploadOne(
+      this: HomeAppData,
+      url: string,
+      csrf: string,
+      file: File,
+    ): Promise<UploadResult> {
+      return new Promise<UploadResult>((resolve) => {
+        const xhr = new XMLHttpRequest()
+        xhr.open('POST', url)
+        xhr.setRequestHeader('X-CSRFToken', csrf)
+        // Mark as an htmx request so assets_upload returns the table
+        // partial (+ HX-Trigger toast) instead of a full-page redirect.
+        xhr.setRequestHeader('HX-Request', 'true')
+        this.uploadState = 'sending'
+        this.uploadProgress = 0
+        xhr.upload.addEventListener('progress', (ev) => {
+          if (!ev.lengthComputable || ev.total === 0) return
+          this.uploadProgress = Math.min(
+            99,
+            Math.round((ev.loaded / ev.total) * 100),
+          )
+          if (ev.loaded >= ev.total) this.uploadState = 'processing'
+        })
+        xhr.addEventListener('load', () => {
+          const kind = fireToastFromHeader(xhr.getResponseHeader('HX-Trigger'))
+          if (xhr.status < 200 || xhr.status >= 300) {
+            resolve('error')
+            return
+          }
+          // The server validates and may refuse a file with a 200 +
+          // error toast (invalid type, missing file). Treat that as a
+          // rejected file, not a silent success.
+          resolve(kind === 'error' ? 'rejected' : 'ok')
+        })
+        xhr.addEventListener('error', () => resolve('error'))
+        xhr.addEventListener('abort', () => resolve('error'))
+        const fd = new FormData()
+        fd.append('csrfmiddlewaretoken', csrf)
+        fd.append('file_upload', file)
+        xhr.send(fd)
+      })
+    },
+  }
+}
+
+// Replay a server HX-Trigger toast payload through the global store
+// and return its kind. htmx does this automatically for hx-* requests;
+// the file-upload path uses raw XHR (see uploadFiles), so we parse it
+// by hand. The returned kind lets uploadOne treat a server-side
+// rejection (HTTP 200 + an error toast — e.g. invalid file type) as a
+// failed file rather than a silent success.
+function fireToastFromHeader(
+  header: string | null,
+): 'success' | 'error' | 'info' | null {
+  if (!header) return null
+  try {
+    const parsed = JSON.parse(header) as {
+      toast?: { kind?: 'success' | 'error' | 'info'; message?: string }
+    }
+    const toast = parsed?.toast
+    if (toast?.message) {
+      const store = window.Alpine.store('toasts') as ToastStoreLike | undefined
+      store?.push(toast.kind || 'info', toast.message)
+      return toast.kind || 'info'
+    }
+  } catch {
+    // Header was a bare event name, not JSON, or carried no toast —
+    // nothing to surface.
   }
+  return null
 }
 
 // Tracks the assets that were `is_processing=true` on the previous
diff --git a/src/anthias_server/app/templates/_asset_modal.html b/src/anthias_server/app/templates/_asset_modal.html
@@ -66,18 +66,21 @@ <h2 x-text="mode === 'edit' ? 'Edit asset' : 'Add asset'"></h2>
         </div>
       </form>
 
+      {% comment %} The file tab is NOT htmx-managed. assets_upload reads
+         one file per request (request.FILES.get('file_upload')), so a
+         single htmx form POST — even though it would carry every
+         selected file in the multipart body — would only ever get one
+         asset created. uploadFiles() in home.ts instead uploads the
+         batch sequentially, one XHR (one file) per request. The action
+         / enctype attributes stay so uploadFiles() can read the endpoint
+         URL off the form and the CSRF token off its input.
+      {% endcomment %}
       <form
         x-show="tab === 'file'"
         method="post"
         action="{% url 'anthias_app:assets_upload' %}"
         enctype="multipart/form-data"
-        hx-post="{% url 'anthias_app:assets_upload' %}"
-        hx-encoding="multipart/form-data"
-        hx-target="#asset-table"
-        hx-swap="outerHTML"
-        @htmx:xhr:loadstart="onUploadStart()"
-        @htmx:xhr:progress="onUploadProgress($event)"
-        @htmx:after-request="onUploadDone($event)"
+        @submit.prevent
       >
         {% csrf_token %}
         <div class="modal-card__body" style="padding-top: 0">
@@ -88,8 +91,8 @@ <h2 x-text="mode === 'edit' ? 'Edit asset' : 'Add asset'"></h2>
             x-show="!uploadState"
           >
             <i class="ti ti-cloud-upload" style="font-size: 2.25rem; opacity: 0.55"></i>
-            <p class="mb-1 font-semibold mt-2">Click to choose a file</p>
-            <p class="muted-label mb-0">Image or video. Upload starts immediately.</p>
+            <p class="mb-1 font-semibold mt-2">Click to choose files</p>
+            <p class="muted-label mb-0">Images or videos. Select one or many — upload starts immediately.</p>
             {% comment %}
               Browser MIME globs cover JPEG/PNG/WebP/GIF/MP4/WebM/MKV out of
               the box. iOS HEIC and TIFF still slip through `image/*` on
@@ -101,19 +104,19 @@ <h2 x-text="mode === 'edit' ? 'Edit asset' : 'Add asset'"></h2>
               H.264/HEVC MP4) makes the wider accept range safe to
               surface here.
             {% endcomment %}
-            <input type="file" class="hidden" id="add-file" name="file_upload"
+            <input type="file" class="hidden" id="add-file" name="file_upload" multiple
               accept="image/*,video/*,.heic,.heif,.tif,.tiff,.bmp,.ico,.tga,.jp2,.j2k,.jpx,.jpc,.jpf,.avif,.mov,.m4v,.mkv,.webm,.avi,.mpg,.mpeg,.ts,.flv"
-              @change="if ($event.target.files.length) { uploadFileName = $event.target.files[0].name; $event.target.form.requestSubmit() }">
+              @change="uploadFiles($event.target)">
           </label>
 
           <div class="upload-progress" x-show="uploadState" x-cloak>
             <div class="upload-progress__head">
               <i class="ti" :class="uploadState === 'sending' ? 'ti-cloud-upload' : 'ti-refresh upload-progress__spin'"></i>
               <div class="upload-progress__text">
                 <p class="m-0 font-semibold" x-text="uploadFileName || 'Uploading…'"></p>
-                <p class="muted-label m-0" x-text="uploadState === 'sending'
+                <p class="muted-label m-0" x-text="(uploadTotal > 1 ? `File ${uploadIndex} of ${uploadTotal} · ` : '') + (uploadState === 'sending'
                   ? `Uploading… ${uploadProgress}%`
-                  : 'Processing on server…'"></p>
+                  : 'Processing on server…')"></p>
               </div>
             </div>
             <div class="upload-progress__bar">
diff --git a/src/anthias_server/app/views.py b/src/anthias_server/app/views.py
@@ -293,8 +293,9 @@ def assets_upload(request: HttpRequest) -> HttpResponse:
 
     file_upload = request.FILES.get('file_upload')
     if file_upload is None or not file_upload.name:
-        messages.error(request, 'No file uploaded.')
-        return _asset_table_response(request)
+        return _asset_table_response(
+            request, toast=('error', 'No file uploaded.')
+        )
 
     upload_name: str = file_upload.name
 
@@ -378,8 +379,10 @@ def assets_upload(request: HttpRequest) -> HttpResponse:
             elif ext in video_exts:
                 file_type = f'video/{ext.lstrip(".")}'
     if file_type.split('/')[0] not in ('image', 'video'):
-        messages.error(request, 'Invalid file type. Expected image or video.')
-        return _asset_table_response(request)
+        return _asset_table_response(
+            request,
+            toast=('error', 'Invalid file type. Expected image or video.'),
+        )
 
     # Operator-friendly display name: 'My_day-2.mp4' → 'My Day 2'.
     # Drops the extension (the row already carries mimetype) and
diff --git a/tests/test_app.py b/tests/test_app.py
