Extend 3.5 media uploader plugin to change button name

0 Views

I have followed a tutorial on how to upload images using WordPress’ 3.5 media uploader. All is well. I would just like to change the text of the actual upload button “Insert Into Post” to something like.. “Insert Image”.

I’m also trying to do this as a plugin option so it can be dynamic.

Read More

Any help on getting this to work? I’m okay with jQuery, but nothing this advanced yet. 

$.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',
      'upload'  : 'Upload Image'
   };
   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]);
         };
      }

      // Change Button Text
      wp.media.frames.file_frame = wp.media({
          title: defaults.upload,
          button: {
              text: defaults.upload
          },
          multiple: false
      });

      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.
Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Figured it out using a different method. Help from here.

    $.fn.oeUpload = function(options) {
    // Set default options
    var defaults = {
      'preview' : '.preview-upload',
      'text'    : '.text-upload',
      'button'  : '.button-upload',
      'name'    : 'Choose Image'
    };
    var options = $.extend(defaults, options);
    var uploader;

    $(options.button).click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (uploader) {
            uploader.open();
            return;
        }

        //Extend the wp.media object
        uploader = wp.media.frames.file_frame = wp.media({
            title: options.name,
            button: {
                text: options.name
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        uploader.on('select', function() {
            attachment = uploader.state().get('selection').first().toJSON();
            $(options.text).val(attachment.url);
            $(options.preview).attr('src', attachment.url);
        });

        //Open the uploader dialog
        uploader.open();

    });
}

$('.upload').oeUpload({name: "Choose This Image"});