Use the wordpress file uploader in your Plug-in

Quite a few times , while working with the WordPress API, I wanted to upload files. I have worked with quite a few plug-ins but with them you had to go to the media-library upload your files, copy the path of the file, head back to the plug-in options and then enter the file path where it needs to be, this is not very user-friendly and tends to be rather frustrating.

Wouldn’t it be nice to use the very nice WordPress Media uploader with your own plug-ins? Below is a very simple way to add the media-uploader to your plug-in whether you have one field or many.

Credit must be given to Matt Harzewski from Webmaster-Source for pointing out the way.

If you have worked with the WordPress API before this will be really simple to do, If not then you should be able to do this with a bit of patience. Below you will find all the code that you need to add to your plug-in file.

First, Add your HTML elements where you would want the uploader to be called from and the field you want the path of the newly uploaded file to go to.

Upload Image <label for="upload_image">
<input id="upload_image" name="upload_image" size="36" type="text" />
<input id="upload_image_button" name="upload_image" type="button" value="Upload Image" />
Enter an URL or upload an image for the banner.
</label>

Note that the button field has a name attribute that matches the input field’s name, this will all be clear in a sec as this allows you to use the uploader with more than one field.

Next we register the files needed to use the uploader. We register the Media-upload files (to make the uploader work), Thickbox to allow the box to pop-up and give you the nice darkened effect and Your script file we will add the jQuery to make this work. jQuery should be included in wordpress by default, if it isn’t you will just need to include that as well.

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/myMediaUploader.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');
}

Once you have done this, open your  myMediaUploader.js file and use the code below to apply the actions:

jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
inputfield = jQuery('#upload_image_button').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
var selfield = inputfield;
imgurl = jQuery('img',html).attr('src');
jQuery(selfield).val(imgurl);
tb_remove();
}
});

Explanation : We add a function that when you click on the upload_media_button it will take the value of the name attribute of the button element and use this as the indicator to where he must add the path when the “insert into post” button is clicked. This is the reason that the name attribute is the same as the text field’s name. It stores the value in a variable called selfield which will be carried through to the next function.

I’m sure there is a other way , but I didn’t have time to play around and this worked pretty well for me.

Next you have a function which replaces the default WordPress send_to_editor function. Here we use the selfield variable to determine in which field you want the path to go once “insert into post” is clicked.

To add more fields you just create a extra field for example :

<input id="upload_image2" name="image2" size="36" type="text" />
<input id="upload_image_button2" name="#upload_image2" type="button" value="Upload Image" />

and assign a new jQuery action to that button.

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

That is pretty much how I managed to use the uploader with multiple fields in my own plug-in.

If I have made a mistake or someone knows of a way to improve my method. Please feel free to leave a comment.

Update:

Hey guys sorry I only noticed a crucial mistake I made now.. in you Javascript you have to add the type of selector aswell.

<pre>imgurl = jQuery('img',html).attr('src');
jQuery('#'+selfield).val(imgurl);</pre>

You must add the ” ‘#’+ ” part before the selfield.

sorry bout this.