@verbb/formie-browser 1.0.14 → 1.0.15

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

@@ -42,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;
 };
@@ -508,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');
@@ -763,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);
 
@@ -776,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) {
@@ -797,6 +810,27 @@ 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);
@@ -886,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) => {
@@ -1147,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;
@@ -1184,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;
@@ -1254,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) => {
@@ -1294,6 +1327,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         const files = Array.from(transfer.files);
+        clearSelectionError();
 
         try {
             uppy.addFiles(files.map((file) => {
@@ -1311,6 +1345,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     });
 
     const resetHandler = () => {
+        clearSelectionError();
         state.files.forEach((managedFile) => {
             managedFile.listItem.remove();
         });
@@ -1326,6 +1361,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     return () => {
         resolvedForm?.removeEventListener(FORM_RESET_EVENT, resetHandler);
         uppy.destroy();
+        selectionError.remove();
         state.files = [];
     };
 }

package/src/js/utils/async.ts

@@ -79,3 +79,37 @@ export function waitForElement(
         });
     });
 }
+
+export function waitForElementRemoval(
+    selector: string,
+    root: ParentNode = document,
+    timeoutMs = 10000,
+): Promise<void> {
+    return new Promise((resolve, reject) => {
+        if (!root.querySelector(selector)) {
+            resolve();
+            return;
+        }
+
+        let timeoutId: number | null = null;
+        const observer = new MutationObserver(() => {
+            if (root.querySelector(selector)) {
+                return;
+            }
+
+            observer.disconnect();
+            if (timeoutId !== null) window.clearTimeout(timeoutId);
+            resolve();
+        });
+
+        observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+
+        timeoutId = window.setTimeout(() => {
+            observer.disconnect();
+            reject(new Error(`Timed out waiting for "${selector}" to be removed.`));
+        }, Math.max(timeoutMs, 0));
+    });
+}

package/src/js/validation/rules/required.ts

@@ -7,6 +7,18 @@ const required: ValidationRuleDefinition = {
             return true;
         }
 
+        if (input instanceof HTMLInputElement && input.type === 'file') {
+            if (input.files?.length) {
+                return true;
+            }
+
+            const field = input.closest('[data-formie-field-handle]');
+            const name = input.name.replace(/\[\]$/, '');
+
+            return Array.from(field?.querySelectorAll<HTMLInputElement>('input[type="hidden"][data-formie-file-upload-asset-id]') || [])
+                .some((asset) => !asset.disabled && asset.name.startsWith(`${name}[`) && Number(asset.getAttribute('data-formie-file-upload-asset-id')) > 0);
+        }
+
         if (input.type === 'checkbox' || input.type === 'radio') {
             const checkboxInputs = input.form?.querySelectorAll(`[name="${input.name}"]:not([type="hidden"]):not([disabled])`) || [];
 

package/src/js/validation/validator.ts

@@ -298,8 +298,10 @@ export class FormieValidator {
         errorMessages.innerHTML = '';
 
         const handle = fieldContainer.getAttribute('data-formie-field-handle') || 'field';
-        const errorId = `${handle}-error`;
-        errorMessages.id = errorMessages.id || `${handle}-errors`;
+        errorMessages.id = errorMessages.id || `${input.id || `${this.form.id}-${handle}`}-errors`;
+        // Use the rendered field's scoped region so matching handles in other
+        // forms cannot capture this control's accessible error reference.
+        const errorId = `${errorMessages.id}-1`;
         applyErrorAriaLive(
             errorMessages,
             resolveValidationErrorAriaLive(this.config.errorAriaLive, this.submitted),
@@ -485,6 +487,16 @@ export class FormieValidator {
             return isPainted(richTextHost);
         }
 
+        // Searchable selects keep their value in a hidden native control. Its
+        // adjacent combobox determines whether that value is active for validation.
+        if (element instanceof HTMLSelectElement && element.hasAttribute('data-formie-combobox-input')) {
+            const combobox = element.nextElementSibling;
+
+            if (combobox instanceof HTMLElement && combobox.classList.contains('formie-combobox')) {
+                return isPainted(combobox);
+            }
+        }
+
         return isPainted(element);
     }