ultimate member image upload

Ultimate Member Image Upload field

Since ultimate member plugin belongs to the top wordpress profile plugin, I choose to install it and used into one of my projects. Everything is going well until I came up the issue on image upload field that doesn’t work on the  general tab of the account page.

What I am trying to do here is to have an upload image in the registration page. That upload image from registration page should be displayed on the account tab. Unfortunately, the Ultimate Member has no easy feature yet to connect the custom fields from registration into account tab. You really need to code it. You can have the other fields to be displayed on the account tab but I found out that the image upload field is not working. Image won’t display and it does not save when you update your account.

I just wanted to share how do I get it working in this video.

The codes

These are the only codes I used to achieve the image upload working on the account tab. Don’t forget to replace the Form ID and the meta key of your image upload field.

The first filter called um_account_tab_general_fields where it will add the company_logo field as one of the field to be recognize by the ultimate member.

add_filter( 'um_account_tab_general_fields', 'showAccountExtraFields', 10, 2 );
/**
 * Register the company_logo field to recognize by the ultimate member
 * 
 * @param  [type] $args           [description]
 * @param  [type] $shortcode_args [description]
 * @return [type]                 [description]
 */
function showAccountExtraFields($args, $shortcode_args) {
    $args .= ',company_logo';
    return $args;
}

Second filter called um_predefined_fields_hook.

This function will add the image upload field to the general tab on the account page.

add_filter( 'um_predefined_fields_hook', 'xwb_predefined_fields_hook' );
/**
 * Add fields to general tab in account page
 *
 * @return [type] [description]
 */
function xwb_predefined_fields_hook($fields){

	// replace the value of 5 to the form ID you have on your registration form
    $post_data = UM()->query()->post_data( 5 );

    $customFields = maybe_unserialize($post_data['custom_fields']);

    $fields['company_logo'] = $customFields['company_logo']; // change the 'company_logo' into the meta key of your upload field


    return $fields;
}

The third filter is template_redirect where the image link or download routing modification goes.

add_action('template_redirect', 'xwb_download_routing',11);
/**
 * Download link customization
 *
 * @return [type] [description]
 */
function xwb_download_routing() {
    if ( 'download' !== get_query_var( 'um_action' ) ) {
        return false;
    }

    $query_form = get_query_var( 'um_form' );
    if ( empty( $query_form ) ) {
        return false;
    }

    $form_id = get_query_var( 'um_form' );
    $query_field = get_query_var( 'um_field' );
    if ( empty( $query_field ) ) {
        return false;
    }
    $field_key = urldecode( get_query_var( 'um_field' ) );
    $query_user = get_query_var( 'um_user' );
    if ( empty( $query_user ) ) {
        return false;
    }

    $user_id = get_query_var( 'um_user' );
    $user = get_userdata( $user_id );

    if ( empty( $user ) || is_wp_error( $user ) ) {
        return false;
    }
    $query_verify = get_query_var( 'um_verify' );
    if ( empty( $query_verify ) ||
        ! wp_verify_nonce( $query_verify, $user_id . $form_id . 'um-download-nonce' ) ) {
        return false;
    }

    um_fetch_user( $user_id );
    $field_data = get_post_meta( $form_id, '_um_custom_fields', true );

    if ( empty( $field_data[ $field_key ] ) ) {
        //return false;
    }

    if ( ! um_can_view_field( $field_data[ $field_key ] ) ) {
        return false;
    }

    $field_value = UM()->fields()->field_value( $field_key );
    if ( empty( $field_value ) ) {
        return false;
    }

    $download_type = $field_data[ $field_key ]['type'];
    if ( $download_type === 'file' ) {
        UM()->files()->file_download( $user_id, $field_key, $field_value );
    } else {
        UM()->files()->image_download( $user_id, $field_key, $field_value );
    }

    return false;
}

And the last one is called um_after_user_account_updated.

This function will be responsible on saving the image when the user click the update account button.

add_filter('um_after_user_account_updated','xwb_after_user_account_updated',10,2);
/**
 * Hook when updating an account
 *
 * @param  [type] $user_id [description]
 * @param  [type] $changes [description]
 * @return [type]          [description]
 */
function xwb_after_user_account_updated($user_id, $changes){
    $args['submitted'] = $changes;
    // replace the value of 5 to the form ID you have on your registration form
    $post_data = UM()->query()->post_data( 5 );
    $fields = maybe_unserialize($post_data['custom_fields']);

    // loop through fields
    if ( ! empty( $fields ) ) {

        foreach ( $fields as $key => $array ) {

            if ( ! isset( $array['type'] ) ) {
                continue;
            }

            if ( isset( $array['edit_forbidden'] ) ) {
                continue;
            }

            // required option? 'required_opt' - it's field attribute predefined in the field data in code
            if ( isset( $array['required_opt'] ) ) {
                $opt = $array['required_opt'];
                if ( UM()->options()->get( $opt[0] ) != $opt[1] ) {
                    continue;
                }
            }

            // fields that need to be disabled in edit mode (profile) (email, username, etc.)
            $arr_restricted_fields = UM()->fields()->get_restricted_fields_for_edit( $user_id );
            if ( in_array( $key, $arr_restricted_fields ) ) {
                continue;
            }

            if ( ! um_can_edit_field( $array ) || ! um_can_view_field( $array ) ) {
                continue;
            }

            //the same code in class-validation.php validate_fields_values for registration form
            //rating field validation
            if ( $array['type'] == 'rating' && isset( $args['submitted'][ $key ] ) ) {
                if ( ! is_numeric( $args['submitted'][ $key ] ) ) {
                    continue;
                } else {
                    if ( $array['number'] == 5 ) {
                        if ( ! in_array( $args['submitted'][ $key ], range( 1, 5 ) ) ) {
                            continue;
                        }
                    } elseif ( $array['number'] == 10 ) {
                        if ( ! in_array( $args['submitted'][ $key ], range( 1, 10 ) ) ) {
                            continue;
                        }
                    }
                }
            }


            /**
             * Returns dropdown/multi-select options keys from a callback function
             * @since 2019-05-30
             */
            $has_custom_source = apply_filters( "um_has_dropdown_options_source__{$key}", false );
            if ( isset( $array['options'] ) && in_array( $array['type'], array( 'select', 'multiselect' ) ) ) {

                $options = array();
                if ( ! empty( $array['custom_dropdown_options_source'] ) && function_exists( $array['custom_dropdown_options_source'] ) && ! $has_custom_source  ) {
                    $callback_result = call_user_func( $array['custom_dropdown_options_source'], $array['options'] );
                    if ( is_array( $callback_result ) ) {
                        $options = array_keys( $callback_result );
                    }
                }

                $array['options'] = apply_filters( "um_custom_dropdown_options__{$key}", $options );

            }


            //validation of correct values from options in wp-admin
            $stripslashes = '';
            if ( isset( $args['submitted'][ $key ] ) && is_string( $args['submitted'][ $key ] ) ) {
                $stripslashes = stripslashes( $args['submitted'][ $key ] );
            }

            if ( in_array( $array['type'], array( 'select' ) ) ) {
                if ( ! empty( $array['options'] ) && ! empty( $stripslashes ) && ! in_array( $stripslashes, array_map( 'trim', $array['options'] ) ) && ! $has_custom_source  ) {
                    continue;
                }

                //update empty user meta
                if ( ! isset( $args['submitted'][ $key ] ) || $args['submitted'][ $key ] == '' ) {
                    update_user_meta( $user_id, $key, '' );
                }
            }

            //validation of correct values from options in wp-admin
            //the user cannot set invalid value in the hidden input at the page
            if ( in_array( $array['type'], array( 'multiselect', 'checkbox', 'radio' ) ) ) {
                if ( ! empty( $args['submitted'][ $key ] ) && ! empty( $array['options'] ) ) {
                    $args['submitted'][ $key ] = array_map( 'stripslashes', array_map( 'trim', $args['submitted'][ $key ] ) );
                    $args['submitted'][ $key ] = array_intersect( $args['submitted'][ $key ], array_map( 'trim', $array['options'] ) );
                }

                // update empty user meta
                if ( ! isset( $args['submitted'][ $key ] ) || $args['submitted'][ $key ] == '' ) {
                    update_user_meta( $user_id, $key, array() );
                }
            }

            if ( isset( $args['submitted'][ $key ] ) ) {

                if ( isset( $array['type'] ) && in_array( $array['type'], array( 'image', 'file' ) ) ) {

                    if ( um_is_temp_file( $args['submitted'][ $key ] ) || $args['submitted'][ $key ] == 'empty_file' ) {
                        $files[ $key ] = $args['submitted'][ $key ];
                    } elseif( um_is_file_owner( UM()->uploader()->get_upload_base_url() . $user_id . '/' . $args['submitted'][ $key ], $user_id ) ) {

                    } else {
                        $files[ $key ] = 'empty_file';
                    }

                } else {
                    if ( $array['type'] == 'password' ) {
                        $to_update[ $key ] = wp_hash_password( $args['submitted'][ $key ] );
                        $args['submitted'][ $key ] = sprintf( __( 'Your choosed %s', 'ultimate-member' ), $array['title'] );
                    } else {
                        if ( isset( $userinfo[ $key ] ) && $args['submitted'][ $key ] != $userinfo[ $key ] ) {
                            $to_update[ $key ] = $args['submitted'][ $key ];
                        } elseif ( $args['submitted'][ $key ] != '' ) {
                            $to_update[ $key ] = $args['submitted'][ $key ];
                        }
                    }

                }

            }
        }
    }



    if ( ! empty( $files ) && is_array( $files ) ) {
        UM()->uploader()->replace_upload_dir = true;
        UM()->uploader()->move_temporary_files( $user_id, $files, true );
        UM()->uploader()->replace_upload_dir = false;
    }
}

Once you have applied all the codes above following the instruction by changing the form ID and the meta key, the upload image field should be working properly.

If you have any questions, don’t hesitate to comment below or shoot me an email via our contact form.

Leave a Reply