5

Edit: Other variations of scripts don't seem to work either, the wp_enqueue_media() goes alright, but it looks like the script that includes the wp.media is not included.

I'm trying to use the Wordpress Media Uploader in a custom plugin, but keep getting the following error: 

TypeError: undefined is not an object (evaluating 'wp.media.frames')

My Javascript-code:

jQuery(document).ready(function(){

  var mediaUploader;

  jQuery('#upload-button').click(function(e) {
    e.preventDefault();
    // If the uploader object has already been created, reopen the dialog
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    // When a file is selected, grab the URL and set it as the text field's value
    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
      jQuery('#logo').val(attachment.url);
    });
    // Open the uploader dialog
    mediaUploader.open();
  });

});

The .js files are registered as follows: 

/* Add the media uploader script */
  function my_media_lib_uploader_enqueue() {
    wp_enqueue_media();
    wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
    wp_enqueue_script( 'media-lib-uploader-js' );
  }
  add_action('admin_enqueue_scripts', 'my_media_lib_uploader_enqueue');
Max
  • 803
  • 3
  • 10
  • 24
  • As a tip, you can save yourself time / effort by using the "no-conflict safe" document ready: `jQuery(function($) { // inside here, you can use $ instead of typing jQuery, such as $('#upload-button').click....});` – random_user_name Jan 21 '17 at 14:31
  • 1
    OK, to help, it would be useful to know **when** you get the error. Further, using debugging, you could also tell us *where in your code* the error ends up getting thrown. Finally, is this your first attempt? Did you ever have it working? If not, I'd strongly suggest following the example in the official WP docs: [wp.media](https://codex.wordpress.org/Javascript_Reference/wp.media) – random_user_name Jan 21 '17 at 14:35
  • Yes, I once had it working but suddenly it stopped. This was around the time that my site got updated to 4.7.1. The error occurs when I click the Upload button. The error is thrown one the line `mediaUploader = wp.media.frames.file_frame = wp.media({` – Max Jan 21 '17 at 14:41
  • User your developer console to debug the script: set a pause point on that line, and then you can do things such as inspect / console.log the value of `wp`, and `wp.media`, etc. – random_user_name Jan 21 '17 at 14:43
  • Even when using the code from the official WP Docs I get the following error: `TypeError: wp.media is not a function. (In 'wp.media', 'wp.media' is undefined)`.. – Max Jan 21 '17 at 14:52

3 Answers3

6

Solved the problem!

The problem was that wp_enqueue_media() calls the scripts into the footer of the page. Because I was using a die() function somewhere, the scripts weren't loaded.

Ruvee
  • 8,611
  • 4
  • 18
  • 44
Max
  • 803
  • 3
  • 10
  • 24
3

put the wp_enqueue_media function in your enqueue scripts function.

Example:

add_action('wp_enqueue_scripts', 'prince_load_scripts');

function prince_load_scripts(){
wp_enqueue_media();
//Yor scripts goes here...
}
Prince Ahmed
  • 1,038
  • 10
  • 10
1

I also had a similiar problem... The scripts didn't load on one specific page, especially the scripts wp-media, which lead to the error "wp.media is not defined"... all the solutions didn't work. It turned out the content on this page was too massive, my PHP Memory Limit was to low. Setting up MemoryLimit 256->512 worked for me...

chakmear
  • 101
  • 5