I'm a beginner writing website and use WordPress and I'm writing plugin that involves profile page (not avatar because this field that I implemented, user can upload image, anything, i.e. Picture of my friends) and I added field upload that browse file from directory and save them to database using WordPress' wp_handle_upload. I ran my code then the picture doesn't show I don't know which part of my code (below) is wrong.

What should I do to solve this problem!

Here is my code that I modified from this discussion

add_action( 'user_edit_form_tag','make_uploadable_form');
function make_uploadable_form() {
echo ' enctype="multipart/form-data"';

Here is the HTML code

add_action( 'show_user_profile', 'UploadField' );
add_action( 'edit_user_profile', 'UploadField' );

function UploadField( $user ) { 
if ( !current_user_can( 'edit_user') )
    return false;
$prfile_image_id = get_user_meta($user->ID,'profile_photo',true);
$profile_image = wp_get_attachment_image($profile_image_id,"full");

    echo $profile_image;

<h3>Extra profile information</h3>

<table class="form-table">
        <th><label for="Upload">Upload</label></th>
                <input name="profile_photo" type="file" id="profile_photo" value="" />



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

function save_user_custom($user_id){

if($user_id == false)
    return false;

// If the upload field has a file in it

    // Get the type of the uploaded file. This is returned as "type/extension"
    $arr_file_type = wp_check_filetype(basename($_FILES['profile_photo']['name']));
    $uploaded_file_type = $arr_file_type['type'];
    // Set an array containing a list of acceptable formats
    $allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');
    // If the uploaded file is the right format
    if(in_array($uploaded_file_type, $allowed_file_types)) {
        // Options array for the wp_handle_upload function. 'test_upload' => false
        $upload_overrides = array( 'test_form' => false ); 

        // Handle the upload using WP's wp_handle_upload function. Takes the posted file and an options array
        $uploaded_file = wp_handle_upload($_FILES['profile_photo'], $upload_overrides);

        // If the wp_handle_upload call returned a local path for the image
        if(isset($uploaded_file['file'])) {

            // The wp_insert_attachment function needs the literal system path, which was passed back from wp_handle_upload
            $file_name_and_location = $uploaded_file['file'];

            // Generate a title for the image that'll be used in the media library
            $file_title_for_media_library = 'your title here';

            // Set up options array to add this file as an attachment
            $attachment = array(
                'post_mime_type' => $uploaded_file_type,
                'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),
                'post_content' => '',
                'post_status' => 'inherit'

            // Run the wp_insert_attachment function. This adds the file to the media library and generates the thumbnails. If you wanted to attch this image to a post, you could pass the post id as a third param and it'd magically happen.
            $attach_id = wp_insert_attachment( $attachment, $file_name_and_location );
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            $attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );
            wp_update_attachment_metadata($attach_id,  $attach_data);

            update_user_meta( $user_id, 'profile_photo', $attach_id );


  • global $_FILES,$_POST; is not neccessary. Both are superglobals.
    – Ralf912
    May 6, 2013 at 7:51
  • Why don't you try to use wordpress default uploader, you can add it as a custom uploader in a page whereever you want.
    – Kumar
    May 6, 2013 at 7:57
  • becase wordpress default uploader has more features than i need and i want only click browse file->select file from directory and then click save (not gallery after click save)
    – Monogot
    May 6, 2013 at 8:01
  • i used to use wordpress default uploader and i can unset from url tab and media library but reason that i change my think to write plugin doesn't user uploader wordpress because first user click select file after description show that user can edit or not but user must click insert into post that i don't wan't Can you advise me on what to do?
    – Monogot
    May 6, 2013 at 8:38
  • Okk, then will help you with your custom code
    – Kumar
    May 6, 2013 at 9:10

1 Answer 1


Output during saving

You can not print something during the data is saved. If you use die( var_dump( $your_var ) ); it will print the values, but also stops the script. The reason is, first the data will be parsed. Then you will be redirected back to profile.php. So everything you print while parsing the data, will be lost when you got redirected.

You have to get the user metas and check if an image was saved in the user metas.

function UploadField( $user ) {
  if ( ! current_user_can( 'edit_user' ) )
    return false;

$profile_image_id = get_user_meta( $user->ID, 'profile_photo', true );
$profile_image = wp_get_attachment_image( $profile_image_id );

if ( ! empty( $profile_image ) )
//display image
echo $profile_image;
// else 
// and/or display form for uplaod image

Some issues with the code

if ( ! current_user_can( 'edit_user' ) )
  return false;

current_user_can() expect only one parameter.

update_user_meta( $user_id, 'profile_photo', $_POST['profile_photo'] );

$_POST is a superglobal, it does not contain the informations you want. replace var_dump( $uploaded_file ); with update_user_meta( $user_id, 'profile_photo', $attach_id ); (or replace $attach_id with the data you want to store)

  • i change my code but image doesn't show?
    – Monogot
    May 6, 2013 at 9:03
  • I submit upload file and then file save in the folder wp-content\plugins\new\image .Remain is display picture. above code in html part $profile_image return null.
    – Monogot
    May 6, 2013 at 10:37
  • This pastebin is the code I tested. Works perfectly for me.
    – Ralf912
    May 6, 2013 at 13:16
  • thank you Ralf912 i create new file and run agin it works perfectly(old code is be in a mess)
    – Monogot
    May 6, 2013 at 13:33
  • I try to implement input field is an array in addition to change profile_photo to profile_photo[] what part that i must change?
    – Monogot
    May 6, 2013 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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