Display featured image before form submission

Hello,

Thanks for the feedback!

The ACF Extended front-end form is compatible with all native ACF Fields and any third party plugins fields that respect the ACF API (such as the fields provided by ACF Extended itself).

The native ACF Image field doesn’t provide any preview when using the “Browser Uploader” type, this is why you don’t see it when filling the form.

Hope it answers your question.

Have a nice day!

Regards.

Ah, that’s a shame,

When selecting the image from the user’s computer, is the image uploaded at that point, or when the form is submitted?

If it’s the former, is it stored in some tempoary file somewhere? I wonder if there’s a way of accessing it from JavaScript etc.

Is there a hook that fires when the image is selected? I’m trying to emulate what Frontend Admin for ACF manages to do by producing a preview once the image is selected.

Many thanks

Pete

Hello,

In the ACF logic, the Image file is uploaded during the form submission.

You can still get a get some kind of preview when the user select the image, thanks to Javascript. You’ll find some topics on Stackoverflow about this subject here for example.

To achieve that with ACF, you’ll have to use the ACF JS API (see documentation) and listen for file change, as there is no specific JS hook action that is triggered as far as I know.

Hope it helps!

Have a nice day!

Regards.

Thanks again Konrad, I’m getting there with the form latout, but I want to clarify the code generated in the form for my image field as followed;

<div class="acf-field acf-field-image acf-field-6047dd21ff42d .myimage field-wrap" style="width:100%;"
    data-name="picture" data-type="image" data-key="field_6047dd21ff42d" data-width="100">
    <div class="acf-label">
        <label for="acf-field_6047dd21ff42d">Picture</label>
    </div>
    <div class="acf-input">
        <div class="acf-image-uploader" data-preview_size="large" data-library="uploadedTo"
            data-mime_types="jpg,png,bmp,jpeg" data-uploader="basic">
            <input type="hidden" name="acf[field_6047dd21ff42d]" value="">
            <div class="show-if-value image-wrap" style="max-width: 100%">
                <img src="" alt="" data-name="image" style="max-height: 100%;">
                <div class="acf-actions -hover">
                    <a class="acf-icon -cancel dark" data-name="remove" href="#" title="Remove"></a>
                </div>
            </div>
            <div class="hide-if-value">
                <label class="acf-basic-uploader" data-dashlane-label="true">
                    <input type="file" name="acf[field_6047dd21ff42d]" id="acf-field_6047dd21ff42d"
                        key="field_6047dd21ff42d" data-dashlane-rid="0052b7cf2faee715"
                        data-dashlane-classification="date"><input type="hidden"
                        name="acf[field_6047dd21ff42d_file_nonce]" value="f94a2b00ad"> </label>
            </div>
        </div>
    </div>
</div>

Is this code generated by your plugin, or is the code a template from ACF?

Regards

Pete

Hello,

This code is generated by ACF itself. It’s the same code that is generated in the WP Admin. ACF Extended simply render ACF Fields on the front-end.

Regards.

Hi Konrad,

It doesn’t seem to matter which method is I choose in the Uploader setting, none of them preview the image, whilst ACF say the preview is shown.

I’m still waiting on another response from ACF, and I’ll let you know what they say.

Regards

Pete

Hello,

ACF has 2 “Uploader Types” for the ACF Image Field.

1. The “WordPress Uploader”, which open the WP Media Library and let the user select an image in the WP Media or upload an image from there. This uploader type will display an Image Preview when the user select/upload an image.

It is the “default” uploader type displayed by ACF, but requires the user to be logged in. In fact, the WP Media Library only works with logged users. You can check it out by creating a “Test Field Group” with a “Test Image” field and display it in the back-end on a “Test Page” (since users are always logged in the wp admin), or on the front-end when the user is logged in.

2. The “Browser Uploader”, which open the browser popup to select an image to upload. This is the one you shared in your screenshot in your original post. This uploader type doesn’t display an image preview when uploading an image, and will be always displayed by ACF when the user is not logged-in, no matter which “Uploader Type” you chose. Because the WP Media Library only works with logged users.

ACF Extended allows you to select which “Uploader Type” you want in your ACF Image Field setting. However, ACF will force the “Browser Uploader” if the user is not logged-in. So this setting is useful if you want to display the “Browser Uploader” even for logged-user in the back-end, and have an identical experience on front-end and back-end for example.

If you want to display an image preview with the “Browser Uploader”, you’ll have to code it yourself using the JS API, see my previous answer on this topic.

The ACF support told you the ACF Image Field display a preview because you probably forgot to mention you’re using the “Browser Uploader” type, or that you display the field on the front-end for non-logged users.

Regards.

Konrad,

Here’s the response from Noah at WP-Engine

Noah MuneneToday at 10:58

Hi Pete,

Sorry, but when using the ACf form feature – https://www.advancedcustomfields.com/resources/create-a-front-end-form/ – the preview of an uploaded image will always show.

Can we have a link to the page with this form so we take a better look?
Thanks.
Noah. 

Hello,

Please read again my previous answer for a technical explanation of your use case.

The ACF Support probably doesn’t have the full context of your use case, so I would suggest to give them more details.

I’ve provided all the support possible regarding your question on this topic. If you want to discuss with the ACF Support, please go ahead but there is no need to paste/link the discussion here.

If you want to proof test it, then setup a clean WP Install with ACF only (without ACF Extended), display an ACF Image Field on the front-end with the native acf_form() feature (see documentation), and try to upload an image as a non-logged user. You’ll get the same result.

The WP Media Modal is simply not compatible with non-logged user (see my previous answer).

Regards.

Note: You’ll find topics about this behavior on the ACF Forum. Also, the same problem occurs for the ACF Gallery field which requires the WP Media Modal to work, and thus, will not work for non-logged users on the front-end.

• Gallery field in a front-end form for non-logged-in users
• Upload Image – Non Logged In User
• Acf form with basic uploader for a gallery field
• Hiding media library from users
• Upload image/file on frontend with media uploader

Regards.

I’m sorry for being such a pain, I didn’t realise you had responded twice, pn only read the last entry.

Thankyou for the explanation

Regards

Pete

Just to let you know, I have managed to get this working and the code is fairly simple. It needs to be loaded in the html before the form, but otherwise, except for the max-width, nothing else needs changing. I thought other users might find this helpful.

function showPreview(event) {
  if (event.target.files.length > 0) {
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.querySelector('img[data-name="image"]');
    
    if (preview) {
      preview.src = src;
      preview.style.display = "block";
    } else {
      console.error('No img element found with data-name="image"');
    }

    // Change the element with the class "show-if-value"
    var showIfValueElement = document.querySelector('.show-if-value');
    
    if (showIfValueElement) {
      showIfValueElement.style.display = "block";
      showIfValueElement.style.maxWidth = "50%";
    } else {
      console.error('No element found with the class "show-if-value"');
    }
  }
}



document.addEventListener('DOMContentLoaded', () => {
  const inputElement = document.getElementById('acf-field_6047dd21ff42d');
  
  if (inputElement) {
    inputElement.addEventListener('change', showPreview);
  } else {
    console.error('No element found with the ID "acf-field_6047dd21ff42d"');
  }
});

Thanks again for all of your help, you pointed me in all the right directions.

Regards

Pete