wp_enqueue_media(); in multiple widgets

Question

I have this code which works perfectly if you use a single widget. However if you create another widget the uploader will overwrite both widgets settings.

Does anyone know how this script can be modified to allow it to be used multiple times?

HTML

<p>
        <label for="<?php echo $this->get_field_name( 'image_url' ); ?>"><?php _e( 'Category Image:', 'text-domain' ); ?></label>
        <input name="<?php echo $this->get_field_name( 'image_url' ); ?>" id="<?php echo $this->get_field_id( 'image_url' ); ?>" class="widefat img custom_media_url" type="text" size="36"  value="<?php echo esc_url( $image_url ); ?>" />
        <input class="custom_media_upload" id="custom_media_button" type="button" value="<?php esc_attr_e('Upload Image', 'text-domain'); ?>" />
</p>

Javascript:

jQuery(document).ready( function($) {
function media_upload(button_class) {
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;

    $('body').on('click', button_class, function(e) {
        var button_id ='#'+$(this).attr('id');
        var self = $(button_id);
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(button_id);
        var id = button.attr('id').replace('_button', '');
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media  ) {
                $('.custom_media_url').val(attachment.url);
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
            return false;
    });
}
  media_upload('.custom_media_upload');
});

Answer 1

Your actual issue is that you are using $('.custom_media_url').val(attachment.url); without selecting the exact field you need. This selects every .custom_media_url field on the page, e.g. each field within each widget.

Since you are using jQuery, you can replace this line:

$('.custom_media_url').val(attachment.url);

with

$( e.target ).siblings( '.custom_media_url' ).val( attachment.url )

However, using wp.media.editor is not the perfect function to use, as it's meant to send images within the editor and this includes extra fields, like "link to" and etc. This is overkill for you.

I suggest trying the following snippet:

function media_upload( button_class ) {
    $( 'body' ).on( 'click', button_class, function( e ) {
        var $button = $( this ), frame;

        e.preventDefault();

        // Create a proper popup for selecting an image
        frame = wp.media({
            title:    'Select image',
            multiple: false,
            button: {
                text: 'Use this image'
            }
        });

        // Add a callback for when an item is selected
        frame.state( 'library' ).on( 'select', function(){
            var image = this.get( 'selection' ).first();

            // Inspect the image variable further
            // console.log( image.toJSON() )

            // Save the actual URL within the input
            $button.siblings( '.custom_media_url' ).val( image.get( 'url' ) );
        });

        // Finally, open the frame
        frame.open();
    });
}

This will use a proper media selection popup and although you would use the option to choose an image size there, there will be no meaningless options there either. Please keep in mind that I have not tested this code for errors.