Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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.
share|improve this question

1 Answer 1

up vote 2 down vote accepted

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"});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.