Support

Account

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

Helping

Front End User Profile Edit – Image Upload & Save

  • 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:

    Background Image Upload

    Thank you everyone in advance!

  • 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.

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

You must be logged in to reply to this topic.