WordPress Uploader in Plugin or Theme

A lot of people are using this trick to Use the WordPress Uploader in Your Plugin or Theme so I started a thread on the WP forums for it.

I found the above post and wanted to tweak it so I could have:

• an image preview area (img_prev)
• multiple img_loc/img_prev pairs

on my plugin settings page. For example say I have a settings page section for Allan, Brad, and Carl. Each person has has their own section with a Preview field (img_prev) and an Upload field (img_loc) in it so I can view/upload a picture of them and store it away using the WP Settings API.

So here’s my script:

jQuery('.upload_image_button').click( function() {
  img_loc = jQuery(this).prev('input');
  img_prev = jQuery(this).closest('tr').prev('tr').find('.img_prev');
  tb_show('', 'media-upload.php?type=image&TB_iframe=true');
  return false;
});

window.send_to_editor = function(html) {
  imgurl = jQuery('img',html).attr('src');
  img_loc.val(imgurl);
  img_prev.attr('src',imgurl).removeAttr('width').removeAttr('height');
  tb_remove();
}

Differences: Because I’ll have multiple img_loc/img_prev pairs, we need to use classes instead of id’s for starters. Also, I added the preview area so we’ll want to update that too. Selecting it with the jQuery (line 3) will be different based on your page.

Hope this helps somebody or generates some useful feedback.