how to use media library

Question

hello i want to use wordpress media library . i want to user see the library when click on button i made and choose a picture and i get a link of picture wich user choosed . actualy i want to learn how we should use this library

<button type="button"  class="button button-primary">choose picture</button>

i will be so happy to you guys to answer or link some docs to study them.

Answer 1

Take a look at wp_enqueue_media funciton. It enqueues all scripts, styles, settings, and templates necessary to use all media JS APIs.

Then you can execute wp.media function:

  var button = document.querySelector('.button');

  button.addEventListener('click', function(e) {
    e.preventDefault();

    var frame = wp.media({
      title: 'Frame title',
      multiple: false
    });

    frame.on('select', function () {
      var attachment = frame.state().get('selection').first().toJSON();

      alert(attachment.url);
    });

    frame.open();
  });

More detailed guide: https://codex.wordpress.org/Javascript_Reference/wp.media