Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@colegeissinger
Last active April 2, 2018 14:32
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save colegeissinger/4751052 to your computer and use it in GitHub Desktop.
Save colegeissinger/4751052 to your computer and use it in GitHub Desktop.
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…
(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));
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' ) );
}
@colegeissinger
Copy link
Author

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

@Firestorm-Graphics
Copy link

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 :)

@grappler
Copy link

grappler commented Jul 7, 2013

Where do I change and set the following variables?

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

@colegeissinger
Copy link
Author

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

@sethreidnz
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment