Front End User Profile Edit – Image Upload & Save

• juiceex

• February 10, 2016 at 3:28 am

Ok, I have read posts everywhere and just can’t get it to work for me.

I think I need a full solution/explanation from someone.. including what I should have in my child theme FUNCTIONS file as well as my custom template file.

GOAL: User logins and updates his user account information. They need the ability to upload some image files. I need that image to be saved into their user meta data (an ACF file field) so that when they return, they can still see the file they previously saved. I also do NOT want them to have access to the media library.

So what I have below is a simplified version of my current code. How do I get it to SAVE the image that a user uploads??

<?php
/*
Template Name: Video Set Up Page
*/

acf_form_head(); 

/* Get user info. */
global $current_user, $wp_roles;
?>
<!-- START THE CUSTOM SECTION -->

<div id="post-218">
	<form method="post" id="adduser" action="<?php the_permalink(); ?>">
		<div id="acf-form-data" class="acf-hidden">
			<input type="hidden" name="_acfnonce" value="87d0486349" />
			<input type="hidden" name="_acfchanged" value="0" />
		</div>

<!-- START VIDEO SET UP SECTION -->		
 <label for="email">Background Image</label>                              
<?php
	$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'] . ']">';
	}							
?>
<br />
Background Image: <?php the_author_meta( 'background_image', $current_user->ID ); ?>

	<input type="hidden" name="wlm_updating_profile" value="1" />
						
			<script type="text/javascript">
                function MoveWLMember(){
                    try{
                        var x=document.getElementById('WishListMemberUserProfile');
                        var p=x.parentNode;
                        var s=p.getElementsByTagName('h3');
                        p.insertBefore(x,s[0]);
                    }catch(e){}
                }
                MoveWLMember();
            </script>
                       
            <p class="form-submit">
                <input name="updateuser" type="submit" id="updateuser" class="submit button" value="Update Your Information" />
                <input type="hidden" id="_wpnonce" name="_wpnonce" value="c3b5a2056a" /><input type="hidden" name="_wp_http_referer" value="/success/" />
                <input name="action" type="hidden" id="action" value="update-user" />
            </p><!-- .form-submit -->
        </form><!-- #adduser -->
    </div><!-- .entry-content -->

    

<!-- END OF THE CUSTOM SECTION -->

Here is a screenshot of how I have the ACF filed set up:

Thank you everyone in advance!

• John Huebner

• April 6, 2016 at 10:54 am

Is there a reason you’re not using acf_form()?

When you use acf_form() additional JavaScript is added when there’s an image field. This extra JS will include a basic file/image uploader when the user does not have access to the media library. acf_form() also adds additional JS to the footer of the page that can cause the ACF fields not to save properly if it’s not included.