Front-End User Profile

Question

I have a front end user profile template I am working on, and everything is working fine except for upload a profile picture. I have a custom user field created and I am trying to use the button file type to upload the picture and store the URL in my custom field.

Take a look - https://pastebin.com/rPErwCgU

I'm currently already using this code for my front end post upload, it allows multiple pictures. I need to figure out how to do this for a user with only 1 photo and storing it in a custom field attached to the current user --

if (!empty($_FILES['sightMulti']['tmp_name'][0])) {
    $i = 1;
    $files = $_FILES['sightMulti'];
    foreach ($files['name'] as $key => $value) {
        if ($files['name'][$key]) {
            $file = array(
                'name' => $files['name'][$key],
                'type' => $files['type'][$key],
                'tmp_name' => $files['tmp_name'][$key],
                'error' => $files['error'][$key],
                'size' => $files['size'][$key]
            );
            $_FILES = array("sight" . $i => $file);
            $newuploadMulti = sight("sight" . $i, $pid);
            if ($i == 1) {
                update_post_meta($pid, '_thumbnail_id', $newuploadMulti);
            }
            add_post_meta($pid, 'imic_property_sights', $newuploadMulti, false);
        }
        $i++;
    }
}

The field in the form --

<div class="col-md-12 col-sm-12">
        <label><?php _e('Upload Images', 'framework'); ?></label>
        <p><?php _e('Upload images that are best clicked for better appearance of your property', 'framework'); ?></p> 
</div>
<div class="row" id="multiplePhotos" style="margin-top:15px;">
    <div class="col-md-12 col-sm-12">
        <?php
        echo'<div class="image-placeholder" id="photoList">';
        if (!empty($property_sights_value)) {
            foreach ($property_sights_value as $property_sights) {
                $default_featured_image = get_post_meta($Property_Id, '_thumbnail_id', true);
                if ($default_featured_image == $property_sights) {
                    $def_class = 'default-feat-image';
                } else {
                    $def_class = '';
                }
                echo '<div class="col-md-2 col-sm-2">';
                echo '<div id="property-img"><div id="property-thumb" class="' . $def_class . '"><a id="feat-image" class="accent-color default-image" data-original-title="Set as default image" data-toggle="tooltip" style="text-decoration:none;" href="#"><div class="property-details" style="display:none;"><span class="property-id">' . $Property_Id . '</span><span class="thumb-id">' . $property_sights . '</span></div><img src="' . wp_get_attachment_thumb_url($property_sights) . '" class="image-placeholder" id="filePhoto2" alt=""/></a>';
                if (get_query_var('site')) {
                    echo '<input rel="' . $Property_Id . '" type="button" id="' . $property_sights . '" value="Remove" class="btn btn-sm btn-default remove-image">';
                }
                echo '</div></div>';
                echo '</div>';
            }
        }
        echo '</div>';
        ?>
        <input id="filePhotoMulti" type="file" name="sightMulti[]" multiple onChange="previewMultiPhotos();">
    </div>
</div>

UPDATE

This is what I have right up top with the rest of my fields that save fine -

if ( !empty( $_POST['agent-image'] ) )
update_user_meta( $current_user->ID, 'agent_image', esc_attr( $_POST['agent-image'] ) );

if(!empty($_FILES)) {
$uploaddir = wp_upload_dir();

$file = $_FILES[agent-image];

$uploadfile = $uploaddir['path'] . '/' . basename( $file['name'] );

move_uploaded_file( $file['tmp_name'] , $uploadfile );

$filename = basename( $uploadfile );

$wp_filetype = wp_check_filetype(basename($filename), null );

$attachment = array(
    'post_mime_type' => $wp_filetype['type'],
    'post_title'     => preg_replace('/\.[^.]+$/', '', $filename),
);

$attach_id = wp_insert_attachment( $attachment, $uploadfile );
}

My input field --

<input type="file" name="agent-image">

How I'm using it on the author.php template --

<?php 
$author_pic = get_the_author_meta('agent-image', $user->ID);
echo '<div><img src="'. $author_pic .'" alt="'. $userName .'" class="img-thumbnail authppic"></div>'; ?>

UPDATE 2

Code is now causing that page to give me a HTTP 500 error --

if ( !empty( $_FILES[agent-image][name] )) {
$uploaddir = wp_upload_dir();

$file = $_FILES[agent-image];

$uploadfile = $uploaddir['path'] . '/' . basename( $file['name'] );

move_uploaded_file( $file['tmp_name'] , $uploadfile );

$filename = basename( $uploadfile );

$wp_filetype = wp_check_filetype(basename($filename), null );

$attachment = array(
    'post_mime_type' => $wp_filetype['type'],
    'post_title'     => preg_replace('/\.[^.]+$/', '', $filename),
);

$attach_id = wp_insert_attachment( $attachment, $uploadfile );
update_user_meta( $current_user->ID, 'agent_image', $attach_id ));
}

Answer 1

UPDATE: As mentioned in the comments, you might want to learn how you do things like create meta boxes and do a file upload in Wordpress without using a framework like CMB2 first. However, as a seasoned Wordpress developer, I have found that using CMB2 greatly increased my productivity.

I highly recommend using CMB2 to create a front end form for editing a user profile. I just did the same thing and I modified the code from these links:

• https://github.com/CMB2/CMB2/wiki/Bringing-Metaboxes-to-the-Front-end
• https://webdevstudios.com/2015/03/30/use-cmb2-to-create-a-new-post-submission-form/

You have 3 functions (function names are from the second linked article above): One registers the cmb2 fields

function wds_frontend_form_register() {
//code..
}

One create a shortcode for displaying the form:

function wds_do_frontend_form_submission_shortcode( $atts = array() ) {
//code..
}

and the third handles the submission of the form:

function wds_handle_frontend_new_post_form_submission( $cmb, $post_data = array() ) {
//code..
}

You can easily update your user instead of inserting a post here with wp_update_user() and update_user_meta().

Full code examples are available through the links. CMB2 field types reference docs here. Link to file field type (allowing image upload).

This linked example-functions.php also has an example for editing user profile fields (but this automatically hooks into the admin side). Handy if you also want to add fields there.

Good luck. I really recommend CMB2 it is brilliant.

Answer 2

if ( !empty( $_FILES[agent-image][name] ) ) {

                $file = $_FILES[agent-image];

                $file_return = wp_handle_upload( $file, array('action' => 'tm_about_you' ) );

                if( isset( $file_return['error'] ) || isset( $file_return['upload_error_handler'] ) ) {

                  return false;

                } else {

                    $filename = $file_return['file'];

                    $attachment = array(
                        'post_mime_type' => $file_return['type'],
                        'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
                        'post_content'   => '',
                        'post_status'    => 'inherit',
                        'guid' => $file_return['url']
                    );

                    $attachment_id = wp_insert_attachment( $attachment, $file_return['url'] );

                    // Generate the metadata for the attachment, and update the database record.
                    $attachment_data = wp_generate_attachment_metadata( $attachment_id, $filename );
                    wp_update_attachment_metadata( $attachment_id, $attachment_data );

                    update_user_meta( $current_user->ID, 'agent_image', $attachment_id ));

                }

            }