How can i upload images in an admin page?

Question

I am trying to upload images in the user profile admin page i have found the function media_handle_upload in the codex here but there is something wrong, i keep getting error Uploading. I don't know if there is something missing in the code.

I had also tried to use the same function in the user-edit page but i keep getting "invalid user ID" error.

function image_up_gall(){
?>
<form id="featured_upload" method="post" action="#" enctype="multipart/form-data">
    <input type="file" name="my_image_upload" id="my_image_upload"  multiple="false" />
    <input type="hidden" name="post_id" id="post_id" value="1" />
    <?php wp_nonce_field( 'my_image_upload', 'my_image_upload_nonce' ); ?>
    <input id="submit_my_image_upload" name="submit_my_image_upload" type="submit" value="Upload" />
</form>
<?php
// Check that the nonce is valid, and the user can edit this post.
if ( 
    isset( $_POST['my_image_upload_nonce'], $_POST['post_id'] ) 
    && wp_verify_nonce( $_POST['my_image_upload_nonce'], 'my_image_upload' )
    && current_user_can( 'edit_post', $_POST['post_id'] )
) {
    // The nonce was valid and the user has the capabilities, it is safe to continue.

    // These files need to be included as dependencies when on the front end.
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
    require_once( ABSPATH . 'wp-admin/includes/media.php' );

    // Let WordPress handle the upload.
    // Remember, 'my_image_upload' is the name of our file input in our form above.
    $attachment_id = media_handle_upload( 'my_image_upload', $_POST['post_id'] );

    if ( is_wp_error( $attachment_id ) ) {
        // There was an error uploading the image.
        echo "error Uploading";
    } else {
        // The image was uploaded successfully!
        echo "Successfully Uploaded";
    }

} else {

    // The security check failed, maybe show the user an error.
    echo "security check error";
}
}
add_action('edit_user_profile', 'image_up_gall');
add_action('show_user_profile', 'image_up_gall');

Answer 1

First of all edit_user_profile and show_user_profile action hooks don't have to save the image, you can just add a field there. So

function image_up_gall(){
?>

    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
 <?php
}
add_action('edit_user_profile', 'image_up_gall');
add_action('show_user_profile', 'image_up_gall');

It is because WordPress has its own form tag already, just make sure that it has enctype="multipart/form-data"

Second step, using personal_options_update and edit_user_profile_update you can save the form/upload imag, to do so, use this code:

function save_profile_fields( $user_id ) {
$target_dir = "uploads/"; // I recommend to use wp_upload_dir() to get the correct path
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image 
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            // here the image is uploaded and we can save it to user profile with:
            update_usermeta( $user_id, 'profile_pic', $target_file );
    }
}

add_action( 'personal_options_update', 'save_profile_fields' );
add_action( 'edit_user_profile_update', 'save_profile_fields' );

But I recommend you to use WordPress default media library to do that, there is a lot of code, so I better give you a link to the tutorial: https://rudrastyh.com/wordpress/customizable-media-uploader.html