open media libray in custom widget

Question

I’ve read a nice tutorial on how to implement the media libray to select or upload images as a background of a custom widget, but I have a problem, the media library will not open and I will get also an error about the relative array field that is empty, I can’t set it because I’m not able to select images. Is there a fix for this?
Here is the code:

public function __construct()
  {
    parent::__construct(
      'contact-widget',
      'u contact widget',
      array(
        'description' => 'Contact info and social links',
      )
    );
    add_action( 'widgets_init', function(){
      register_widget( 'u_contact_widget' );
    });
    add_action( 'admin_enqueue_scripts', array($this, 'scripts') );
  }

  public function scripts()
  {
    wp_enqueue_script( 'media-upload' );
    wp_enqueue_media();
    wp_enqueue_script( 'u-widget-script', get_template_directory_uri().'/assets/js/u-widgets.min.js', array('jquery') );
  }

on the form method of my widget calss I have these lines to add the field with the upload button (if is possible I want to add it to the right of the input field, is there any class in wp to achieve this?)

public function form( $instance )
  {
    $background = '';
    $title = '';
    $claime = '';
    $organization = '';
    $address = '';
    $phone = '';
    $email = '';
    $vat = '';
    $fb = '';
    $ig = '';

    if( $instance ){
      $background = esc_url( $instance['bg_image'] );
      $title = esc_attr( $instance['title'] );
      $claime = esc_attr( $instance['claime'] );
      $organization = esc_attr( $instance['organization'] );
      $address = esc_attr( $instance['address'] );
      $phone = esc_attr( $instance['phone'] );
      $email = esc_attr( $instance['email'] );
      $vat = esc_attr( $instance['vat'] );
      $fb = esc_url( $instance['fb'] );
      $ig = esc_url( $instance['ig'] );
    }
    ?>
      <p>
        <label for="<?php echo esc_attr($this->get_field_id('bg_image')); ?>"><?php _e('Immagine di sfondo'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('bg_image')); ?>" name="<?php echo esc_attr($this->get_field_name('bg_image')); ?>" value="<?php echo esc_attr($background); ?>">
        <button class="upload_image_button button button-primary"><?php _e('Select'); ?></button>
      </p>
// I will omit the rest of the form
<?php
}

on the js side here is the code:

(function($){
  $(document).ready(function(){
    $(document).on('click', '.upload_media_button', function(e){
      e.preventDefault();
      const button = $(this);

      var file_frame = wp.media.frames.file_frame = wp.media({
        title: 'Seleziona o carica un immagine',
        library: {
          type: 'image'
        },
        button: {
          text: 'Seleziona'
        },
        multiple: false
      });

      file_frame.on('select', function(){
        var img = file_frame.state().get('selection').first().toJSON();
        button.siblings('input').val(attachment.url);
      });

      file_frame.open();

    });
  });
});
0
, , sialfa 10 months 0 Answers 70 views 0

Leave an answer