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&amp;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&amp;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.

Published by Janes Oosthuizen

Programmer and Tech Junky from Bloemfontein, South-Africa. I have been programming for 8 years in various languages including ( CSS, HTML, jQuery, PHP, MySQL, Wordpress and many other ).

Join the Conversation

6 Comments

  1. Hi, thanks for posting 🙂

    Do you have this working in WordPress 3.0 without including the post_id=n in the popup script? It seems without this inclusion, it doesn’t display the Insert into Post button.

    Let me know,
    Tom

    1. Hi Tom. thanks for the comment.
      Just want to understand correctly. You dont want the post_id but you still want the Insert into Post?

  2. thanks a lot i am so happy to have it in my plugin. but no value comes into the field when i click insert to post button. can you please explain the next step how to grab that image and display it on the plugin screen. ?

  3. Hi gmovli

    The above script already places the image url in the field needed. look at the this piece

    imgurl = jQuery('img',html).attr('src');
    jQuery(selfield).val(imgurl);
    

    that is where the value is entered into the field. Just check that the correct id is passed to above named action.

  4. better late than never right. thanks for a great solution to a problem shared by many it seems. But I have run in to a problem, which is probable a cause of my lack of knowledge. please help if you can:

    When adding multiple input fields as instructed above I run in to the problem that when pressing the first button and clicking “inser into post” the url is not added. it works on field two however so must be something in the js. This is how mine looks:

    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;
    });

    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;
    });

    window.send_to_editor = function(html) {
    var selfield = inputfield;
    imgurl = jQuery(‘img’,html).attr(‘src’);
    jQuery(selfield).val(imgurl);
    tb_remove();
    }
    });

Leave a comment

Your email address will not be published. Required fields are marked *