Support » Plugin: Advanced Custom Fields: Extended » WordPress file/image uploader isn’t working with the front end form.

  • Resolved kieran223

    (@kieran223)


    I’m using an image field type with my front end form. If I select browser as the uploader type, everything works as it should.

    If I select default or WordPress the upload button doesn’t work on the front end form (It works as it should using the backend. )

    This is the console error I get when I click to add image

    Uncaught TypeError: Cannot read property 'query' of undefined
        at n.addFrameStates (acf-input.min.js?ver=5.10.2:1)
        at n.initialize (acf-input.min.js?ver=5.10.2:1)
        at n.t (acf.min.js?ver=5.10.2:1)
        at n.acf.Model (acf.min.js?ver=5.10.2:1)
        at n [as constructor] (acf.min.js?ver=5.10.2:1)
        at new n (acf.min.js?ver=5.10.2:1)
        at Object.acf.newMediaPopup (acf-input.min.js?ver=5.10.2:1)
        at n.selectAttachment (acf-input.min.js?ver=5.10.2:1)
        at n.onClickAdd (acf-input.min.js?ver=5.10.2:1)
        at n.<anonymous> (acf.min.js?ver=5.10.2:1)

    I have added <?php acf_form_head(); ?> to the top of my template file. I have also gone into the form settings and made sure the uploader is set to default or WordPress.

    Do you know what could be causing this issue?

    any help will be really appreciated

    Thank you

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author hwk-fr

    (@hwk-fr)

    Hello,

    Thanks for the feedback!

    Are you using ACF Form or ACFE Form (from ACF Extended)? Those two solutions are different.

    If you’re using ACFE Form, you don’t need to add acf_form_head() in the page header, as it is automatically managed by ACF Extended.

    Looking at the error log you posted, it looks like it comes from ACF javascript files (and not ACF Extended files), which seems weird.

    Note that when using “WordPress” uploader type on the front-end, it will only work when the user has the capability tu use the WordPress Media Uploader. For example, non-logged users will see the “Browser” uploader type, even if you chose “WordPress” uploader. This rule apply for both ACF Form & ACFE Form. In any case, you shouldn’t see any error, that logic is automatically applied. You can test that logic by checking your form page when not logged-in.

    Just in case, I just tested it and it works fine, with WordPress 5.8 + ACF Pro 5.10.2 + ACF Extended 0.8.8.5.

    Can you please post the code you’re using on the front-end to display the form?

    Thanks in advance,

    Regards.

    Thread Starter kieran223

    (@kieran223)

    Thank you for the fast reply.

    I have used ACFE to build the form.

    I have then made an ACF to insert the short code, (Using the Wysiwyg Editor field type. This is the code I have used to display the form. (The form only shows to the post author (Admin role, so I have permission to use the WordPress media uploader)

    <?php
        // check if current user is the post author
        global $current_user;
        get_currentuserinfo();
      
        if (is_user_logged_in() && $current_user->ID == $post->post_author)  {
            echo get_field('front_end_form_short_code',);
    
        }
       
    ?>

    I have just tested inserting the short code directly into the page and it works. So it looks like the problem is because I am using ACF Wysiwyg Editor to insert the short code.

    Thank you again for the fast reply.

    Thread Starter kieran223

    (@kieran223)

    If I insert it into the page template using

    <?php echo do_shortcode(“[Shortcode’]”); ?>

    It still does the same thing. (Not work)

    But If I insert it into a page (Not the custom post type) using the Gutenberg short code block it works. But I can’t do it this way, as I need to show it to the logged in Author only.

    Also, If I don’t add acf_form_head() to the template file, the styles don’t load and the Accordions doesn’t work. I’m using CPT UI to make my custom post types.

    Thank you again

    Plugin Author hwk-fr

    (@hwk-fr)

    Hello,

    While your code is weird (having a WYSIWYG editor field that just has a shortcode), I just tested it and it works on my install. The fact that it works when you use the native Gutenberg editor is also strange.

    The following methods work in my tests:

    WYSIWYG field with shortcode in it

    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
        
        // [acfe_form name="my-form"] in the field
        echo get_field('my_editor_field'); 
    
    }
    

    Direct shortcode in PHP code

    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
    
        echo do_shortcode('[acfe_form name="my-form"]');
    
    }
    

    Native Gutenberg/Classic Editor with shortcode in it

    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
    
        // [acfe_form name="my-form"] in the editor
        the_content();
    
    }
    

    You can also try to directly call the form with PHP only:

    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
    
        // display form in PHP only
        acfe_form('my-form');
    
    }
    

    Note that there are some problems in your code:

    You don’t need get_currentuserinfo() because you don’t use it. You also have an unecessary , at the end of:

    echo get_field('front_end_form_short_code',);
    
    • Can you please send the shortcode you’re using? Just to make sure you’re using [acfe_form]
    • Can you try to disable any other ACF plugins, especially if you have an another plugin which manage ACF Forms?

    Hope it helps!

    Regards.

    Thread Starter kieran223

    (@kieran223)

    Thank you again for your reply.

    I have disabled all my other plugins, so I just have
    ACF + ACF Pro 5.10.2
    Advanced Custom Fields : Extended 0.8.8.5
    Custom Post Type UL 1.9.2

    My ACFE short code is [acfe_form ID=”2090″] or [acfe_form name=”edit-review-page”]

    I have tried directly calling the form via PHP only-

    <?php        
    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
    
        // display form in PHP only
        acfe_form('edit-review-page');
    
    }?>

    I have also stripped my custom post type template down, so it only contains the following:

    <?php acf_form_head(); ?>
        <?php wp_head(); ?>
    
      <?php        
    global $current_user;
    
    if(is_user_logged_in() && $current_user->ID == $post->post_author){
    
        // display form in PHP only
        acfe_form('edit-review-page');
    
    }?>

    and the upload button still isn’t working’ and I’m getting the same error in console.

    I also tried it without `<?php acf_form_head(); ?> in the template, but this stops the Accordions from showing and working.

    It also doesn’t work if I remove <?php wp_head(); ?> (This just removed my default theme styles. )

    I also tried on a new install, only installing Kadence as the theme, and the 3 above plugins, it’s also doing the same thing.

    Thank you again

    Plugin Author hwk-fr

    (@hwk-fr)

    Hello,

    You should not remove wp_head() from your template as it is required to make your theme work correctly. Also note that you don’t need both “ACF + ACF Pro” plugins, ACF Pro alone already includes all ACF Free Features (but the issue doesn’t come from here).

    It looks like there is something wrong somewhere in your install. Please do the following test:

    • Create a fresh new WordPress 5.8 on a local domain environment
    • Log as admin
    • Install & activate ACF Pro 5.10.2
    • Install & activate ACF Extended 0.8.8.5
    • Do not install any other plugin or theme
    • Your plugins list should look like that
    • Import this Field Group Json file using the “Custom Fields > Tools” menu, section “Import Field Groups”
    • Import this ACFE Form Json file using “Custom Fields > Tools” menu, section “Import Forms”
    • Edit the file /wp-content/themes/twentytwentyone/index.php, and replace the entire code with the following:
    <?php get_header(); ?>
    
    <?php acfe_form('test-form'); ?>
    
    <?php get_footer(); ?>
    
    • Save the file and visit your test install homepage in your browser

    You should see the ACFE Form with a working Image Field. Here is the video demo of the test. If that’s the case, then it confirms that you have some custom code in your theme or a plugin that break the ACF Image field.

    I would recommend to switch your theme back to the native Twenty Twenty One (in order to remove any potential custom code), and turn off all plugins at the exception of ACF + ACF Extended until you find the cause of the problem.

    Hope it helps!

    Regards.

    Thread Starter kieran223

    (@kieran223)

    With the above test the form works.

    I only get problems with the form if it’s within a custom post type.

    But… I have since found out that if I add <?php wp_footer(); ?> to my custom post type template it all works as it should.

    I’m not sure why this is, maybe it’s normal.

    Thank you so much for all your help. I really appreciate it

    Plugin Author hwk-fr

    (@hwk-fr)

    Hello,

    Yes wp_footer() is as important as wp_head() to make the theme works correctly.

    If you enjoy this plugin and its support, feel free to submit a review. It always helps and it’s much appreciated 🙂

    Have a nice day!

    Regards.

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.