Frontend image uploading from edit profile page. (goldenapples)

Question

I have been following goldenapples front end file uploads tutorial, however i do have that working for my frontend posting page, but what i am wanting to accomplish now is to add an image from edit profile page (again this is a frontend file upload scenario.

In theme functions.php i have:

function insert_complogo($file_handler,$user_id,$setthumb='false') {
// check to make sure its a successful upload
if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
require_once(ABSPATH . "wp-admin" . '/includes/file.php');
require_once(ABSPATH . "wp-admin" . '/includes/media.php');

$attach_id = media_handle_upload( $file_handler, $user_id );

if ($setthumb) update_usermeta($user_id,'_thumbnail_id',$attach_id);
return $attach_id;
}  

In my profile-edit.php at the top i have:

if ($_FILES) {
foreach ($_FILES as $file => $array) {
$newupload = insert_complogo($file,$user_id);
}
}  

also this:

if ( !empty( $_POST['authorphoto'] ) )
    update_usermeta( $current_user->id, 'comp_logo', esc_attr($_POST['comp_logo']   ) );   

and my input type is:

<p>
   <label><?php _e('Add Company Logo', 'comp_logo') ?></label><br /> 
                        <input type="file" name="comp_logo" id="comp_logo" value="Upload Logo" size="50" />
</p>  

As you can tell from the first three blocks of code above i have changed post_id references to user_id,

Now the upload of the company logo does work, however even using user_id and update_usermeta the info is being saved into wp_postmeta table which is not where i want it to be as i need to pull the info from wp_usermeta to populate the author.php page.

So my question (got there eventualy) is why when im using update_usermeta is the attachment info going into wp_postmeta, im guessing its because codex says that image attachments are a type of post so no matter what that is where they go, but how can i get that image from wp_postmeta and associate it with the correct author?

Answer 1

the problem is in this line :

$attach_id = media_handle_upload( $file_handler, $user_id );

when you use media_handle_upload and provide a second parameter (which in your case you do) the the attachment is associated with a post that has that ID, so basically WordPress thinks your are telling it to save this as an attachment to a post which has the same id as the user and that is way it is saved in the postmeta table.

now the quick fix is to remove $user_id from that line:

$attach_id = media_handle_upload( $file_handler);

next I'm pretty sure that this part does nothing:

if ( !empty( $_POST['authorphoto'] ) )
    update_usermeta( $current_user->id, 'comp_logo', esc_attr($_POST['comp_logo']   ) );  

since input fields with type="file" are not included in $_POST but in $_FILES.

and to display the image on the author template you can use wp_get_attachment_image_src something like this:

$image_attributes = wp_get_attachment_image_src( get_usermeta($user_id,'_thumbnail_id',true )); // returns an array
echo '<img src="'.$image_attributes[0].'">';

Answer 2

Actually got around it by making a plugin that can either shortcode a hook into a user edit page from frontend or by using a seperate shortcode in a sidebar. Below is the crux of it, just need to do some bits and bobs with the error reporting.

require(ABSPATH . WPINC . '/pluggable.php');

define('WP-AUTHOR-LOGO_VERSION', '0.3.0');
define('WP-AUTHOR-LOGO_PLUGIN_URL', plugin_dir_url( __FILE__ ));

register_activation_hook(__FILE__, 'wpal_createfolder');

function wpal_createfolder() {
$target = ABSPATH . 'wp-content/uploads/wpal_logos';
wp_mkdir_p( $target );
}

// Directory for uploaded images 
$uploaddir = ABSPATH . 'wp-content/uploads/wpal_logos';  

// Allowed mimes    
$allowed_ext = "jpg, gif, png";  

// Default is 50kb 
$max_size = get_option(wpal_size);  

// height in pixels, default is 175px 
$max_height = get_option(wpal_height);  

// width in pixels, default is 450px 
$max_width = get_option(wpal_width);  


// Check mime types are allowed  
$extension = pathinfo($_FILES['wpaluploader']['name']);  
$extension = $extension[extension];  
$allowed_paths = explode(", ", $allowed_ext);  
for($i = 0; $i < count($allowed_paths); $i++) {  
if ($allowed_paths[$i] == "$extension") {  
    $ok = "1";  
}  
}  

// Check File Size  
if ($ok == "1") {  
if($_FILES['wpaluploader']['size'] > $max_size)  
{  
    print "Image size is too big!";  
    exit;  
}  

// Check Height & Width  
if ($max_width && $max_height) {  
    list($width, $height, $type, $w) = getimagesize($_FILES['wpaluploader']['tmp_name']);  
    if($width > $max_width || $height > $max_height)  
    {  
        print "Image is too big! max allowable width is&nbsp;" . get_option(wpal_width) ."px and max allowable height is&nbsp;" . get_option(wpal_width) ."px";  
        exit;  
    }  
}  
global $user_id;
get_currentuserinfo();
$image_name=$current_user->id.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)

// Rename file and move to folder
$newname="$uploaddir./".$image_name;  
if(is_uploaded_file($_FILES['wpaluploader']['tmp_name']))  
{ 
    move_uploaded_file($_FILES['wpaluploader']['tmp_name'], $newname);  
}  
print "Your image has been uploaded successfully!";  
}


// Create shortcode for adding to edit user page
add_shortcode("wp-author-logo", "wpaluploader_input");

function wpaluploader_input() {
$wpaluploader_output = wpaluploader_showform();
return $wpaluploader_output;
}

function wpaluploader_showform() {
$wpaluploader_output = '<p><label for="wpauploader">Upload Company Logo:</label><br />
<input type="file" name="wpaluploader" id="wpaluploader" />
<br />
<small style="color:#ff0000; font-size:0.7em;">Allowed image types are .jpg, .gif, .png.<br />
Max image width = ' . get_option(wpal_width) . 'px, Max image height = ' . get_option(wpal_height) . 'px </small>';
return $wpaluploader_output;
}

// Create other Shortcode for full form
add_shortcode("wp-author-logofull", "wpaluploader_inputfull");

function wpaluploader_inputfull() {
$wpaluploader_outputfull = wpaluploader_showformfull();
return $wpaluploader_outputfull;
}

function wpaluploader_showformfull() {
$wpaluploader_outputfull = '<form method="post" id="adduser" action="' . str_replace( '%7E', '~', $_SERVER['REQUEST_URI']) .'" enctype="multipart/form-data">
<p><label for="wpauploader">Upload Company Logo:</label><br />
<input type="file" name="wpaluploader" id="wpaluploader" />
<br />
<input name="updateuser" type="submit" id="updateuser" class="submit button" value="Upload" />
                        ' . wp_nonce_field( 'update-user' ) . '
                        <input name="action" type="hidden" id="action" value="update-user" />
<small style="color:#ff0000; font-size:0.7em;">Allowed image types are .jpg, .gif, .png.<br />
Max image width = ' . get_option(wpal_width) . 'px, Max image height = ' . get_option(wpal_height) . 'px </small>';
return $wpaluploader_outputfull;
} 

add_action('admin_menu', 'wpal_menu');

function wpal_menu() {
add_options_page('WP Author Logo', 'WP Author Logo', 'manage_options', 'wpal_wp-author-logo', 'wpal');
}

function wpal() {
if (!current_user_can('manage_options'))  {
    wp_die( __('You do not have sufficient permissions to access this page.') ); 
}
?>   
<div class="wrap">
<div class="leftwrap">
    <?php    echo "<h2>" . __( 'Wordpress Author Logo Plugin', 'wpal_lang' ) . "</h2>"; ?>

    <?php  
        if($_POST['wpal_author_logo_success'] == 'Y') {  
            //Form data sent  
            $wpal_width = $_POST['wpal_width'];  
            update_option('wpal_width', $wpal_width);  

            $wpal_height = $_POST['wpal_height'];  
            update_option('wpal_height', $wpal_height);

            $wpal_size = $_POST['wpal_size'];  
            update_option('wpal_size', $wpal_size);    

            $wpal_logos = $_POST['wpal_logos'];  
            update_option('wpal_logos', $wpal_logos); 
        ?>  
        <div class="updated"><p><strong><?php _e('WP Author Logo Plugin Options Saved.' ); ?></strong></p></div>  
        <?php  
        } else {  
            //Normal page display  
            $wpal_width = get_option('wpal_width');  
            $wpal_height = get_option('wpal_height');
            $wpal_size = get_option('wpal_size');  
            $wpal_logos = get_option('wpal_logos');    
        }  
    ?>    

    <form name="wpal_settingsform" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">  
        <input type="hidden" name="wpal_author_logo_success" value="Y">  
        <?php    echo "<h4>" . __( 'Wordpress Author Logo Settings', 'wpal_lang' ) . "</h4>"; ?>  
        <p><label for="wpal_width"><?php _e("Maximum Width: " ); ?></label><br /><input type="text" name="wpal_width" value="<?php echo $wpal_width; ?>" size="20"><?php _e("px"); ?></p>  
        <p><label for="wpal_height"><?php _e("Maximum Height: " ); ?></label><br /><input type="text" name="wpal_height" value="<?php echo $wpal_height; ?>" size="20"><?php _e("px" ); ?></p>
        <p><label for="wpal_size"><?php _e("Maximum Size: " ); ?></label><br /><input type="text" name="wpal_size" value="<?php echo $wpal_size; ?>" size="20"><?php _e("Bytes: hint 50000 bytes = 50Kbs" ); ?></p>  
        <p><label for="wpal_logos"><?php _e("Logo Images Folder: " ); ?></label><br /><input type="text" name="wpal_logos" value="<?php echo $wpal_logos; ?>" size="20"><?php _e(" ex: /wpal_logo_images/" ); ?></p>  

        <p class="submit">  
            <input type="submit" name="Submit" value="<?php _e('Update Options', 'wpal_lang' ) ?>" />  
        </p>  
    </form>
</div><!-- / leftwrap -->
</div><!-- / wrap -->
<?php } ?>