@verbb/formie-browser 1.0.14 → 1.0.16

package/src/js/modules/fields/address-country.ts

@@ -16,7 +16,7 @@ type ComboboxSelect = HTMLSelectElement & {
 
 type AddressCountryOptions = {
     countryPreselectFromIp?: boolean;
-    countryAllowed?: string[];
+    allowedCountryCodes?: string[];
     countryOptionValue?: 'short' | 'full';
     countryFromIpAction?: string;
 };
@@ -33,14 +33,14 @@ function resolveCountrySelectValue(
     return countryCode.toUpperCase();
 }
 
-function isCountryAllowed(countryCode: string, countryAllowed: string[] = []): boolean {
-    if (!countryAllowed.length) {
+function isCountryAllowed(countryCode: string, allowedCountryCodes: string[] = []): boolean {
+    if (!allowedCountryCodes.length) {
         return true;
     }
 
     const upperCode = countryCode.toUpperCase();
 
-    return countryAllowed.some((allowed) => allowed.toUpperCase() === upperCode);
+    return allowedCountryCodes.some((allowed) => allowed.toUpperCase() === upperCode);
 }
 
 function optionExists(select: HTMLSelectElement, value: string): boolean {
@@ -91,7 +91,7 @@ async function preselectCountry(
         return;
     }
 
-    if (!isCountryAllowed(response.countryCode, options.countryAllowed)) {
+    if (!isCountryAllowed(response.countryCode, options.allowedCountryCodes)) {
         debug.log('Detected country is not in the allowed list; skipping preselect.', {
             countryCode: response.countryCode,
         });

package/src/js/modules/fields/address-state.ts

@@ -39,6 +39,7 @@ type AddressStateOptions = {
     inputMode?: string;
     hideWhenUnused?: boolean;
     useSearchable?: boolean;
+    searchableOptionLimit?: number | null;
     useDatalist?: boolean;
     optionLabel?: 'name' | 'short';
     optionValue?: 'name' | 'short';
@@ -58,6 +59,9 @@ type ComboboxSelect = HTMLSelectElement & {
 
 type FieldState = {
     addressRoot: HTMLElement;
+    isCpEdit: boolean;
+    initialCountry: string;
+    initialValue: string;
     stateField: HTMLElement;
     stateControl: AddressStateControl;
     countryControl: HTMLInputElement | HTMLSelectElement | null;
@@ -105,7 +109,8 @@ function getStateControl(field: HTMLElement): AddressStateControl | null {
 }
 
 function getFieldLabel(field: HTMLElement): HTMLElement | null {
-    return field.querySelector('[data-formie-field-label]');
+    return field.querySelector('[data-formie-field-label]')
+        || (field.querySelector('[data-formie-address-state-cp]') ? field.querySelector(':scope > .heading > label') : null);
 }
 
 function dispatchControlEvents(control: AddressStateControl): void {
@@ -130,13 +135,15 @@ function syncComboboxValue(control: AddressStateControl, value: string): void {
 }
 
 function setControlValue(control: AddressStateControl, value: string): void {
-    if (control.value !== value) {
-        control.value = value;
+    const previousValue = control.value;
+    control.value = value;
+    syncComboboxValue(control, control.value);
+
+    // A select rejects values outside its options. Dispatch only actual changes
+    // so an unmatched autofill value cannot recursively trigger reconciliation.
+    if (control.value !== previousValue) {
         dispatchControlEvents(control);
-        return;
     }
-
-    syncComboboxValue(control, value);
 }
 
 function syncAutofillAnchor(fieldState: FieldState, value: string): void {
@@ -181,6 +188,7 @@ function ensureAutofillAnchor(fieldState: FieldState): HTMLInputElement {
         anchor.setAttribute('tabindex', '-1');
         anchor.setAttribute('aria-hidden', 'true');
         anchor.className = 'formie-sr-only';
+        anchor.hidden = fieldState.isCpEdit;
         fieldState.addressRoot.appendChild(anchor);
         fieldState.autofillAnchor = anchor;
     }
@@ -204,14 +212,13 @@ function reconcileAutofillValue(fieldState: FieldState): void {
     }
 
     const subdivisions = fieldState.lastSubdivisions;
-    const resolved = subdivisions.length > 0
-        ? (resolveOptionMatch(pending, subdivisions) || pending)
+    const resolved = fieldState.stateControl instanceof HTMLSelectElement
+        ? (resolveOptionMatch(pending, subdivisions) || '')
         : pending;
 
-    setControlValue(fieldState.stateControl, resolved);
-    syncComboboxValue(fieldState.stateControl, resolved);
     syncAutofillAnchor(fieldState, resolved);
     fieldState.pendingStateValue = resolved;
+    setControlValue(fieldState.stateControl, resolved);
 }
 
 function buildSubdivisionsUrl(action: string, country: string, optionLabel: string, optionValue: string): string {
@@ -320,6 +327,7 @@ function copyControlAttributes(source: AddressStateControl, target: AddressState
         'data-formie-input-type',
         'data-formie-input-error-state',
         'data-formie-address-state-dynamic',
+        'data-formie-address-state-cp',
         'data-formie-address-state-hide-when-unused',
         'data-formie-address-state-use-searchable',
         'data-formie-address-state-use-datalist',
@@ -340,7 +348,7 @@ function copyControlAttributes(source: AddressStateControl, target: AddressState
 }
 
 function applyTextThemeClasses(template: AddressStateControl, input: HTMLInputElement): void {
-    input.className = template.className;
+    input.className = template.hasAttribute('data-formie-address-state-cp') ? 'text fullwidth' : template.className;
 }
 
 function applySelectThemeClasses(template: AddressStateControl, select: HTMLSelectElement): void {
@@ -461,11 +469,16 @@ function setFieldVisibility(fieldState: FieldState, visible: boolean): void {
     const { stateField, stateControl, required } = fieldState;
 
     toggleThemeClasses(stateField, stateField, 'conditionalHidden', !visible);
-    stateField.toggleAttribute('data-formie-conditionally-hidden', !visible);
+    // Use module-owned visibility: the generic hidden attribute unmounts modules,
+    // which would remove the country listener needed to show this field again.
+    stateField.toggleAttribute('data-formie-address-state-hidden', !visible);
+
 
     if (!visible) {
         stateControl.required = false;
-        stateControl.disabled = true;
+        // Keep the empty value in Craft's serialized form data so hiding the
+        // field during initialization does not count as an unsaved edit.
+        stateControl.disabled = !fieldState.isCpEdit;
         return;
     }
 
@@ -479,7 +492,7 @@ function ensureFetchingAnnouncement(fieldState: FieldState): HTMLElement {
     }
 
     const announcement = document.createElement('div');
-    announcement.className = 'formie-sr-only';
+    announcement.className = fieldState.isCpEdit ? 'visually-hidden' : 'formie-sr-only';
     announcement.setAttribute('data-formie-address-state-fetching-announce', 'true');
     announcement.setAttribute('aria-live', 'polite');
     announcement.setAttribute('aria-atomic', 'true');
@@ -509,7 +522,7 @@ function showFetchingUI(fieldState: FieldState): void {
     fieldState.stateControl.setAttribute('tabindex', '-1');
 
     toggleThemeClasses(fieldState.stateField, fieldState.stateField, 'conditionalHidden', false);
-    fieldState.stateField.removeAttribute('data-formie-conditionally-hidden');
+    fieldState.stateField.removeAttribute('data-formie-address-state-hidden');
     fieldState.stateField.setAttribute('data-formie-address-state-skeleton-active', 'true');
 
     const controlWrapper = fieldState.stateField.querySelector('[data-formie-field-control]');
@@ -546,7 +559,7 @@ function updateFieldLabel(stateField: HTMLElement, label: string): void {
         return;
     }
 
-    const required = labelEl.querySelector('[data-formie-field-required]');
+    const required = labelEl.querySelector('[data-formie-field-required], .required');
     labelEl.textContent = label;
 
     if (required) {
@@ -557,22 +570,23 @@ function updateFieldLabel(stateField: HTMLElement, label: string): void {
 function initSearchableSelect(
     select: HTMLSelectElement,
     placeholder: string | null,
+    maxOptions: number | null | undefined,
 ): () => void {
     select.setAttribute('data-formie-combobox-input', 'true');
 
     dispatchFieldEvent(select, 'combobox', 'before-init', {
         select,
-        options: { placeholder },
+        options: { placeholder, maxOptions },
     });
 
     const cleanup = initFormieCombobox(
         select as Parameters<typeof initFormieCombobox>[0],
-        { placeholder },
+        { placeholder, maxOptions },
     );
 
     dispatchFieldEvent(select, 'combobox', 'after-init', {
         combobox: (select as Parameters<typeof initFormieCombobox>[0])._formieTomSelect,
-        options: { placeholder },
+        options: { placeholder, maxOptions },
     });
 
     return cleanup;
@@ -595,6 +609,10 @@ async function applyCountryState(
     const country = fieldState.countryControl?.value?.trim() || '';
     stashPendingStateValue(fieldState);
     const currentValue = getEffectiveStateValue(fieldState);
+    // Opening an existing submission must not discard a historical state value
+    // merely because current country metadata no longer includes it.
+    const preserveStoredValue = fieldState.isCpEdit && !!currentValue
+        && country === fieldState.initialCountry && currentValue === fieldState.initialValue;
     const fetchGeneration = ++fieldState.fetchGeneration;
 
     fieldState.comboboxCleanup?.();
@@ -608,7 +626,7 @@ async function applyCountryState(
 
         hideFetchingUI(fieldState);
 
-        if (hideWhenUnused) {
+        if (hideWhenUnused && !preserveStoredValue) {
             setFieldVisibility(fieldState, false);
             setControlValue(fieldState.stateControl, '');
             syncAutofillAnchor(fieldState, '');
@@ -623,7 +641,7 @@ async function applyCountryState(
             const textControl = createTextControl(fieldState.stateControl, currentValue);
             fieldState.stateControl = replaceControl(fieldState.stateControl, textControl);
         } else {
-            fieldState.stateControl.disabled = true;
+            fieldState.stateControl.disabled = !fieldState.isCpEdit && !preserveStoredValue;
             fieldState.stateControl.placeholder = placeholder || fieldState.stateControl.placeholder;
         }
 
@@ -644,14 +662,17 @@ async function applyCountryState(
         return;
     }
 
-    const subdivisions = response?.subdivisions || [];
+    const subdivisions = [...(response?.subdivisions || [])];
+    if (preserveStoredValue && subdivisions.length && !resolveOptionMatch(currentValue, subdivisions)) {
+        subdivisions.push({ label: currentValue, value: currentValue });
+    }
     const administrativeAreaUsed = response?.administrativeAreaUsed ?? true;
     const administrativeAreaLabel = response?.administrativeAreaLabel || 'State / Province';
     fieldState.lastSubdivisions = subdivisions;
 
     hideFetchingUI(fieldState);
 
-    if (hideWhenUnused && !administrativeAreaUsed) {
+    if (hideWhenUnused && !administrativeAreaUsed && !preserveStoredValue) {
         setFieldVisibility(fieldState, false);
         setControlValue(fieldState.stateControl, '');
         syncAutofillAnchor(fieldState, '');
@@ -675,7 +696,7 @@ async function applyCountryState(
         }
 
         if (useSearchable) {
-            fieldState.comboboxCleanup = initSearchableSelect(select, placeholder);
+            fieldState.comboboxCleanup = initSearchableSelect(select, placeholder, options.searchableOptionLimit);
         } else {
             select.removeAttribute('data-formie-combobox-input');
         }
@@ -755,6 +776,9 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
 
     const fieldState: FieldState = {
         addressRoot,
+        isCpEdit: stateControl.hasAttribute('data-formie-address-state-cp'),
+        initialCountry: getCountryControl(addressRoot)?.value?.trim() || '',
+        initialValue: stateControl.value?.trim() || '',
         stateField: field,
         stateControl,
         countryControl: getCountryControl(addressRoot),
@@ -772,6 +796,10 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
         lastSubdivisions: [],
     };
 
+    const initialStateValue = stateControl.value;
+    const form = field.closest('form');
+    let disposed = false;
+    let resetTimer: number | null = null;
     ensureAutofillAnchor(fieldState);
 
     const refresh = (force = false) => {
@@ -830,6 +858,7 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
 
         if (isStateControl && !isAnchor) {
             syncAutofillAnchor(fieldState, target.value);
+            fieldState.pendingStateValue = target.value;
         }
 
         stashPendingStateValue(fieldState);
@@ -891,12 +920,31 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
         syncAutofillAnchor(fieldState, stateValue);
 
         void applyCountryState(fieldState, options).then(() => {
-            setControlValue(fieldState.stateControl, stateValue);
-            syncComboboxValue(fieldState.stateControl, stateValue);
+            // Keep the normalized option value, which may differ from a provider's
+            // abbreviation (for example "CA" when options store "California").
+            reconcileAutofillValue(fieldState);
             fieldState.lastCountry = fieldState.countryControl?.value?.trim() || '';
         });
     };
 
+    const onReset = (event: Event) => {
+        if (resetTimer !== null) window.clearTimeout(resetTimer);
+        // Enhanced selects finish their own reset in microtasks. Rebuild the
+        // dependent options after those controls have restored the country.
+        resetTimer = window.setTimeout(() => {
+            resetTimer = null;
+            if (event.defaultPrevented || disposed) return;
+            clearScheduledAutofillTimers(fieldState);
+            // The current select may contain another country's options. Keep the
+            // original value pending until the reset country's options are ready.
+            fieldState.stateControl.value = '';
+            fieldState.pendingStateValue = initialStateValue;
+            syncAutofillAnchor(fieldState, initialStateValue);
+            refresh(true);
+        }, 0);
+    };
+    form?.addEventListener('reset', onReset);
+
     fieldState.countryControl?.addEventListener('change', onCountryChange);
     fieldState.countryControl?.addEventListener('input', onCountryChange);
     addressRoot.addEventListener('input', onAddressInput);
@@ -907,10 +955,15 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
     addressRoot.addEventListener('formie:address:loqate:populate', onProviderPopulate);
     addressRoot.addEventListener('formie:address:place-kit:populate', onProviderPopulate);
 
-    refresh();
+    // Apply the empty-country visibility state on first mount as well.
+    refresh(true);
     scheduleAutofillSweep(fieldState, options);
 
     return () => {
+        disposed = true;
+        if (resetTimer !== null) window.clearTimeout(resetTimer);
+        fieldState.fetchGeneration++;
+        form?.removeEventListener('reset', onReset);
         clearScheduledAutofillTimers(fieldState);
         hideFetchingUI(fieldState);
         fieldState.skeletonEl?.remove();

package/src/js/modules/fields/combobox.ts

@@ -6,6 +6,8 @@ import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/sh
 import { ensureModuleStyles } from '#modules/styles';
 import { getThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
+import { t } from '#utils/i18n';
+import { VALIDATION_SKIP_ATTR } from '#validation/skip';
 
 const SELECT_SELECTOR = 'select[data-formie-combobox-input]';
 const MODULE_ID = 'combobox';
@@ -20,6 +22,8 @@ const NATIVE_THEME_CLASSES = [
 
 export type FormieComboboxOptions = {
     multiple?: boolean;
+    maxOptions?: number | null;
+    allowClear?: boolean;
     placeholder?: string | null;
 };
 
@@ -86,8 +90,23 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
 
     const mergedOptions: Record<string, unknown> = {
         create: false,
+        // Limit rendered results while retaining the full option list for searching.
+        maxOptions: options.maxOptions === undefined ? 100 : options.maxOptions,
         maxItems: multiple ? null : 1,
-        plugins: multiple ? ['remove_button'] : [],
+        plugins: multiple ? ['remove_button'] : options.allowClear ? {
+            remove_button: {
+                // Use a native button so clearing a single answer works with keyboard input too.
+                html: () => {
+                    const button = document.createElement('button');
+                    button.type = 'button';
+                    button.className = 'remove';
+                    button.title = t('Clear selection');
+                    button.setAttribute('aria-label', button.title);
+                    button.textContent = '×';
+                    return button;
+                },
+            },
+        } : [],
         hideSelected: multiple ? true : null,
         clearAfterSelect: multiple,
         closeAfterSelect: !multiple,
@@ -116,6 +135,8 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     });
 
     const instance = new TomSelect(select, mergedOptions) as TomSelectInstance;
+    // The search query is temporary; the native select carries the field value.
+    instance.control_input.setAttribute(VALIDATION_SKIP_ATTR, '');
     removeEmptyOptionFromCombobox(instance);
     cleanLeakedThemeClasses(instance.wrapper, select);
 

package/src/js/modules/fields/conditions/effects.ts

@@ -47,9 +47,10 @@ function clearConditionNodeValues(node: Element): void {
 }
 
 function setVisibilityState(node: Element, hidden: boolean): boolean {
-    const isPage = node.hasAttribute('data-formie-page');
-    const hiddenAttr = isPage ? PAGE_HIDDEN_ATTR : CONDITIONAL_HIDDEN_ATTR;
-    const hiddenClasses = getThemeClasses(node, isPage ? 'pageHidden' : 'conditionalHidden');
+    // Navigation owns page-hidden. A matching condition must not reveal an
+    // inactive page, or clear its values just because the visitor moved on.
+    const hiddenAttr = CONDITIONAL_HIDDEN_ATTR;
+    const hiddenClasses = getThemeClasses(node, 'conditionalHidden');
     const wasHidden = node.hasAttribute(hiddenAttr);
 
     if (hidden) {
@@ -190,9 +191,7 @@ function clearCpMutedState(node: Element): void {
 
 function clearHideState(node: Element): void {
     node.removeAttribute(CONDITIONAL_HIDDEN_ATTR);
-    node.removeAttribute(PAGE_HIDDEN_ATTR);
     node.classList.remove(...getThemeClasses(node, 'conditionalHidden'));
-    node.classList.remove(...getThemeClasses(node, 'pageHidden'));
 }
 
 function syncAncestorRows(node: Element): void {

package/src/js/modules/fields/conditions.ts

@@ -10,6 +10,7 @@ import {
 import type { ConditionEntry, ConditionInput } from '#modules/fields/conditions/types';
 import { getConditionInputEventNames } from '#modules/fields/conditions/values';
 import { createDebug } from '#utils/debug';
+import { getFormStateEventName } from '#utils/event-names';
 
 const debug = createDebug('conditions');
 
@@ -212,8 +213,13 @@ export const conditionsModule: BrowserModuleDefinition = {
                 };
 
                 ctx.form.addEventListener('reset', resetHandler);
+                // Canonical resets have already restored values. Settle conditions
+                // before the unload guard captures the form's new clean state.
+                const stateResetEvent = getFormStateEventName('reset');
+                ctx.form.addEventListener(stateResetEvent, evaluateAll);
                 sourceUnbinds.push(() => {
                     ctx.form?.removeEventListener('reset', resetHandler);
+                    ctx.form?.removeEventListener(stateResetEvent, evaluateAll);
                 });
 
                 // CP status menu (etc.) updates `data-formie-submission` and fires this event.
@@ -294,6 +300,9 @@ export const conditionsModule: BrowserModuleDefinition = {
         });
 
         rebuild();
+        // Initial visibility and disabled state belong to module setup. Finish
+        // them before the form captures its clean baseline or announces readiness.
+        evaluateAll();
 
         await ctx.emit('formie:module:conditions:init', {
             count: entries.length,

package/src/js/modules/fields/date-picker.ts

@@ -90,8 +90,9 @@ function normalizeOffsetDate(input: string | null | undefined, type: 'min' | 'ma
         return null;
     }
 
-    if (!Number.isNaN(Date.parse(input))) {
-        return new Date(input);
+    const absoluteDate = parseSubmissionDate(input);
+    if (absoluteDate) {
+        return absoluteDate;
     }
 
     // Form config may express relative min/max bounds like "+2 weeks", which are
@@ -209,7 +210,9 @@ function formatSubmissionDate(date: Date, options: DatePickerOptions): string {
 }
 
 function parseSubmissionDate(value: string): Date | null {
-    const parsed = new Date(value);
+    // Date-only field values represent a local calendar day. JavaScript otherwise
+    // parses YYYY-MM-DD as UTC and shifts the picker to yesterday west of UTC.
+    const parsed = new Date(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
 
     if (Number.isNaN(parsed.getTime())) {
         return null;

package/src/js/modules/fields/file-upload.ts

@@ -3,6 +3,7 @@ import fileUploadCss from '#theme-css/fields/_file.css?inline';
 import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { appendFormCsrfToFormData } from '#utils/csrf';
 import { getFieldModuleEventName, getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
 import { requestJson } from '#utils/http';
 
@@ -30,6 +31,9 @@ type UploadedAsset = {
     assetId: number | null;
     filename: string;
     url?: string | null;
+    uploadUid?: string | null;
+    attachToken?: string | null;
+    viewToken?: string | null;
 };
 
 type FileUploadHydrateResponse = {
@@ -151,6 +155,9 @@ function normalizeUploadedAsset(candidate: unknown): UploadedAsset | null {
         assetId,
         filename,
         url,
+        uploadUid: toTrimmedString(candidate.uploadUid) || null,
+        attachToken: toTrimmedString(candidate.attachToken) || null,
+        viewToken: toTrimmedString(candidate.viewToken ?? candidate.uploadToken) || null,
     };
 }
 
@@ -190,6 +197,9 @@ function readUploadedAssetsFromHiddenInputs(field: HTMLElement, input: HTMLInput
         return {
             assetId: toPositiveInt(hiddenInput.getAttribute(HIDDEN_INPUT_VALUE_ATTR)) ?? toPositiveInt(hiddenInput.value),
             filename: '',
+            viewToken: hiddenInput.getAttribute('data-formie-file-upload-token'),
+            uploadUid: hiddenInput.name.endsWith('[uploadUid]') ? hiddenInput.value : null,
+            attachToken: getHiddenInputs(field).find((entry) => entry.name === hiddenInput.name.replace(/\[uploadUid\]$/, '[attachToken]'))?.value,
         };
     }).filter((asset) => {
         return asset.assetId !== null;
@@ -203,6 +213,7 @@ function mergeUploadedAssets(assetIds: UploadedAsset[], summaryItems: UploadedAs
 
     return assetIds.map((asset, index) => {
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: summaryItems[index]?.filename || '',
         };
@@ -248,8 +259,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMinLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -266,8 +277,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMaxLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -366,12 +377,26 @@ function updateUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement,
 
         const hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
-        hiddenInput.name = `${baseName}[${index}][assetId]`;
-        hiddenInput.value = String(asset.assetId);
+        const hasCapability = asset.uploadUid && asset.attachToken;
+        hiddenInput.name = `${baseName}[${index}][${hasCapability ? 'uploadUid' : 'assetId'}]`;
+        hiddenInput.value = hasCapability ? asset.uploadUid! : String(asset.assetId);
         hiddenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
         hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, String(asset.assetId));
+        if (asset.viewToken) {
+            hiddenInput.setAttribute('data-formie-file-upload-token', asset.viewToken);
+        }
         insertionPoint.insertAdjacentElement('afterend', hiddenInput);
         insertionPoint = hiddenInput;
+
+        if (hasCapability) {
+            const tokenInput = document.createElement('input');
+            tokenInput.type = 'hidden';
+            tokenInput.name = `${baseName}[${index}][attachToken]`;
+            tokenInput.value = asset.attachToken!;
+            tokenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+            insertionPoint.insertAdjacentElement('afterend', tokenInput);
+            insertionPoint = tokenInput;
+        }
     });
 
     input.value = '';
@@ -391,7 +416,7 @@ function getFormHandle(form: HTMLFormElement | null): string {
     return form.getAttribute('data-formie-handle')?.trim() || '';
 }
 
-function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assetIds: number[]): FormData {
+function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assets: UploadedAsset[]): FormData {
     const form = input.form;
     const body = new FormData();
     const handle = getFormHandle(form);
@@ -405,16 +430,27 @@ function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, asset
         body.append('fieldHandle', fieldHandle);
     }
 
-    const submissionUidInput = form?.querySelector('input[name="submissionUid"]');
+    const passthroughNames = ['submissionUid', 'resumeToken', 'submissionEditToken', 'siteId', 'renderId', 'draftContext', 'draftContextToken'] as const;
 
-    if (submissionUidInput instanceof HTMLInputElement && submissionUidInput.value.trim()) {
-        body.append('submissionUid', submissionUidInput.value.trim());
-    }
+    passthroughNames.forEach((name) => {
+        const contextInput = form?.querySelector(`input[name="${name}"]`);
+
+        if (contextInput instanceof HTMLInputElement && contextInput.value.trim()) {
+            body.append(name, contextInput.value.trim());
+        }
+    });
 
-    assetIds.forEach((assetId) => {
-        body.append('assetIds[]', String(assetId));
+    assets.forEach((asset) => {
+        if (asset.assetId) {
+            body.append('assetIds[]', String(asset.assetId));
+            if (asset.viewToken) {
+                body.append(`uploadTokens[${asset.assetId}]`, asset.viewToken);
+            }
+        }
     });
 
+    appendFormCsrfToFormData(body, form);
+
     return body;
 }
 
@@ -433,7 +469,7 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
     const response = await requestJson<FileUploadHydrateResponse>(hydrateEndpoint, {
         profile: field.closest('form')?.dataset.formieRequestProfile as import('@verbb/formie-core').BrowserRequestOptions['profile'],
         method: 'POST',
-        body: buildHydrateFormData(field, input, assetIds),
+        body: buildHydrateFormData(field, input, uploadedAssets),
     });
     const hydratedAssets = normalizeUploadedAssets(response.assets);
 
@@ -452,6 +488,7 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
 
         const hydratedAsset = hydratedMap.get(asset.assetId)!;
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: hydratedAsset.filename || asset.filename,
             url: hydratedAsset.url ?? asset.url,
@@ -480,24 +517,24 @@ function getUploadedAssetsFromEvent(event: Event, matcher: FileUploadEventMatche
 
     if (detailInputKey !== '' && detailInputKey === matcher.inputKey) {
         matchedByInputKey = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailInputName !== '' && detailInputName === matcher.inputName) {
         matchedByInputName = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailFieldHandle === matcher.fieldHandle) {
         matchedByFieldHandle = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (nestedData) {
         const nestedAssetCandidates = [
+            nestedData.uploadedAssets,
             nestedData.assets,
             nestedData.assetIds,
-            nestedData.uploadedAssets,
             nestedData.data,
         ];