Displaying image upload form on the frontend

  • Resolved caffeinehigh

    (@zaphan58)


    5 years, 8 months ago

    I have used the file_list to add a meta box to the user profile with the code below which works great. 

    add_action( 'cmb2_init', 'cmb_user' );

  function cmb_user() {

    $prefix = 'user_profile';

    $cmb_user = new_cmb2_box( array(
		'id' => $prefix .'_edit',
		'title' => esc_html__( 'User Profile Metabox', 'cmb2' ), // Doesn't output for user boxes
    'pages' => array( 'user' ), // Tells CMB to use user_meta vs post_meta
		'object_types'     => array( 'user' ), // Tells CMB2 to use user_meta vs post_meta
		'show_names'       => true,
		'new_user_section' => 'add-new-user', // where form will show on new user page. 'add-existing-user' is only other valid option.
	) );

    $cmb_user->add_field( array(
    'name' => 'User pictures',
    'desc' => 'Upload your pictures here',
    'id'   => $prefix.'_image_file_list',
    'type' => 'file_list',
    // 'preview_size' => array( 100, 100 ), // Default: array( 50, 50 )
    'query_args' => array( 'type' => 'image' ), // Only images attachment
    // Optional, override default text strings
    'text' => array(
      'add_upload_files_text' => 'Upload images', // default: "Add or Upload Files"
      'remove_image_text' => 'Remove image', // default: "Remove Image"
      'file_text' => 'File', // default: "File:"
      'file_download_text' => 'Download', // default: "Download"
      'remove_text' => 'Remove', // default: "Remove"
    ),
    ) );

  }

    However what I want to do is allow users to upload images to their profile on the frontend. I thought I would be able to do this using the cmb2_get_metabox_form function as seen on this page. However when I try that with the code below I get the error “Metabox configuration is required to have an ID parameter.” I am presuming because I am using the user meta there is no post ID to feed to the function? Does it need passing the user id? Any help appreciated. 

    $object_id = 'some-object-id';

  $form = '';

  $form = cmb2_get_metabox_form( 'user_profile_image_file_list', $object_id);

  return $form;
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Justin Sternberg

    (@jtsternberg)

    That’s right, $object_id will be the user ID.

    That snippet would look something like this in that case:

    <?php
add_shortcode( 'cmb-form', 'cmb2_do_frontend_form_shortcode' );
/**
 * Shortcode to display a CMB2 form for a post ID.
 * @param  array  $atts Shortcode attributes
 * @return string       Form HTML markup
 */
function cmb2_do_frontend_form_shortcode( $atts = array() ) {
	global $post;

	/**
	 * Depending on your setup, check if the user has permissions to edit_posts
	 */
	if ( ! current_user_can( 'edit_posts' ) ) {
		return __( 'You do not have permissions to edit this post.', 'lang_domain' );
	}

	/**
	 * Make sure a WordPress post ID is set.
	 * We'll default to the current post/page
	 */
	if ( ! isset( $atts['user'] ) ) {
		$atts['user'] = get_current_user_id();
	}

	// If no metabox id is set, yell about it
	if ( empty( $atts['id'] ) ) {
		return __( "Please add an 'id' attribute to specify the CMB2 form to display.", 'lang_domain' );
	}

	$metabox_id = esc_attr( $atts['id'] );
	$object_id = absint( $atts['user'] );
	// Get our form
	$form = cmb2_get_metabox_form( $metabox_id, $object_id );

	return $form;
}
    Thread Starter caffeinehigh

    (@zaphan58)

    Thank you that was a speedy reply! However running your exact code I still get the error “Metabox configuration is required to have an ID parameter.”

    The shortcode I am using is [cmb-form id=”user_profile_image_file_list”] and CMB2 version 2.6.0 . Any ideas?

    Many thanks!

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    From what I can see, you’d want to specify the ID as user_profile_edit based on 'id' => $prefix .'_edit',

    Thread Starter caffeinehigh

    (@zaphan58)

    Thank you well spotted! That was it, it works now.

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Awesome to hear.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Displaying image upload form on the frontend’ is closed to new replies.