Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
1  
Check this out, use the built-in Plupload plugin kovshenin.com/2012/… –  soulseekah Mar 28 '12 at 12:31
    
The profile images need to be added to a specific folder and the path has to be added to a specific user_meta field so the profile page can load the image connected to a user ID with <?php if(get_the_author_meta( 'userphoto_thumb_file', $getId )!=""){?> <img src="<?=$uploads['baseurl'];?>/thumbs/<?=get_the_author_meta( 'userphoto_thumb_file', $getId );?>" /> I do not see how Koshenin's code can achieve that. But will check it out. Saw you helped with it too Soulseekah! –  rhand Mar 28 '12 at 14:30
    
@Soulseekah That plugin's drag-and-drop feature is really cool I must say! But for my situation I only need a profile image uploader to work. I do hope your brother's plugin gets to be accepted to core as it is awesome! –  rhand Mar 28 '12 at 14:50
    
Perhaps an implementation such as at plupload's sample could be a cool thing. Just need to en-queue scripts properly and pick a <div> as uploader it seems. Only need data to be stored for a user so a particular image is loaded per profile. –  rhand Mar 28 '12 at 15:07
add comment

3 Answers

up vote 0 down vote accepted

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.

share|improve this answer
add comment

$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

share|improve this answer
    
I have updated code -see pastebin.com/YGYz3Qnv - and made $profilePicture global. Thanks for the heads up! How can I add more validation to check if the variable is empty? isset() is already added.. And I still think I have a $_POST issue too.. –  rhand Mar 29 '12 at 12:22
    
I prefer to use if(empty()){ as it also checks for empty arrays, you may also need to make the form use multipart encoding, though I don't remember a site/answer explaining that, so Ill post shortly, but refer to the User Photo plugin –  Tom J Nowell Mar 29 '12 at 12:59
    
Looking at the pastebin, you haven't made the variable a global at all, looking at the relevant function it looks identical, there is no global $profilePicture; in the custom_img_uploader function –  Tom J Nowell Mar 29 '12 at 14:15
    
Seeing your entire code, I'm not sure why the upload process itself is in a separate function on an init hook, would it not be better immediatley above the update_usermeta calls? –  Tom J Nowell Mar 29 '12 at 14:16
    
I think it would be better to use something like the UserPhoto plugin instead, it works and it has more features and options –  Tom J Nowell Mar 29 '12 at 14:16
show 5 more comments

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

share|improve this answer
    
Checked it our and was wondering about using some of its code - see update in question. –  rhand Mar 29 '12 at 12:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.