Hello Daniele,
I am working with Pro Forms and my goal is to keep the Submit button disabled until the user successfully uploads a file.
The Issue:
I added a “File” element, set it as “Required”, and enabled the “Reactive Disabled State” option under the Submit Button settings (as shown in the attached screenshot “Captura de Tela 2026-06-01 às 08.20.51.png”). However, the reactive state completely ignores the file element. The button either stays disabled even after a file is uploaded via FilePond, or it doesn’t disable at all.
It seems the native Reactive Disabled script is only listening to standard HTML input events (like ‘change’ or ‘input’) and is failing to track the custom validation state/events of the FilePond instance.
My Workaround:
To solve this temporarily, I had to write a custom JS script using a MutationObserver to watch the DOM for FilePond’s ‘.filepond–item’ class injection and manually toggle the submit button’s attributes:
document.addEventListener('DOMContentLoaded', () => {
const forms = document.querySelectorAll('form.brxe-brf-pro-forms');
forms.forEach(form => {
const submitBtn = form.querySelector('button[type="submit"]');
const submitWrapper = form.querySelector('.submit-button-wrapper');
const fileFieldWrapper = form.querySelector('.brxe-brf-pro-forms-field-file');
if (!submitBtn || !fileFieldWrapper) return;
const toggleSubmit = () => {
const currentFiles = fileFieldWrapper.querySelectorAll('.filepond--item');
if (currentFiles.length > 0) {
submitBtn.removeAttribute('disabled');
submitBtn.style.opacity = '1';
submitBtn.style.pointerEvents = 'auto';
if (submitWrapper) submitWrapper.removeAttribute('disabled');
} else {
submitBtn.setAttribute('disabled', 'true');
submitBtn.style.opacity = '0.5';
submitBtn.style.pointerEvents = 'none';
if (submitWrapper) submitWrapper.setAttribute('disabled', 'true');
}
};
setTimeout(toggleSubmit, 500);
const observer = new MutationObserver(() => {
toggleSubmit();
});
observer.observe(fileFieldWrapper, {
childList: true,
subtree: true
});
form.addEventListener('submit', (e) => {
const currentFiles = fileFieldWrapper.querySelectorAll('.filepond--item');
if (currentFiles.length === 0) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
});
});
My Question:
Is there currently a native way or a specific Bricksforge event I should be using to achieve this without custom JS? Or is this a known limitation where the Reactive Disabled State needs to be updated to support FilePond validation?
Thank you in advance!
Best regards,
Jayron Castro
CEO, Kstros.com