@verbb/formie-browser 1.0.12 → 1.0.14

package/src/js/modules/fields/survey-rank.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
@@ -183,6 +183,8 @@ function bindRankField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const initialItems = getRankItems(list);
+    const form = field.closest('form');
     let draggedItem: HTMLElement | null = null;
     let placeholder: HTMLElement | null = null;
     let ghostStyleSnapshot: GhostStyleSnapshot | null = null;
@@ -325,9 +327,23 @@ function bindRankField(field: HTMLElement): () => void {
         });
     });
 
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onPointerUp);
+                document.removeEventListener('pointercancel', onPointerUp);
+                finishDrag();
+                initialItems.forEach((item) => list.appendChild(item));
+                syncRankInputs(list);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
     syncRankInputs(list);
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         document.removeEventListener('pointermove', onPointerMove);
         document.removeEventListener('pointerup', onPointerUp);
         document.removeEventListener('pointercancel', onPointerUp);
@@ -338,8 +354,10 @@ function bindRankField(field: HTMLElement): () => void {
     };
 }
 
-export const surveyRankModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyRankModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/survey-rating.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
@@ -124,9 +124,21 @@ function bindRatingField(field: HTMLElement): () => void {
         });
     });
 
+    const form = field.closest('form');
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                clearHover();
+                getRatingInputs(stars).forEach((input) => input.removeAttribute(PRESSED_WHILE_CHECKED));
+                updateRatingValue(stars);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
     updateRatingValue(stars);
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         cleanups.forEach((cleanup) => {
             cleanup();
         });
@@ -135,8 +147,10 @@ function bindRatingField(field: HTMLElement): () => void {
     };
 }
 
-export const surveyRatingModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyRatingModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

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

@@ -1,6 +1,6 @@
 import tableCss from '#theme-css/fields/_table.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { sleep } from '#utils/async';
@@ -156,8 +156,10 @@ function bindTableField(field: HTMLElement, options: TableOptions): () => void {
     };
 }
 
-export const tableModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const tableModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/text-limit.ts

@@ -2,7 +2,7 @@ import textLimitCss from '#theme-css/fields/_text-limit.css?inline';
 
 import { getTextLimitMetrics } from '@verbb/formie-core';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { t } from '#utils/i18n';
@@ -282,8 +282,10 @@ function updateCounter(input: HTMLInputElement | HTMLTextAreaElement): void {
     }
 }
 
-export const textLimitModule: FormieModuleDefinition = {
-    id: 'text-limit',
+export const textLimitModule: BrowserModuleDefinition = {
+    moduleId: 'formie:text-limit',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

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

@@ -1,11 +1,14 @@
+import { browserRequestHeaders, type BrowserRequestOptions } from '@verbb/formie-core';
 import Uppy from '@uppy/core';
 import XHRUpload from '@uppy/xhr-upload';
 import uploadManagerCss from '#theme-css/fields/_upload-manager.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { getFieldModuleEventName, getFormStateEventName } from '#utils/event-names';
+import { applyFormCsrfToRecord, appendFormCsrfToFormData, getFormCsrfToken } from '#utils/csrf';
+import { fieldKeyToInputName } from '#utils/field-references';
 import { requestJson } from '#utils/http';
 import { createDebug } from '#utils/debug';
 
@@ -20,6 +23,8 @@ const SORT_UP_SELECTOR = '[data-formie-upload-manager-sort="up"]';
 const SORT_DOWN_SELECTOR = '[data-formie-upload-manager-sort="down"]';
 const HIDDEN_INPUT_ANCHOR_ATTR = 'data-formie-file-upload-anchor';
 const HIDDEN_INPUT_VALUE_ATTR = 'data-formie-file-upload-asset-id';
+const HIDDEN_INPUT_TOKEN_ATTR = 'data-formie-file-upload-token';
+const HIDDEN_INPUT_ENTRY_ATTR = 'data-formie-file-upload-entry';
 const FORM_RESET_EVENT = getFormStateEventName('reset');
 const REPEATER_INIT_ROW_EVENT = getFieldModuleEventName('repeater', 'init-row');
 const MODULE_ID = 'upload-manager';
@@ -49,6 +54,10 @@ type UploadResponse = {
     assetId?: number;
     filename?: string;
     url?: string | null;
+    uploadToken?: string | null;
+    deleteToken?: string | null;
+    uploadUid?: string | null;
+    attachToken?: string | null;
     errors?: Record<string, string[]>;
 };
 
@@ -62,11 +71,19 @@ type HydrateResponse = {
         assetId?: number;
         filename?: string;
         url?: string | null;
+        uploadToken?: string | null;
+        deleteToken?: string | null;
+        uploadUid?: string | null;
+        attachToken?: string | null;
     }>;
 };
 
 type ManagedFile = {
     assetId: number | null;
+    uploadToken: string | null;
+    deleteToken?: string | null;
+    uploadUid: string | null;
+    attachToken: string | null;
     filename: string;
     uppyFileId: string | null;
     listItem: HTMLElement;
@@ -144,33 +161,85 @@ function getAnchorInput(field: HTMLElement, assetInputName: string): HTMLInputEl
 
 function getUploadedAssetInputs(field: HTMLElement, assetInputName: string): HTMLInputElement[] {
     return getHiddenInputs(field).filter((hiddenInput) => {
-        return hiddenInput.name === assetInputName && hiddenInput.value.trim() !== '';
+        return hiddenInput.hasAttribute(HIDDEN_INPUT_VALUE_ATTR)
+            || (hiddenInput.name === assetInputName && hiddenInput.value.trim() !== '');
     });
 }
 
 function readAssetIdsFromDom(field: HTMLElement, assetInputName: string): number[] {
     return getUploadedAssetInputs(field, assetInputName).map((input) => {
-        return toPositiveInt(input.value);
+        return toPositiveInt(input.getAttribute(HIDDEN_INPUT_VALUE_ATTR)) ?? toPositiveInt(input.value);
     }).filter((assetId): assetId is number => {
         return assetId !== null;
     });
 }
 
-function syncHiddenAssetInputs(field: HTMLElement, anchorInput: HTMLInputElement, assetInputName: string, assetIds: number[]): void {
+function readUploadTokensFromDom(field: HTMLElement, assetInputName: string): Record<number, string> {
+    const tokens: Record<number, string> = {};
+
+    getUploadedAssetInputs(field, assetInputName).forEach((input) => {
+        const assetId = toPositiveInt(input.getAttribute(HIDDEN_INPUT_VALUE_ATTR)) ?? toPositiveInt(input.value);
+        const token = input.getAttribute(HIDDEN_INPUT_TOKEN_ATTR)?.trim() || '';
+
+        if (assetId && token) {
+            tokens[assetId] = token;
+        }
+    });
+
+    return tokens;
+}
+
+function syncHiddenAssetInputs(
+    field: HTMLElement,
+    anchorInput: HTMLInputElement,
+    assetInputName: string,
+    assets: Array<{
+        assetId: number;
+        uploadToken: string | null;
+        uploadUid: string | null;
+        attachToken: string | null;
+    }>,
+): void {
     let insertionPoint: HTMLInputElement = anchorInput;
+    const baseName = assetInputName.endsWith('[]') ? assetInputName.slice(0, -2) : assetInputName;
 
-    getUploadedAssetInputs(field, assetInputName).forEach((hiddenInput) => {
+    getHiddenInputs(field).filter((hiddenInput) => {
+        return hiddenInput.hasAttribute(HIDDEN_INPUT_ENTRY_ATTR)
+            || (hiddenInput.name === assetInputName && hiddenInput.value.trim() !== '');
+    }).forEach((hiddenInput) => {
         hiddenInput.remove();
     });
 
-    assetIds.forEach((assetId) => {
-        const hiddenInput = document.createElement('input');
-        hiddenInput.type = 'hidden';
-        hiddenInput.name = assetInputName;
-        hiddenInput.value = String(assetId);
-        hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, 'true');
-        insertionPoint.insertAdjacentElement('afterend', hiddenInput);
-        insertionPoint = hiddenInput;
+    assets.forEach(({ assetId, uploadToken, uploadUid, attachToken }, index) => {
+        const primaryInput = document.createElement('input');
+        primaryInput.type = 'hidden';
+        primaryInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+        primaryInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, String(assetId));
+
+        if (uploadUid && attachToken) {
+            primaryInput.name = `${baseName}[${index}][uploadUid]`;
+            primaryInput.value = uploadUid;
+        } else {
+            primaryInput.name = `${baseName}[${index}][assetId]`;
+            primaryInput.value = String(assetId);
+        }
+
+        if (uploadToken) {
+            primaryInput.setAttribute(HIDDEN_INPUT_TOKEN_ATTR, uploadToken);
+        }
+
+        insertionPoint.insertAdjacentElement('afterend', primaryInput);
+        insertionPoint = primaryInput;
+
+        if (uploadUid && attachToken) {
+            const capabilityInput = document.createElement('input');
+            capabilityInput.type = 'hidden';
+            capabilityInput.name = `${baseName}[${index}][attachToken]`;
+            capabilityInput.value = attachToken;
+            capabilityInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+            insertionPoint.insertAdjacentElement('afterend', capabilityInput);
+            insertionPoint = capabilityInput;
+        }
     });
 }
 
@@ -189,7 +258,7 @@ function getUploadContext(form: HTMLFormElement | null, field: HTMLElement, drop
         return context;
     }
 
-    const passthroughNames = ['renderId', 'draftContextToken', 'draftContext', 'submissionId'] as const;
+    const passthroughNames = ['renderId', 'draftContextToken', 'draftContext', 'submissionId', 'siteId', 'submissionEditToken', 'resumeToken', 'submissionUid', 'uploadCreateToken'] as const;
 
     passthroughNames.forEach((name) => {
         const input = form.querySelector(`input[name="${name}"]`);
@@ -199,16 +268,18 @@ function getUploadContext(form: HTMLFormElement | null, field: HTMLElement, drop
         }
     });
 
-    const csrfInput = form.querySelector('input[name="CRAFT_CSRF_TOKEN"]');
-
-    if (csrfInput instanceof HTMLInputElement && csrfInput.value.trim()) {
-        context.CRAFT_CSRF_TOKEN = csrfInput.value.trim();
-    }
+    // Honour custom Craft csrfTokenName values from the rendered form.
+    applyFormCsrfToRecord(context, form);
 
     return context;
 }
 
-function buildHydrateFormData(form: HTMLFormElement | null, field: HTMLElement, assetIds: number[]): FormData {
+function buildHydrateFormData(
+    form: HTMLFormElement | null,
+    field: HTMLElement,
+    assetIds: number[],
+    uploadTokens: Record<number, string> = {},
+): FormData {
     const body = new FormData();
     const handle = getFormHandle(form);
     const fieldHandle = getFieldHandle(field);
@@ -221,16 +292,28 @@ function buildHydrateFormData(form: HTMLFormElement | null, field: HTMLElement,
         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 input = form?.querySelector(`input[name="${name}"]`);
+
+        if (input instanceof HTMLInputElement && input.value.trim()) {
+            body.append(name, input.value.trim());
+        }
+    });
 
     assetIds.forEach((assetId) => {
         body.append('assetIds[]', String(assetId));
+
+        const token = uploadTokens[assetId];
+
+        if (token) {
+            body.append(`uploadTokens[${assetId}]`, token);
+        }
     });
 
+    appendFormCsrfToFormData(body, form);
+
     return body;
 }
 
@@ -524,17 +607,20 @@ function createListItem(field: HTMLElement, filename: string): {
 }
 
 function getAssetInputName(field: HTMLElement): string {
-    const existingAssetInput = getHiddenInputs(field).find((input) => {
-        return input.hasAttribute(HIDDEN_INPUT_VALUE_ATTR);
+    // Prefer the template anchor name — nested Group/Repeater fields use
+    // `fields[group][upload][]`, not a dotted `fields[group.upload][]`.
+    const anchorInput = getHiddenInputs(field).find((input) => {
+        return input.hasAttribute(HIDDEN_INPUT_ANCHOR_ATTR);
     });
 
-    if (existingAssetInput?.name) {
-        return existingAssetInput.name;
+    if (anchorInput?.name) {
+        return anchorInput.name.endsWith('[]') ? anchorInput.name : `${anchorInput.name}[]`;
     }
 
     const fieldHandle = getFieldHandle(field);
+    const inputName = fieldHandle ? fieldKeyToInputName(fieldHandle) : '';
 
-    return fieldHandle ? `fields[${fieldHandle}][]` : 'fields[fileUpload][]';
+    return inputName ? `${inputName}[]` : 'fields[fileUpload][]';
 }
 
 function countManagedAssets(state: UploadManagerState): number {
@@ -544,27 +630,31 @@ function countManagedAssets(state: UploadManagerState): number {
 }
 
 function syncUploadedAssetsEvent(state: UploadManagerState): void {
-    const assetIds = state.files.map((file) => {
-        return file.assetId;
-    }).filter((assetId): assetId is number => {
-        return assetId !== null;
-    });
+    const assets = state.files
+        .filter((file): file is ManagedFile & { assetId: number } => {
+            return file.assetId !== null;
+        })
+        .map((file) => {
+            return {
+                assetId: file.assetId,
+                uploadToken: file.uploadToken,
+                uploadUid: file.uploadUid,
+                attachToken: file.attachToken,
+                filename: file.filename,
+            };
+        });
 
-    syncHiddenAssetInputs(state.field, state.anchorInput, state.assetInputName, assetIds);
+    syncHiddenAssetInputs(state.field, state.anchorInput, state.assetInputName, assets);
 
     if (state.statusInput) {
-        state.statusInput.value = assetIds.length ? 'uploaded' : '';
+        state.statusInput.value = assets.length ? 'uploaded' : '';
     }
 
     dispatchFieldEvent(state.field, 'file-upload', 'uploaded-assets-sync', {
-        assets: assetIds.map((assetId) => {
-            const managed = state.files.find((file) => {
-                return file.assetId === assetId;
-            });
-
+        assets: assets.map(({ assetId, filename }) => {
             return {
                 assetId,
-                filename: managed?.filename || '',
+                filename,
             };
         }),
     });
@@ -707,11 +797,15 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         restrictions,
     });
 
+    // Resolve once for Uppy's allow-list; per-request meta/header refresh
+    // still re-reads the live form token (including custom csrfTokenName).
+    const initialCsrf = getFormCsrfToken(resolvedForm);
+
     uppy.use(XHRUpload, {
         endpoint: uploadEndpoint,
         fieldName: 'file',
         formData: true,
-        withCredentials: true,
+        withCredentials: resolvedForm?.dataset.formieRequestProfile !== 'cross-origin-public',
         timeout: UPLOAD_XHR_TIMEOUT_MS,
         shouldRetry: shouldRetryUpload,
         headers: {
@@ -725,7 +819,11 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
             'draftContextToken',
             'draftContext',
             'submissionId',
-            'CRAFT_CSRF_TOKEN',
+            'siteId',
+            'submissionEditToken',
+            'resumeToken',
+            'uploadCreateToken',
+            ...(initialCsrf ? [initialCsrf.name] : []),
         ],
         getResponseData(xhr) {
             try {
@@ -735,6 +833,14 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
             }
         },
         onBeforeRequest(xhr, _retryCount, files) {
+            browserRequestHeaders(uploadEndpoint, { profile: resolvedForm?.dataset.formieRequestProfile as BrowserRequestOptions['profile'] }).forEach((value, name) => xhr.setRequestHeader(name, value));
+            // Header works regardless of csrfTokenName / allowedMetaFields.
+            const csrf = getFormCsrfToken(resolvedForm);
+
+            if (csrf) {
+                xhr.setRequestHeader('X-CSRF-Token', csrf.value);
+            }
+
             const uppyFile = files[0];
 
             if (!uppyFile?.id || !uppyFile.size) {
@@ -888,8 +994,13 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
 
             body.append('assetId', String(managedFile.assetId));
 
+            if (managedFile.uploadToken) {
+                body.append('uploadToken', managedFile.deleteToken || '');
+            }
+
             try {
                 await requestJson<DeleteResponse>(deleteEndpoint, {
+                    profile: resolvedForm?.dataset.formieRequestProfile as BrowserRequestOptions['profile'],
                     method: 'POST',
                     body,
                 });
@@ -906,13 +1017,24 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         syncSortControls();
     };
 
-    const addManagedFileFromAsset = (assetId: number, filename: string) => {
+    const addManagedFileFromAsset = (
+        assetId: number,
+        filename: string,
+        uploadToken: string | null = null,
+        deleteToken: string | null = null,
+        uploadUid: string | null = null,
+        attachToken: string | null = null,
+    ) => {
         const { listItem, removeButton, sortUpButton, sortDownButton } = createListItem(field, filename);
         listItem.classList.add('is-complete');
         fileList.append(listItem);
 
         const managedFile: ManagedFile = {
             assetId,
+            uploadToken,
+            deleteToken,
+            uploadUid,
+            attachToken,
             filename,
             uppyFileId: null,
             listItem,
@@ -930,10 +1052,13 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
             return;
         }
 
+        const uploadTokens = readUploadTokensFromDom(field, assetInputName);
+
         try {
             const response = await requestJson<HydrateResponse>(hydrateEndpoint, {
+                profile: resolvedForm?.dataset.formieRequestProfile as BrowserRequestOptions['profile'],
                 method: 'POST',
-                body: buildHydrateFormData(resolvedForm, field, assetIds),
+                body: buildHydrateFormData(resolvedForm, field, assetIds, uploadTokens),
             });
 
             const assets = response.assets || [];
@@ -956,7 +1081,14 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
                     return;
                 }
 
-                addManagedFileFromAsset(assetId, asset.filename || `Asset #${assetId}`);
+                addManagedFileFromAsset(
+                    assetId,
+                    asset.filename || `Asset #${assetId}`,
+                    toTrimmedString(asset.uploadToken) || uploadTokens[assetId] || null,
+                    toTrimmedString(asset.deleteToken) || null,
+                    toTrimmedString(asset.uploadUid) || null,
+                    toTrimmedString(asset.attachToken) || null,
+                );
             });
 
             syncUploadedAssetsEvent(state);
@@ -1034,6 +1166,10 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         managedFile.assetId = assetId;
+        managedFile.uploadToken = toTrimmedString(body.uploadToken) || null;
+        managedFile.deleteToken = toTrimmedString(body.deleteToken) || null;
+        managedFile.uploadUid = toTrimmedString(body.uploadUid) || null;
+        managedFile.attachToken = toTrimmedString(body.attachToken) || null;
         managedFile.filename = body.filename || managedFile.filename;
         markUploadComplete(managedFile.listItem);
         syncUploadedAssetsEvent(state);
@@ -1073,6 +1209,9 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
 
         const managedFile: ManagedFile = {
             assetId: null,
+            uploadToken: null,
+            uploadUid: null,
+            attachToken: null,
             filename: file.name || 'Upload',
             uppyFileId: file.id,
             listItem,
@@ -1191,8 +1330,10 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     };
 }
 
-export const uploadManagerModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const uploadManagerModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(ROOT_SELECTOR);