Get basic Image Uploader on User Profile Page

Question

I am trying to add an image uploader to the user profile pages. I do have it up and running on a basic registration page, but somehow the same, but slightly adjusted code does not work when added to functions.php. The field is loaded and WordPress does allow easy updating, but in profile view no image is shown. To get the image and store it I use

/********************************************************************
Profile Image Upload Field Code
*********************************************************************/
require_once( STYLESHEETPATH . '/img_upload_resize_crop.php' );

add_action( 'init', 'custom_img_uploader' );

function custom_img_uploader () {

    if (isset($_FILES['profilePicture']['name'])!= "" ) {

if ( $_FILES['profilePicture']['name']!="" ) {
    $your_image = new _image;
    $upload_dir = wp_upload_dir();
    //To Upload
    $your_image->uploadTo = $upload_dir['basedir'].'/';
    $upload = $your_image->upload($_FILES['profilePicture']);


    //To Resize
    $your_image->newPath = $upload_dir['basedir'].'/thumbs/';
    $your_image->newWidth = 150;
    $your_image->newHeight = 200;
    $resized = $your_image->resize();
    $profilePicture=str_replace($upload_dir['basedir'].'/thumbs/', "", $resized );
    unlink($upload);
}else{
    $profilePicture='';
}
}
}

To display the field in HTML I have:

<!-- begin image uploader field -->
<tr>
<th><label for="profilePicture"><?php _e("Profile Image"); ?></label></th>
<td>
<input type="file" name="profilePicture" id="profilePicture" style="float:left;" />
</td>
</tr>

And to save it I use this:

update_user_meta( $user_id, 'userphoto_thumb_height', 59);
update_user_meta( $user_id, 'userphoto_thumb_width', 80 );
update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture );

Does anyone see why in Profile View this code:

<?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?>
                        <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" />

does not load a stored image?

Update I and II

Basic debugging

Update III After adding an isset() I got a little further:

[28-Mar-2012 07:14:46] PHP Notice:  Undefined variable: profilePicture in /home/user/public_html/wp-content/themes/theme-name/functions.php on line 346

On that line I have update_user_meta( $user_id, 'userphoto_thumb_file', $profilePicture ); Seems like even though I have the variable profilePicture defined, it is not grabbed Was just a notice and does not seem to be relevant nor causing the upload issue.

Update IV

I wrapped the image uploader code in a function and added it as an action. See code with updates above. I still have an undefined variable profilePicture nor is the image uploaded. Entire functions.php file is here http://pastebin.com/YGYz3Qnv

Update V

I just realized I do not not have a good $_POST option for the profilePicture. Looking at the plugin mentioned by a @brasofilo at http://plugins.svn.wordpress.org/user-avatar/trunk/user-avatar.php I see this code I might be able to use, but I need to adjust it a lot:

<form enctype="multipart/form-data" id="uploadForm" method="POST" action="<?php echo admin_url('admin-ajax.php'); ?>?action=user_avatar_add_photo&step=2&uid=<?php echo $uid; ?>" >
            <label for="upload"><?php _e('Choose an image from your computer:','user-avatar'); ?></label><br /><input type="file" id="upload" name="uploadedfile" />
            <input type="hidden" name="action" value="save" />
            <?php wp_nonce_field('user-avatar') ?>
        <p class="submit"><input type="submit" value="<?php esc_attr_e('Upload'); ?>" /></p>
    </form>

I just wonder if a form is needed as it wasn't for the other text fields and how I need to add $user_id and how to adjust update_user_meta

Update VI

Made $profilePicture global as recommended by contributor

Update VII

Considering using option from Unrelated Media here. But as it will still take quite a bit for time for me to integrate this into my current functions.php I will keep this thread opened until I have managed to do this.

Answer 1

Check this plugin: User Avatar. You can use it or check its functions to adapt yours.

Answer 2

$profilePicture is defined outside the scope of the saving code and is never declared or used in the global scope.

As a result as soon as the upload function returns either the variable is garbage collected, or you're dealing with a completely different variable that shares the same name.

I would declare it as a global, and add more validation, such as checking if the variable is empty before trying to use it

Answer 3

Well thanks everyone for their suggestions. In the end I went for Woothemes Media Uploader integrations as you can see here at Github: https://github.com/devinsays/options-framework-plugin/blob/master/options-medialibrary-uploader.php It is integrated into a theme framework which I am integrating in my own theme so like this I can kill two birds with one stone.