You would just need to add a canUpload: true
to your control’s options (the 2nd parameter for wp.customize.Control
) and then the .actions
div would have an upload button.
However, clicking the button would not do anything (the media modal/popup would not appear), hence you need to instead use the specific class for image upload control, which is wp.customize.ImageControl
.
Working Example (tested with WordPress v5.9.3):
wp.customize.control.add( new wp.customize.ImageControl( myControlSettingID, {
section: 'issue_section_term_apple_section',
label: 'Custom image',
button_labels: {
select: 'Select image',
...
frame_title: 'Select image',
frame_button: 'Choose image'
},
canUpload: true,
setting: wp.customize( myControlSettingID )
} ) );
Remember though, that the image upload control will return only the image URL, so if you need its ID, then use new wp.customize.MediaControl
instead.
References, or resources that might help you further:
-
The
WP_Customize_Media_Control
class (see theto_json()
andget_default_button_labels()
methods). -
https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/
-
https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/
-
and the source code of
wp-admin/js/customize-controls.js
(see lines 7875-7881).
As for this:
I am trying to toggle this control based on the value of another
control. Will I need to manually bind the controls together?
Excerpt from the 3rd link/resource above:
There are also
activate()
anddeactivate()
methods now for
manipulating thisactive
state, for panels, sections, and controls.
The primary purpose of these states is to show or hide the object
without removing it entirely from the Customizer.
So if that’s your purpose, then you can use the above methods, like Twenty Twenty-One did, like so: (see assets/js/customize.js
)
// Wait until the customizer has finished loading.
wp.customize.bind( 'ready', function() {
// Hide the "respect_user_color_preference" setting if the background-color is dark.
if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
wp.customize.control( 'respect_user_color_preference' ).deactivate();
wp.customize.control( 'respect_user_color_preference_notice' ).deactivate();
}
...
} );