@verbb/formie-browser 1.0.13 → 1.0.15

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';
@@ -37,9 +42,9 @@ type UploadManagerOptions = {
     uploadEndpoint?: string;
     deleteEndpoint?: string;
     hydrateEndpoint?: string;
-    limitFiles?: number | null;
-    sizeMinLimit?: number | null;
-    sizeLimit?: number | null;
+    maxFiles?: number | null;
+    minFileSize?: number | null;
+    maxFileSize?: number | null;
     accept?: string | null;
     restrictFiles?: boolean;
 };
@@ -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;
 }
 
@@ -425,6 +508,19 @@ function markUploadComplete(listItem: HTMLElement): void {
     }, UPLOAD_COMPLETE_DISPLAY_MS);
 }
 
+function markUploadFailed(listItem: HTMLElement): void {
+    const { track, bar, label } = getProgressElements(listItem);
+
+    listItem.classList.add('is-error');
+    listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+    track?.setAttribute('data-indeterminate', 'false');
+    bar?.setAttribute('data-progress', 'error');
+
+    if (label) {
+        label.textContent = 'Upload failed';
+    }
+}
+
 function createSortButton(direction: 'up' | 'down'): HTMLButtonElement {
     const label = direction === 'up' ? 'Move file up' : 'Move file down';
     const button = document.createElement('button');
@@ -524,17 +620,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 +643,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,
             };
         }),
     });
@@ -673,9 +776,9 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     const uploadEndpoint = getEndpoint(dropzone, options.uploadEndpoint, 'data-formie-file-upload-upload-endpoint', '/actions/formie/file-upload/upload');
     const deleteEndpoint = getEndpoint(dropzone, options.deleteEndpoint, 'data-formie-file-upload-delete-endpoint', '/actions/formie/file-upload/delete');
     const hydrateEndpoint = getEndpoint(dropzone, options.hydrateEndpoint, 'data-formie-file-upload-hydrate-endpoint', '/actions/formie/file-upload/hydrate');
-    const limitFiles = options.limitFiles ?? toPositiveInt(dropzone.getAttribute('data-formie-file-limit'));
-    const sizeLimit = options.sizeLimit ?? parseFloat(dropzone.getAttribute('data-formie-size-max-limit') || '');
-    const sizeMinLimit = options.sizeMinLimit ?? parseFloat(dropzone.getAttribute('data-formie-size-min-limit') || '');
+    const maxFiles = options.maxFiles ?? toPositiveInt(dropzone.getAttribute('data-formie-file-limit'));
+    const maxFileSize = options.maxFileSize ?? parseFloat(dropzone.getAttribute('data-formie-size-max-limit') || '');
+    const minFileSize = options.minFileSize ?? parseFloat(dropzone.getAttribute('data-formie-size-min-limit') || '');
     const accept = options.accept ?? dropzone.getAttribute('accept') ?? browseInput.accept;
     const allowedFileTypes = parseAcceptTypes(accept);
 
@@ -686,16 +789,16 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         allowedFileTypes?: string[] | null;
     } = {};
 
-    if (limitFiles) {
-        restrictions.maxNumberOfFiles = limitFiles;
+    if (maxFiles) {
+        restrictions.maxNumberOfFiles = maxFiles;
     }
 
-    if (sizeLimit) {
-        restrictions.maxFileSize = sizeLimit * 1000 * 1000;
+    if (maxFileSize) {
+        restrictions.maxFileSize = maxFileSize * 1000 * 1000;
     }
 
-    if (sizeMinLimit) {
-        restrictions.minFileSize = sizeMinLimit * 1000 * 1000;
+    if (minFileSize) {
+        restrictions.minFileSize = minFileSize * 1000 * 1000;
     }
 
     if (allowedFileTypes) {
@@ -707,11 +810,36 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         restrictions,
     });
 
+    const selectionError = document.createElement('div');
+    selectionError.className = 'formie-upload-manager-error';
+    selectionError.setAttribute('role', 'alert');
+    selectionError.hidden = true;
+    root.append(selectionError);
+
+    // Uppy stores restriction messages for UI plugins; this custom UI must render them.
+    uppy.on('info-visible', () => {
+        const messages = uppy.getState().info.filter((info) => info.type === 'error');
+
+        if (messages.length) {
+            selectionError.textContent = [...new Set(messages.map((info) => info.message))].join(' ');
+            selectionError.hidden = false;
+        }
+    });
+
+    const clearSelectionError = () => {
+        selectionError.textContent = '';
+        selectionError.hidden = true;
+    };
+
+    // 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 +853,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 +867,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) {
@@ -780,11 +920,11 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     };
 
     const remainingUploadCapacity = (): number | null => {
-        if (!limitFiles) {
+        if (!maxFiles) {
             return null;
         }
 
-        return Math.max(0, limitFiles - countManagedAssets(state));
+        return Math.max(0, maxFiles - countManagedAssets(state));
     };
 
     const setDropzoneActive = (active: boolean) => {
@@ -888,8 +1028,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 +1051,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 +1086,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 +1115,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);
@@ -1015,8 +1181,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         const assetId = toPositiveInt(body.assetId);
 
         if (!body.success || !assetId) {
-            managedFile.listItem.classList.add('is-error');
-            managedFile.listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+            markUploadFailed(managedFile.listItem);
 
             if (errorEl instanceof HTMLElement) {
                 errorEl.hidden = false;
@@ -1034,6 +1199,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);
@@ -1048,8 +1217,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         const errorEl = managedFile.listItem.querySelector('[data-formie-upload-manager-error]');
-        managedFile.listItem.classList.add('is-error');
-        managedFile.listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+        markUploadFailed(managedFile.listItem);
 
         if (errorEl instanceof HTMLElement) {
             errorEl.hidden = false;
@@ -1073,6 +1241,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,
@@ -1115,6 +1286,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
 
         const files = Array.from(browseInput.files);
         browseInput.value = '';
+        clearSelectionError();
 
         try {
             uppy.addFiles(files.map((file) => {
@@ -1155,6 +1327,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         const files = Array.from(transfer.files);
+        clearSelectionError();
 
         try {
             uppy.addFiles(files.map((file) => {
@@ -1172,6 +1345,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     });
 
     const resetHandler = () => {
+        clearSelectionError();
         state.files.forEach((managedFile) => {
             managedFile.listItem.remove();
         });
@@ -1187,12 +1361,15 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     return () => {
         resolvedForm?.removeEventListener(FORM_RESET_EVENT, resetHandler);
         uppy.destroy();
+        selectionError.remove();
         state.files = [];
     };
 }
 
-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);