Custom upload field in wordpress user profile

2 Views

I’m trying to allow users to upload a profile image on their user profile editing page, here’s the code for the upload form: 

function add_extra_profile_fields($user) {
    $output = '<h3>صورة المستخدم</h3>

    <table class="form-table">

        <tr>
            <th><label for="twitter">صورة المستخدم</label></th>

            <td>
                <img class="video_author_img" src="'.ms_user_img_single_php($user->ID, false).'" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <input type="file" id="admin_user_photo" name="admin_user_photo" class="form-text" /><br />
                <span class="description">لأفضل نتيجة يرجى استخدام صورة 90px في 90px  - الحجم الأقصى 2 ميجا</span>
            </td>
        </tr>

    </table>';

    echo $output;
}
add_action('edit_user_profile', 'add_extra_profile_fields');
add_action('show_user_profile', 'add_extra_profile_fields');

The next function should be saving the uploaded image and handle cropping and placing it with another function:

Read More
function my_save_extra_profile_fields( $user_id ) {

    if ( !current_user_can( 'edit_user', $user_id ) )
        return false;

    // User image upload
    $allowedTypes = array('image/gif', 'image/jpeg', 'image/png');

    if (in_array($_FILES["admin_user_photo"]["type"], $allowedTypes) && ($_FILES["admin_user_photo"]["size"] < 1048576)){

        ms_upload_crop_image('admin_user_photo', $user_id, '../../uploads/user_images/', 90, 90);

    }
}
add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

I also changed the enctype of the form with jquery: 

$('form#your-profile').attr('enctype', 'multipart/form-data');

The problem is that the browser doesn’t even upload an image as if the field doesn’t exist, any idea what the problem is?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You should change two parametres in your-profile form, not one. May be it would help:

      form.encoding = "multipart/form-data";
  form.setAttribute('enctype', 'multipart/form-data');

    And i suggest you to use ready plugin for this purpose, called Add local avatar(http://wordpress.org/extend/plugins/add-local-avatar/) Or if you insist on using your own code, then just download the plugin and investigate it’s simple source code. Compare them and find your mistakes.