FormBuilder file extension validation issue

[AAD Web Team]

Hi everyone, we've experienced an issue where FormBuilder is rejecting the client side validation of image uploads for .jpeg images, even though they are allowed as a file extension.

We did also submit a Github issue: https://github.com/processwire/processwire-issues/issues/1656

Expected behavior

Both forms have the same form and file fields settings. Therefore both should accept a .jpeg image.

Actual behavior

One form accepts a .jpeg image happily, the other pops up with an error message saying the image does not match an expected file type. This is using the same image for both forms.

Optional: Screenshots/Links that demonstrate the issue

Image I'm using to test:

Steps to reproduce the issue

I'll include both forms export codes:

Working form import code;
{ "required": false, "columnWidth": 0, "roles": { "form-submit": [ "guest" ], "form-list": [], "form-edit": [], "form-delete": [], "entries-list": [], "entries-edit": [], "entries-delete": [], "entries-page": [], "entries-resend": [] }, "flags": 0, "pluginActions": [], "framework": "Bootstrap5", "submitText": "Submit news item", "successMessage": "Thanks for your submission. Refresh the page to see your item at the top of the list.", "errorMessage": "One or more errors prevented submission of the form. Please correct and try again.", "frBasic_cssURL": "/site/templates/css/form-builder.css", "emailSubject": "Staff news submission [SEC=OFFICIAL]", "responderSubject": "Staff news submission [SEC=OFFICIAL]", "saveFlags": 75, "savePageTemplate": 64, "savePageParent": 8349, "savePageStatus": 1, "savePageFields": { "name": "headline", "1": "headline", "150": "body", "102": "link_url", "44": "image" }, "listFields": [ "headline", "email" ], "entryDays": 366, "emailTo": "webteam@aad.gov.au", "emailFrom": "email", "responderFromName": "AAD Web Team", "responderReplyTo": "webteam@aad.gov.au", "responderTo": "email", "emailFrom2": "webteam@aad.gov.au", "mobilePx": "55em", "partialEntryDays": 14, "spamEntryDays": 7, "frBasic_itemContent": [ "description", "out", "error", "notes" ], "frBootstrap5_noLoad": [ "framework", "jquery" ], "frBootstrap5_bootURL": "/site/modules/FormBuilder/frameworks/bootstrap5/", "allowPreset": 0, "skipSessionKey": 0, "useCookies": 0, "frBasic_noLoad": [], "spamFlags": 0, "spamWords": [], "children": { "headline": { "type": "Text", "label": "Headline", "required": 1, "columnWidth": 0, "requiredAttr": 1, "maxlength": 300 }, "body": { "type": "Textarea", "label": "Body", "notes": "There’s a limit of about 650 words (4000 characters) in this field, but 150 words or less would be ideal.", "required": 1, "columnWidth": 0, "rows": 5, "maxlength": 4000, "requiredAttr": 1, "collapsed": "0", "minlength": 0, "showCount": "2" }, "email": { "type": "Email", "label": "Email address", "description": "Please provide your email address. It will *not* be displayed with the news item, but will enable the web team to get in touch if there's an issue with your submission.", "required": 1, "columnWidth": 0, "rows": 5, "requiredAttr": 1, "maxlength": 512 }, "link_url": { "type": "URL", "label": "Optional hyperlink to more information", "required": false, "columnWidth": 100, "maxlength": 1024, "requiredIf": "link_text!=''" }, "image": { "type": "FormBuilderFile", "label": "Optional image", "notes": "Allowed file types: jpg, jpeg, png\nMaximum file size: 5mb", "required": false, "columnWidth": 0, "extensions": "jpg jpeg png", "maxFiles": 1, "maxFileSize": 5242880 } } }

Not working form import code:
{ "required": false, "columnWidth": 0, "roles": { "form-submit": [ "guest" ], "form-list": [], "form-edit": [], "form-delete": [], "entries-list": [], "entries-edit": [], "entries-delete": [], "entries-page": [], "entries-resend": [] }, "flags": 0, "pluginActions": [], "framework": "Bootstrap5", "submitText": "Submit advertisement", "successMessage": "Thanks for your submission. Refresh the page to see your item at the top of the list.", "errorMessage": "One or more errors prevented submission of the form. Please correct and try again.", "frBasic_cssURL": "/site/templates/css/form-builder.css", "emailSubject": "Staff classifieds submission [SEC=OFFICIAL]", "saveFlags": 11, "savePageTemplate": 67, "savePageParent": 8377, "savePageStatus": 1024, "savePageFields": { "name": "item_name", "137": "category", "1": "item_name", "150": "body", "102": "link_url", "44": "image", "122": "document", "141": "contact_person", "92": "email", "138": "phone_x", "139": "phone_m", "140": "phone_o" }, "listFields": [ "category", "item_name", "contact_person" ], "entryDays": 60, "emailTo": "webteam@aad.gov.au", "emailFrom2": "webteam@aad.gov.au", "responderSubject": "Auto-Response", "mobilePx": "55em", "allowPreset": 0, "skipSessionKey": 0, "useCookies": 0, "partialEntryDays": 14, "spamEntryDays": 7, "frBasic_noLoad": [], "frBasic_itemContent": [ "description", "out", "error", "notes" ], "spamFlags": 0, "spamWords": [], "frBootstrap5_noLoad": [ "framework", "jquery" ], "frBootstrap5_bootURL": "/site/modules/FormBuilder/frameworks/bootstrap5/", "children": { "item_details": { "type": "Fieldset", "label": "Item details", "required": false, "columnWidth": 100, "children": { "category": { "type": "Select", "label": "Choose a category", "required": 1, "columnWidth": 30, "defaultValue": "For sale", "options": "=\nFor sale\nFor rent\nGiveaway\nWanted\nMiscellaneous" }, "item_name": { "type": "Text", "label": "Item name", "required": 1, "columnWidth": 70, "requiredAttr": 1, "maxlength": 300, "stripTags": 1 }, "body": { "type": "Textarea", "label": "Description", "notes": "**Do not include website addresses in the description.** They will not be clickable links and may break the visual layout of the advertisement. You can either use the website field provided, or attach a document if you need to list multiple website addresses.", "required": false, "columnWidth": 0, "rows": 5, "maxlength": 1200, "requiredAttr": 1, "stripTags": 1 }, "link_url": { "type": "URL", "label": "Website (optional)", "required": false, "columnWidth": 100, "maxlength": 1024, "requiredIf": "link_text!=''" }, "attachments": { "type": "Fieldset", "label": "Attachments (optional)", "required": false, "columnWidth": 0, "children": { "image": { "type": "FormBuilderFile", "label": "Image", "notes": "Allowed file types: jpg, jpeg, png\nMaximum file size: 5MB", "required": false, "columnWidth": 50, "extensions": "jpg jpeg png", "maxFiles": 1, "maxFileSize": 5242880, "collapsed": "0", "descRows": 0, "descLength": 2048, "hideInputs": 0, "usePreview": 0, "useHeader": 0 }, "document": { "type": "FormBuilderFile", "label": "Document", "notes": "Allowed file types: pdf, docx, doc, rtf\nMaximum file size: 5MB", "required": false, "columnWidth": 50, "extensions": "pdf docx doc rtf", "maxFiles": 1, "maxFileSize": 5242880 } } } } }, "contact_details": { "type": "Fieldset", "label": "Contact details", "description": "Your name is required. Please provide at least one method of contact.", "required": false, "columnWidth": 100, "children": { "contact_person": { "type": "Text", "label": "Contact person", "notes": "***Must* be a member of staff.**", "required": 1, "columnWidth": 0, "requiredAttr": 1, "maxlength": 2048, "stripTags": 1 }, "email": { "type": "Email", "label": "Email address", "required": false, "columnWidth": 0, "rows": 5, "requiredAttr": 1, "maxlength": 512 }, "phone_numbers": { "type": "Fieldset", "label": "Phone numbers", "notes": "**Numbers only – no spaces or punctuation please**", "required": false, "columnWidth": 0, "children": { "phone_x": { "type": "Text", "label": "Extension", "required": false, "columnWidth": 0, "maxlength": 4, "stripTags": 1 }, "phone_m": { "type": "Text", "label": "Mobile", "required": false, "columnWidth": 0, "maxlength": 10, "stripTags": 1 }, "phone_o": { "type": "Text", "label": "Other", "required": false, "columnWidth": 0, "maxlength": 10, "stripTags": 1 } } } } }, "classifieds_policy": { "type": "Fieldset", "label": "Classifieds policy", "required": false, "columnWidth": 0, "children": { "agreement": { "type": "Checkbox", "label": "Advertisements that do not adhere to this policy will be removed.", "description": "", "required": 1, "columnWidth": 0, "checkedValue": "1", "checkboxLabel": "I have read and agree to these terms" } } } } }

Setup/Environment

• ProcessWire version: 3.0.200
• PHP version: 7.4.3
• FormBuilder: 0.5.3

[Gideon So]

Hi @AAD Web Team

I think maybe it is because there are two file fields in the latter form. Try remove the document field and try again. If it works then I think you should contact Ryan for help.

Gideon