[Resolved] Featured image isn’t uploading at all when posting using a Toolset form

[Author]

Posts

[jonS-4]

I am trying to: upload featured image

Link to a page where the issue can be seen: Can't show I'm afraid without creating a login for you

I expected to see: image uploaded in the normal way

Instead, I got: no errors but not image uploaded and nothing showing for the featured image in the post

[Christian Cox]

Hi, can you answer a few questions for me?
- Does this behavior only happen for Guests or does it also happen for Admins, etc?
- Is the image uploaded to the Media Library but not linked to the post, or is it not uploaded at all?

Then please try these troubleshooting steps next:
- Temporarily activate the parent Astra theme, and deactivate all plugins except Types, Views, Forms.
- Place the Form on a page somewhere so that it is accessible on the front-end of the site
- Submit the Form again and see if the image was uploaded successfully. If so, reactivate your theme and other plugins one by one until the problem returns.
- If the image was not uploaded successfully, please add this code to your child theme's functions.php file:

add_filter("cred_file_upload_disable_progress_bar", "disable_progress_bar");
function disable_progress_bar($val) {
   return true; //return true to disable
}

- Now test the Form again. This time, the image will not be uploaded with AJAX but will be submitted along with the rest of the Form contents.

Please let me know the results of these tests.

[jonS-4]

Thanks Christian.

It's not working for any login status - admins or other levels.

I disabled everything apart from the Toolset plugins and switched to the parent Astra theme and tried it. Still not working.

I then put your code into functions.php and it worked.

I then reactivated everything including the Astra child them but left the code in place and it's still working.

So it looks like it's the Ajax uploading which is causing the problems.

Any ideas?

Cheers again

Jon

[Christian Cox]

Okay let's try a few more things.
- Remove or deactivate that code so AJAX is active once again for image uploads.
- Create one of these posts in wp-admin. Is the Featured Image section visible? If not, scroll up to the top right corner and click "Screen options" to activate it. If you cannot see the Featured Image option available in Screen Options, you must activate it in the post type. Go to Toolset > Post Types and edit this post type. In the "sections to display when editing..." panel, make sure Featured Image is checked. Try again.
- Open the browser console and try to upload the featured image again. Watch for any JavaScript errors. Copy + paste those here for me to review.
- If no JS errors are displayed, open the network tab in the browser console and inspect the admin-ajax.php request that corresponds to the featured image upload (see the attachment here for an example). If you aren't sure which it is, you can refresh the page and wait for everything to load, then clear the list before submitting the featured image again. Copy + paste the entire "Response" contents here for me to review.

[jonS-4]

Hi Christian

I've done all you suggested. There is nothing in the JS console and the admin-ajax.php 'Response' output just has:

0

It looks like the Ajax isn't working at all.

Thanks again for your help.

Cheers

Jon

[Christian Cox]

Let's see if any backend errors are being generated during the upload process. If you're not familiar with server logs, I can show you how to temporarily activate them. Go in your wp-config.php file and look for

define('WP_DEBUG', false);

Change it to:

define('WP_DEBUG', true);

Then add these lines, just before it says 'stop editing here':

ini_set('log_errors',TRUE);
ini_set('error_reporting', E_ALL);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');

Save that file and upload it to your server. Now attempt to upload the featured image via AJAX once more. If any server-side errors are generated, this will create an error_log.txt file in your site's root directory. Please send me its contents. Once that is done, you can revert the changes you made to wp-config.php.

If no errors are generated, I'll have to log in and take a closer look.

[jonS-4]

Thanks again.

Here's the contents of error_log.txt:

[03-Feb-2019 22:41:14 UTC] PHP Notice: Elementor\Responsive is deprecated since version 2.1.0! Use Elementor\Core\Responsive\Responsive instead. in /home/rochfordparishco/public_html/wp-includes/functions.php on line 4051
[03-Feb-2019 22:41:32 UTC] PHP Notice: Elementor\Responsive is deprecated since version 2.1.0! Use Elementor\Core\Responsive\Responsive instead. in /home/rochfordparishco/public_html/wp-includes/functions.php on line 4051
[03-Feb-2019 22:41:35 UTC] PHP Notice: Elementor\Responsive is deprecated since version 2.1.0! Use Elementor\Core\Responsive\Responsive instead. in /home/rochfordparishco/public_html/wp-includes/functions.php on line 4051
[03-Feb-2019 22:42:18 UTC] PHP Notice: Elementor\Responsive is deprecated since version 2.1.0! Use Elementor\Core\Responsive\Responsive instead. in /home/rochfordparishco/public_html/wp-includes/functions.php on line 4051

Cheers

Jon

[Christian Cox]

Okay that indicates a warning for Elementor, but if the issue continues with Elementor inactive then there must be something else going on. I can log in and create a clone of your site with the Duplicator plugin to do some more in-depth investigation if you provide login credentials in the private reply fields here. Please let me know how I can find this Form on the front-end of the site.

[Christian Cox]

Okay I see what is happening now. You have an invalid markup structure in the Form. Basically the div.panel-body is closed before the credform shortcode is closed, but it should be closed after the credform shortcode is closed. Here's the code:

        <div class="panel-body">
          [credform]
            [cred_field field="form_messages" class="alert alert-warning"]
            <div class="form-group">
              <label>Date and Time</label>
              [cred_field field="meeting-date-and-time" force_type="field" class="form-control" output="bootstrap"]
            </div>
            <div class="form-group">
              <label>Meeting Title</label>
              [cred_field field="post_title" class="form-control" output="bootstrap"]
            </div>
            <div class="form-group">
              <label>Meeting Content</label>
              [cred_field field="post_content" output="bootstrap"]
            </div>
          </div> <!-- this closes the panel-body div before the credform shortcode is closed, resulting in an invalid markup structure -->

This should be fixed in your markup so that the credform shortcode is nested correctly inside its wrapper divs.

I'm attaching a screenshot here showing how the browser actually renders the Featured Image field outside the Form tag because the nested HTML structure is malformed.

[jonS-4]

Top man. I can't believe that was the issue. I've now moved the [credform] and [/credform] tags to the beginning and end and it's all working perfectly.