Pro Forms - File Upload - Styles don't work on front end

Hey @Daniele,

I couldn’t find any thread mentioning this problem.

It seems like the styles of the File Upload element in Pro Forms are not populating on front end.

Builder - nice grey box.

Front End - styles totally gone.

It may be a different issue than styles, as when I inspected the element it looks like on front end all the filepond elements are gone.

Inspect elements in builder with preview mode

Inspect elements on front end

Thanks,
Matt

Hey Matt,

seems that Filepond cannot initialize the file field correctly. Do you see any javascript errors in the console?

Just this one:
image

Uncaught ReferenceError: brfInitialFields is not defined
at window.bricksforgeData.initFileField (cut-and-edge-new/:2304:21)
at cut-and-edge-new/:2799:40

Are you using some speed optimization plugins which are manipulating the loading of JS files? If so, could you try to deactivate them and try again?

Okay, we are onto something. I do use Perfmatters and defer js files.

When I toggle off defer js it works fine.

Could you help me find which js file I need to exclude from defer?

brfInitialFields from the below code is coming as undefined, but I am not sure which script it’s defined in.

brfInitialFields.push({
type: “file”,
html: element.closest(“.brxe-brf-pro-forms-field-file”).outerHTML,
});

Should be bricksforge_elements.js :slight_smile:

Yes, @Daniele!

Excluded and works fine! :partying_face:

Thank you!

1 Like

Hi! @Daniele I seem to have the same issue
No optimization plugins used the only error I see in the console is: allowMultiple: fileUploadReplace && fileUploadLimit > 1 ? true : false,

Could you share a screenshot of the error? If it initializes well on backend, but not on frontend, in most cases its a conflict with some other plugin(s) :slight_smile:

Ok I think I figured it out now, the issue seems to be when it is used with Gutenbricks, if I disable the template from there it renders ok