Integrating the WP Media Uploader, version 3.5, Into Your Theme With jQuery. Based off the original tut found on http://wp.tutsplus.com/tutorials/creative-coding/integrating-the-wp-media-uploader-into-your-theme-with-jquery/ But updated to use the 3.5 Media Uploader. While I'm not the biggest JavaScript nerd out there, I understand enough to get…

wptuts-upload-3.5-ready.js

(function($) {
   $(function() {
      $.fn.wptuts = function(options) {
         var selector = $(this).selector; // Get the selector
         // Set default options
         var defaults = {
            'preview' : '.preview-upload',
            'text'    : '.text-upload',
            'button'  : '.button-upload',
         };
         var options  = $.extend(defaults, options);

         var _custom_media = true;
         var _orig_send_attachment = wp.media.editor.send.attachment;

          // When the Button is clicked...
         $(options.button).click(function() {
            // Get the Text element.
            var button = $(this);
            var text = $(this).siblings(options.text);
            var send_attachment_bkp = wp.media.editor.send.attachment;

            _custom_media = true;

            wp.media.editor.send.attachment = function(props, attachment) {
               if(_custom_media) {
                  // Get the URL of the new image
                  text.val(attachment.url).trigger('change');
               } else {
                  return _orig_send_attachment.apply(this, [props, attachment]);
               };
            }

            wp.media.editor.open(button);

            return false;
         });

         $('.add_media').on('click', function() {
           _custom_media = false;
         });

         $(options.text).bind('change', function() {
            // Get the value of current object
            var url = this.value;
            // Determine the Preview field
            var preview = $(this).siblings(options.preview);
            // Bind the value to Preview field
            $(preview).attr('src', url);
         });
      }

      // Usage
      $('.upload').wptuts(); // Use as default option.
   });
}(jQuery));

wptuts.php

function wptuts_print_scripts() {
    wp_enqueue_style( 'thickbox' ); // Stylesheet used by Thickbox
    wp_enqueue_script( 'thickbox' );
    wp_enqueue_media(); // Add this to invoke the 3.5 Media Uploader in our custom page.
    wp_enqueue_script( 'wptuts-upload', get_template_directory_uri() . '/wptuts-upload.js', array( 'thickbox', 'media-upload' ) );
}

For the wptuts.php, update the wptuts_print_scripts() function with the one above.

thanks for the share :) my original js was functioning great with the new uploader until i put more than one upload field in a section, This js helped me resolve the problem and now its mint, good work :)

Where do I change and set the following variables?

frame: 'select',
multiple: false,
library: {
type: 'image'
}

I'm not sure what those parameters are for off the top of my head, but my initial guess is set them in the defaults array on line 6

Hi,

I was trying to get this to work but it does not seem to fire when I press the button. I look in console and I get:

"Uncaught TypeError: Cannot read property 'editor' of undefined " on the line that says :

var send_attachment_bkp = wp.media.editor.send.attachment;

I had the old OLD tutorial working (the one from 2011) on wptuts. Found this one and decided to upgrade. I can't seem to get this to work for the life of me.

This is my JS file. I have basically copied the wp tuts tutorial and simple added one option to my option page for logo.

(function($) {
   $(function() {
      $.fn.wptuts = function(options) {
         var selector = $(this).selector; // Get the selector
         // Set default options
         var defaults = {
            'preview' : '.preview-upload',
            'text'    : '.text-upload',
            'button'  : '.button-upload',
         };
         var options  = $.extend(defaults, options);

         var _custom_media = true;
         var _orig_send_attachment = wp.media.editor.send.attachment;

          // When the Button is clicked...
         $(options.button).click(function() {
            // Get the Text element.
            var button = $(this);
            var text = $(this).siblings(options.text);
            var send_attachment_bkp = wp.media.editor.send.attachment;

            _custom_media = true;

            wp.media.editor.send.attachment = function(props, attachment) {
               if(_custom_media) {
                  // Get the URL of the new image
                  text.val(attachment.url).trigger('change');
               } else {
                  return _orig_send_attachment.apply(this, [props, attachment]);
               };
            }

            wp.media.editor.open(button);

            return false;
         });

         $('.add_media').on('click', function() {
           _custom_media = false;
         });

         $(options.text).bind('change', function() {
            // Get the value of current object
            var url = this.value;
            // Determine the Preview field
            var preview = $(this).siblings(options.preview);
            // Bind the value to Preview field
            $(preview).attr('src', url);
         });
      }
   });
}(jQuery));

jQuery(document).ready(function($){

    $('.btn-upload').wptuts(); // Use as default option.


});

I have tried ti as you had with the call to the function inside the plugin but that doesn't work either... Any chance of a helping hand?

Cheers

justsayno