pzh20

Hi Again,

Yes this is the same form as previously, i have not changed the form, b ut the underlying Field Group has changed. I’ve set the source to {form:photo_id}, and I’m querying the same post to add the Featured Image and Post Title befor the form.
I’ve tried adding a hook to dump the content of the form but it doesn’t seem to be being called.

add_action('acfe/form/submit_post/form=photo-add2', 'photo2-front_end_after_save_post', 10, 4);

function photo2_front_end_after_save_post( $form, $post_id ){
	error_log( print_r( $form, true ) );
	error_log( print_r( get_fields($post_id), true ) );
    write_log('Inside PHO - Check data returned (acf extended form)');

    // Get ACF fields
    
}

Not sure what else I can do.

Regards

Pete

I’m so pleased to hear that, I’m a bit jumpy after 2 expensive plugins i bought have been abandonen and I haven’t had a response fro 3 months.

Thanks again for your help

Pete

I jumped the gun, it is not saving the post. I have made changes to the underlying field group so here is the json file if it helps.

Many thanks
Pete

acfe-export-form-photo-add2-2024-10-23.json

I believe I fixed this

Hi Knorad,

I have reconfigured my field groups with a bi-directional relationship sepaerated from the repeater after you confirmed that it cannot reside inside it. This however changes the logic of my page as follows;

FROM
1, load image from PostID in URL
2, Once loaded, run Javascript calling external API, then
3, Click the ‘Add Row’ button on the ACF/E form n times (provided from API)
4, Update 4 fields on each added row
5, allow the user to continue updating the form and submit

TO
1, load image from PostID in URL
2, Once loaded, run Javascript calling external API, then
3, add x rows to the repeater field in the field group via JavaScript and add the data as in 4 above
4, Show the the form and allow the user to update and submit

I’ve thought about possibly creting an intermediate page between the image upload and this page doing the repeater fields addition, but this might now be the best approach.

Any input to this would be grately appreciated.

Ah, that`s not what I hoped for. Thanks Konrad

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

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

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. 

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

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

I think I need to add both of the field groups to the form? Then I suppose I can render the fields in the order I need.

Regards

Pete

Many thanks

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

Konrad,

I’m not sure why you cannot see the third screenshot as it is there (here’s just the third on Field-Groups-?-The-Harrison-Family-—-WordPress.png).

I have the ‘Family Members’ field group, and a custom taxonomy, ‘Genders’ with a field group of Gender Fields which contains a select field for the gender.

In the front end form to create a new Family Member, I need to show the Gender select as well as the other fields from the Family Members (the latter is working fine).

I’d really like to include the Gender select field within the fields of the Family Members, or at the side like it is seen on the backend.

Regards

Pete