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.