Imagewize For all your WWW Services

Adding upload functionality to plugin

Let's say you have found yourself a great Wordpress plugin, but the only thing that is missing is a way to easily upload and or pick images or other file formats. Well you start Googling to see what is already out there. I my case I stumbled upon a great article in Webmaster Source. In this article they explain how you can a/ load the needed scripts to work with a Wordpress media uploader and b/ how to add the html needed to invoke the media uploader and a way to designate a field to store the url to the image or filetype of your choice.

HTML

Let's start with the code needed to load the necessary HTML:

Upload Image <label for="upload_image"> <input id="upload_image" size="36" name="upload_image" type="text" /> <input id="upload_image_button" value="Upload Image" type="button" /> </label>

I did remove the class thickbox here as it added to thickboxes in the same iframe.

PHP

And now the code to load the javascripts jQuery, ThickBox and our own custom javascript as well as the CSS we might like to add to style the media upload box we want to invoke when the upload image buttons is clicked:

function my_admin_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload'); }  function my_admin_styles() { wp_enqueue_style('thickbox'); }  if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') { add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); } 

I needed to add the name off my plugin after the constant in the path to load it all properly and to get the media upload window to load. One thing worth mentioning here is that you need to add this code snippet somewhere at the top of the plugin code. Otherwise the box won't pop-up.

Custom JavaScript

Here is the custom javascript that has to be loaded to open media-upload.php inside thickbox, fetch the url and put it in the proper text area:

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});

I adjusted #upload_image in the script and used the id of the text area I wanted it to appear in:

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('','media-upload.php?type=image&TB_iframe=true');
 return false;
});
// send url back to plugin editor

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#dfrads_textarea').val(imgurl);
 tb_remove();
}

});