[Resolved] Image upload fields are not working on my forms

[Author]

Posts

[MatthewE391]

I am trying to: One of my form has stopped working, The image uploads are no longer doing anything.

Link to a page where the issue can be seen:
hidden link
I expected to see:
A box to upload images

Instead, I got:
No reaction to my button presses.
there also seems to be an error in the chrome console.

Uncaught TypeError: jQuery(...).geocomplete is not a function
at (index):350
Large-white-BG-extra-transparent-logo-1500x844.png:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
4cred_media_manager.min.js:13 Uncaught TypeError: Cannot read property 'model' of undefined
at Toolset.CRED.MediaField.self.setParentId (cred_media_manager.min.js:13)
at Toolset.CRED.MediaField.Toolset.Common.MediaField.manageInputSelectorClick (toolset-media-field-prototype.min.js:4)
at HTMLInputElement.<anonymous> (toolset-media-field-prototype.min.js:1)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.r.handle (jquery.js:3)

[Nigel]

I can see the JS error on that page. It occurs because you appear to have some custom code on the page that references the jQuery geocomplete method before it is defined.

Do you know where the custom code is added?

You should wrap the code inside a callback attached to the DOM ready event by which time the geocomplete method will be available, e.g.

( function( $ ) {
	$( document ).ready( function(){
		// Your code here

	});
})( jQuery );

[MatthewE391]

Hi there,

Thank you for taking a look. I fixed the maps error as per your instructions, many thanks, however the image upload field still seems to be unresponsive. with the other half of the error remaining.

cred_media_manager.min.js:13 Uncaught TypeError: Cannot read property 'model' of undefined
at Toolset.CRED.MediaField.self.setParentId (cred_media_manager.min.js:13)
at Toolset.CRED.MediaField.Toolset.Common.MediaField.manageInputSelectorClick (toolset-media-field-prototype.min.js:4)
at HTMLInputElement.<anonymous> (toolset-media-field-prototype.min.js:1)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.r.handle (jquery.js:3)

[Nigel]

Is this related to some JavaScript optimisation?

The JS files used by Toolset seem to have been moved to the uploads directory.

Can you test without any such modifications?

[MatthewE391]

So it looks like it might be a recent theme update which is to blame, I apologise for that, unless there something you think you might be able to do I should probably go bother them.

[Nigel]

There are probably some settings available from the plugin or theme, whichever is responsible, that lets you say which JavaScript files it's okay to modify and which not, so I would start by looking for those and see if you are able to blacklist/whitelist different assets.

Note the following, though it is likely not an exhaustive list, just ones which are known to cause problems: https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/

[MatthewE391]

So I don't know what baring this might have, but none of the optimisation settings in my theme are in effect and I've deleted the site ground optimisation plugin. I have noticed something odd though. I can use the image upload fields if I'm a guest user, but when I'm logged in they break. Does this have any baring on your thoughts?

[MatthewE391]

I've gone back through my themes archives, as far back as nov 2018 back when the site was initially constructed and the button still doesn't work, I think there might be an additional aggravating factor. When I switched back to one of the default WP themes, the upload box changes between when you're logged in vs logged out. With it being a more traditional upload a file button when logged out, and a different big grey box when logged in.
Sorry for spewing info at you, getting a bit desperate.

I've hidden the form in the customer area, and moved it to the following area, hidden link there's a login link in the footer, and a logout link in the NDA user area menu option.

[Nigel]

Is it okay if I do some similar checking on your site? (It's a live site, you don't have a staging site?)

The difference between being logged-in or not is expected.

Version 2.4 replaced the custom file uploader with the built-in WP media uploader, but that is only available to logged-in users, and logged-out users don't have any ajax pre-upload, they just select the image file and it gets uploaded at the time the form is submitted.

You can actually disable the WP media library in the form settings (screenshot) and then all users will have the same experience.

[MatthewE391]

Just creating a staging site now, just need to wait on the client to point the A record

[MatthewE391]

here you go the url's should all be the same otherwise

hidden link

[Nigel]

Thanks for setting that up.

I was able to confirm that the issue arises with the Enfold theme, and confirmed that on my own local test site with a copy of the theme.

I've escalated this so that it can be investigated by my colleagues to see if it is something we can fix, and I'll let you know what they find.

In the meantime you will need to disable the option to use the WP Media Library in the form.

[Nigel]

I have a reply from my colleagues that this is essentially the same issue as an existing with the Enfold theme affecting Views, which the theme author provided details of a workaround for which should also work in this case: https://toolset.com/errata/views-slider-does-not-work-when-the-enfold-theme-is-active/

If you want to use the media uploader you can try the advice in that erratum.