Images upload via Frontend Form doesnt show images in the media gallery

Hello,

Thanks for the feedback!

I just tested the Image Field with the native ACF Form feature and the ACF Extended Form feature, and the WP Media filters work fine here.

Here is the video of my test.

I would recommend to check that you don’t have any javascript error in your browser console using F12 when submitting an ACF Form/ACF Extended Form or when using the WP Media modal.

If the problem persists try to disable all your plugins one by one (at the exception of ACF Pro + ACF Extended only) until you find which one cause the issue. If nothing works, you can try to switch to the native WP Twenty Twenty One theme, so you’re sure that there is no custom code which interfere.

If you want to run a simple test, here is the Json export of the video:

• my-form-field-group-export.json
• my-form-export.json

Hope it helps!

Have a nice day!

Regards.

Yes, I watched your test video, there is no problem there. I guess I didn’t express myself well. I also uploaded my test videos.

Test 1:
– Field Type: image | Uploader type : WordPress | Library: all
– Field Type: Gallery | Library: Uploaded to post

Media library image does not appear in left field when date filter is selected in test 1.

https://www.youtube.com/watch?v=lQTubpwWxpY

———————————————————————————-

Test 2:
– Field Type: image | Uploader type : WordPress | Library: Uploaded to post
– Field Type: Gallery | Library: Uploaded to post

In test 2, the media library image does not appear in the left area.

https://www.youtube.com/watch?v=fPQFDl4825g

———————————————————————————-

what I want is that the library is selected as “Uploaded to post” in the image and gallery field type so that those who upload media from the front end cannot see other images.but when these options are selected, there is a problem in the acfe wordpress media library and the images that should appear on the left while loading do not appear.

• This reply was modified 2 years, 9 months ago by epinefrin90.
• This reply was modified 2 years, 9 months ago by epinefrin90.

Hello,

Thanks for the detailed videos and explanations, the report is now more clear.

Regarding the Test 1:

The behavior you’re showing is the native ACF behavior. In fact, the problem come from the fact that you filter the dates in the Media Modal to display “January Uploads”, but then you upload a new file in February (today). So the list keeps displaying january uploads and you can’t choose the new file. You can simply fix that by changing the date filter back to “All dates” or “February”.

Here is a video showing the exact same behavior with ACF only (without ACF Extended).

Regarding the Test 2:

It looks like there is an issue with the “Library: Uploaded to post” setting in the Image/Gallery field when used on the front-end. I just noticed it thanks to your report. I’ll add a fix in the next patch.

In the meantime you can simply add the following code in your functions.php file in order to fix the issue:

add_action('acf/input/admin_print_footer_scripts', 'acfe_form_fix_uploaded_to');
function acfe_form_fix_uploaded_to(){
    ?>
    <script>
    (function($){

        if(typeof acf === 'undefined' || typeof acfe === 'undefined'){
            return;
        }
        
        acf.addAction('prepare', function(){
    
            // reset id back to ACF default to allow "uploaded to" setting to work correctly
            if(!acfe.get('is_admin') && acf.isset(window, 'wp', 'media', 'view', 'settings', 'post')){
                wp.media.view.settings.post = {};
                wp.media.view.settings.post.id = 0;
            }
    
        }, 15);
        
    })(jQuery);
    </script>
    <?php
}

Note that when using the “Library: Uploaded to post” setting on the front-end, it is important to set the ACFE Form UI “Post Action” to “Update Post” with the target “Current Post” (See screenshot 1 and screenshot 2), so the library display current post uploads.

When using a “Create Post” Action, the new post isn’t created when the form is displayed (before the submission), so the Media Modal doesn’t know what “Library: Uploaded to post” means. This is due to a technical limitation of both ACF Form and ACFE Form. I hope to find a fix for that in the future.

Hope it helps!

Have a nice day!

Regards.

Thank you for your answer ??

I understood what you said about Create Post, I hope you can find a suitable way. I think it will be more user friendly.

when image is uploaded using “library:uploded post” for “image field” in frontend. The image is attached to the post. So that the previously inserted image appears in the library when editing the post on the frontend.

But when image is uploaded using “library:uploded post” for “gallery field” in frontend. The image is not attached to the post. So when editing the post, the images uploaded from the gallery do not appear in the image library.

No problem when uploading images with gallery area in backend, images are attached to the post. It appears in the image library when you want to edit it later.

I guess the only problem is that the images added with the gallery field on the frontend are not attachment to the post.

Create Post Form.jpg
Media Library.jpg
Update Post Form.jpg

I wish you a good day.

Hello,

Thanks for the feedback!

In fact, the Gallery Field has some different behavior than the Image Field. I’ll include a fix in the next patch. Here is the full code that you can add to your functions.php file in order to fix the whole report. Note that it include the previous fix I shared with you:

add_action('acf/input/admin_print_footer_scripts', 'acfe_form_fix_uploaded_to');
function acfe_form_fix_uploaded_to(){
    ?>
    <script>
    (function($){

        if(typeof acf === 'undefined' || typeof acfe === 'undefined'){
            return;
        }

        acf.addAction('prepare', function(){

            // reset id back to ACF default to allow "uploaded to" setting to work correctly
            if(!acfe.get('is_admin') && acf.isset(window, 'wp', 'media', 'view', 'settings', 'post')){
                wp.media.view.settings.post = {};
                wp.media.view.settings.post.id = 0;
            }

        }, 15);

    })(jQuery);
    </script>
    <?php
}

add_action('acfe/form/submit/post', 'my_acfe_form_post_attach_uploads', 5, 5);
function my_acfe_form_post_attach_uploads($post_id, $type, $args, $form, $action){
    
    // globals
    global $acfe_form_post_id;
    $acfe_form_post_id = $form['post_id'];
    
    add_filter('acf/update_value/type=file',    'my_acfe_form_post_field_attach_upload', 20, 3);
    add_filter('acf/update_value/type=image',   'my_acfe_form_post_field_attach_upload', 20, 3);
    add_filter('acf/update_value/type=gallery', 'my_acfe_form_post_field_attach_upload', 20, 3);
    
}

function my_acfe_form_post_field_attach_upload($value, $post_id, $field){
    
    // globals
    global $acfe_form_post_id;
    
    // validate post id
    if(!$post_id || !is_numeric($post_id)){
        return $value;
    }
    
    // empty value
    if(empty($value)){
        return $value;
    }
    
    // validate value
    $attachments = acf_get_array($value);
    $attachments = array_map('acf_idval', $attachments);
    
    foreach($attachments as $attachment_id){
        
        // validate attachment
        if(!$attachment_id || !is_numeric($attachment_id)){
            continue;
        }
        
        // allow filter
        if(!apply_filters( 'acf/connect_attachment_to_post', true, $attachment_id, $post_id)){
            continue;
        }
        
        // get attachment post
        $post = get_post($attachment_id);
        
        // validate post and check if the attachment was uploaded on the "create post" page
        if($post && $post->post_type == 'attachment' && $post->post_parent === $acfe_form_post_id && $post_id !== $acfe_form_post_id){
            
            // update
            wp_update_post(array(
                'ID'          => $post->ID,
                'post_parent' => $post_id,
            ));
            
        }
        
    }
    
    return $value;
    
}

Video test with the fix:

• Post Create video
• Post Update video

Field Group + Forms Json export:

• Field Group Json
• Form: Edit Page Json
• Form: New Page Json

Have a nice day!

Regards.

Thanks. I did some tests and it works fine. There is only one scenario that I can see.

While uploading the images in the acfe form, the images are attached to the page with the shortcode of the acfe form, as soon as the images are uploaded. When you click the submit form button, the images are attached to the relevant page.

if the user uploads the images and then leaves the page without submitting, the images remain attached to the page where the acfe form shortcode is attached. Another Users who will create posts later see those images.
—————————————————–
I just wanted to let you know for your reference. Maybe you can develop an idea in that. Thank you very much for your work and interest.

I wish you a good day.

Hello,

Yes, this is a limitation of the current ACF & ACF Extended logic. It is kinda hard to explain, but basically ACF needs one post to upload attachments when using the Media Modal. The possibility to have multiple Actions that create/update different posts, and thus upload attachments to different posts within the same form is not builtin ACF, so I have to rely on it for now. There is no workaround to this logic at the moment, as it’s pretty deep in the ACF source code.

Hopefully I’ll find a solution in the future.

Have a nice day!

Regards.

And I was using Advanced Custom Fields PRO Version 5.8.7. When I added the code you provided, it didn’t work. then I thought that was the problem and tried it with a new version and it worked perfectly. I think it’s time to renew my license and upgrade to the latest version ??

I wanted to inform you because it says v5.8 and above on the plugin page.

I wish you good work again.

Hello,

Yes, the script I provided in this thread use the acf/input/admin_print_footer_scripts PHP hook in order to print the JS code on the page (to avoid asking you to create a new JS file, paste the code, enqueue it etc…). That hook doesn’t exists in ACF Pro 5.8.7. You should rename it to acf/admin_print_footer_scripts to order to apply it.

This PHP hook won’t be used in the next ACF Extended patch, as the Javascript will be fixed directly within the plugin JS source code.

Regards.

Hmm I get it. You are perfect my friend. Thank you so much ??

You’re welcome!

Thanks for the nice review BTW ??

Have a nice day!

Regards.