Support

Account

Home Forums Backend Issues (wp-admin) Custom Image Upload save to ACF Image Field in ACF Frontend Form

Solved

Custom Image Upload save to ACF Image Field in ACF Frontend Form

  • I am trying to implement a custom image upload with a cropping feature. The Upload will happen in a frontend form (acf_form). The cropping plugin i use is croppie.js. What i did:

    • created a acf image field
    • implemented the cropping action with a custom input and preview

    everything works as expected but now im struggling to pass the cropped image data to my acf_image field to let it upload into the medialibrary and map to that post.

    the croppie plugin gives back a base64 imagedata.

    i tryed to append the data to the acf_field inputs

    
    <label class="acf-basic-uploader">
    <input type="file" name="acf[field_606445890ea6f]" id="acf-field_606445890ea6f">			</label>
    

    aswell as on this input the with jquery .val(resp)

    
    <div class="acf-image-uploader" data-preview_size="thumbnail" data-library="all" data-mime_types="" data-uploader="basic">
    <input type="hidden" name="acf[field_606445890ea6f]" value="">	<div class="show-if-value image-wrap" style="max-width: 150px">
    </div>
    

    but still it does not upload the image.

    Does anyone have an idea how i can achieve this?

    The return options of the cropped image can be:

    ‘base64’ returns a the cropped image encoded in base64
    ‘html’ returns html of the image positioned within an div of hidden overflow
    ‘blob’ returns a blob of the cropped image
    ‘rawcanvas’ returns the canvas element allowing you to manipulate prior to getting the resulted image

    When i use the image field directly it gives me this as value of the input

    url=C%3A%5Cfakepath%5Cmytestimage.png

    when i give back my base64 data this will be overwritten

  • I don’t know how you can do this.

    An ACF image field only stores the image ID and there isn’t any way to have ACF store additional data for the image.

    Possible solution:
    1) Store the generated value in a hidden field
    2) Create an acf/save_post filter that gets the hidden value and makes any needed changes to the attachment post for the image or its meta values that you’ll need for displaying this image. Maybe you need to somehow insert the image into the media library and alter the image ID stored by ACF. I am not familiar with how you can do this with the data that will be provided. You might potentially start here https://rudrastyh.com/wordpress/how-to-add-images-to-media-library-from-uploaded-files-programmatically.html

  • Thanks John for this approach. i did it similiar i just save the base64 enc. image to an ACF Textfield and use this as img src where i need it.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.