Home Forums Front-end Issues Front End User Profile Edit – Image Upload


Front End User Profile Edit – Image Upload

  • Ok I’ve been trying lots of things but no success yet.

    I have a Front End User Profile Editing page on my site. One of the fields is an image upload field. I have NO problem editing & updating text fields for the user, so at least I have that part working.

    I want it to work like the standard image upload does.

    If no file exists -> show image upload button
    If image file does exist -> shows preview image with edit and delete buttons on hover

    Example Image Uploads

    And of course this needs to be saved to the user data for the person editing their profile page.

  • Hi @juiceex

    I believe that’s how ACF works. Could you please provide me with some screenshots of what’s going wrong on your end?


  • Ok well if the image upload field has a name of: logo_icon
    … and a field key of: field_56a256ab3721d

    How do I display the image upload button for my users to click on?

  • @James,

    Yea that doesn’t help me because I really want to format the layout of the fields. If I just display the fields like that I can’t control anything and it just spits them out 1 by 1.

    So far, I’ve managed to write this up: which works on the front end nicely… but it does NOT save the image to the user’s profile.

    	$field_key = "field_56a256d53721e";
    	$field = get_field_object($field_key, 'user_'.$current_user->ID);
    	if( $field )
    		echo '<input type="file" id="acf-' . $field['key'] . '" name="acf[' . $field['key'] . ']">';

    Do you have maybe something more complete that could help me with this issue?

    Here is a screenshot of how I have my file ACF field set up:

    Background Image Upload

  • Hi @juiceex,

    If you want to create the form manually, you need to save it manually too. Please take a look at the source code to learn more about it.

    If you need to change the layout, you can use a CSS code. You can also use a jQuery function like wrap to add an HTML element for each of the input.

    I hope this helps.

  • Hi @juiceex and @acf-support,

    Did you find a solution for this?
    Because I’m trying to do something similar with a custom form (no ACF_Form).
    And I just can’t get the image to be saved in the proper field.

    Could you please give more hints (or maybe a code snippet) on how to get uploaded images saved to Field Type: file when not using a ACF_Form?

  • Hi @woohoo

    If your custom form is able to upload the image and save it in the WordPress database (the images are showing up in the Media Library), then all you need to to is updating ACF database. You can do it by using the update_field() function after the image is uploaded correctly.

    Please keep in mind that ACF saves the image as the image ID in the database.

    I hope this helps 🙂

  • Hi James,

    Thank you, that did it!

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

You must be logged in to reply to this topic.