Wordpress User Profile Upload - If page is saved file reset

Question

I have various different extra profile fields which I have set in functions.php however with the upload one if a user uploads an image and saves the form the image is set, however if they go back and edit another field it sets the image field to null.

Here is the code I have in my functions.php file. Any help would be really appreciated.

     <?php

add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

function extra_user_profile_fields( $user ) { 

$r = get_user_meta( $user->ID, 'picture', true );
    ?>


<!-- Artist Photo Gallery -->
<h3><?php _e("Public Profile - Gallery", "blank"); ?></h3>

<table class="form-table">

<tr>
        <th scope="row">Picture</th>
        <td><input type="file" name="picture" value="" />

            <?php //print_r($r); 
                if (!isset($r['error'])) {
                    $r = $r['url'];
                    echo "<img src='$r' />";
                } else {
                    $r = $r['error'];
                    echo $r;
                }
            ?>
        </td>
    </tr>

</table> 



<?php
}

add_action( 'personal_options_update', 'save_extra_user_profile_fields' );
add_action( 'edit_user_profile_update', 'save_extra_user_profile_fields' );

function save_extra_user_profile_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) ) { return false; }

$_POST['action'] = 'wp_handle_upload';
$r = wp_handle_upload( $_FILES['picture'] );
update_user_meta( $user_id, 'picture', $r, get_user_meta( $user_id, 'picture', true ) );

}

}

add_action('user_edit_form_tag', 'make_form_accept_uploads');
function make_form_accept_uploads() {
    echo ' enctype="multipart/form-data"';
}

Answer 1

The last parameter of update_user_meta(), the previous value, is an optional parameter. If it's set it checks whether the value in the database is indeed the one you fed update_user_meta(). If you set that paramteter by grabbing the value from the database, it is completely redundant. So first off, omit that.

That being said, this is what solves your problem with overwriting:

if( $_FILES['picture']['error'] === UPLOAD_ERR_OK ) {
    $upload_overrides = array( 'test_form' => false ); // if you don’t pass 'test_form' => FALSE the upload will be rejected
    $r = wp_handle_upload( $_FILES['picture'], $upload_overrides );
    update_user_meta( $user_id, 'picture', $r );
}

The terminology is a bit confusing, since UPLOAD_ERR_OK is a status message and not an error, but that's how to check whether an upload was successful. If you make that the condition for saving the meta value, you're good to go.

For further reference on the $_FILES superglobal's errors or statuses, see Error Messages Explained from the PHP manual.

EDIT: How to get the URL of the uploaded image

This edit caters to the expanded question in the comment to this answer.

$pic_data = get_user_meta( $curauth->ID, 'picture', true );
$pic_url = $pic_data['url'];

will save the URL into a variable, which thereupon can be echoed wherever you want. Assuming that $curauth is the current user object. You could use the global WordPress variable $current_user instead, but if you have the object already, might as well go with that.

Answer 2

// for file upload
add_action('user_edit_form_tag', 'make_form_accept_uploads');
function make_form_accept_uploads() {
    echo ' enctype="multipart/form-data"';
}

function custom_user_profile_fields($user)
{
    if(is_object($user)) {
        $r = get_user_meta( $user->ID, 'portfolioimage', true );
    } else {
        $r = null;
    }

    ?>
    ## Heading ##
    <table class="form-table">
        <h3>Portfolio</h3>
        <tr>
            <th><label for="image">Portfolio Image</label></th>
            <td>
                <?php 
                    if (!isset($r['error'])) {
                        $r = $r['url'];
                        echo "<img src='$r' width='96' hieght='96'/>";
                    } else {
                        $r = $r['error'];
                        echo $r;
                    }
                ?>
                <br/>
                <span class="description">Please upload an image for your profile.</span>
                <br/>
                <input type="file" class="button-primary" value="Upload Image" id="portfolioimage" name="portfolioimage" multiple/><br />
            </td>
        </tr>
    </table>    
    <?php
}

add_action( "show_user_profile", "custom_user_profile_fields" );
add_action( "edit_user_profile", "custom_user_profile_fields" );
add_action( "user_new_form", "custom_user_profile_fields" );
function save_custom_user_profile_fields($user_id)
{
# again do this only if you can
if(!current_user_can('manage_options'))
    return false;

  if( $_FILES['portfolioimage']['error'] === UPLOAD_ERR_OK ) 
  {
    $upload_overrides = array( 'test_form' => false ); 
    $r = wp_handle_upload( $_FILES['portfolioimage'], $upload_overrides );
    update_user_meta( $user_id, 'portfolioimage', $r );
  }
}

add_action('user_register', 'save_custom_user_profile_fields');
add_action('profile_update', 'save_custom_user_profile_fields');