Great plugin! Implemented within minutes and simple for end users to manage.
Client is particularly happy with the reporting features of the plugin.
BFowler for Ad King Pro

Latest Tweets

Ad King Pro has FINALLY has an update! A cleanup really with a few tweaks to a couple of features. More to come! https://t.co/Fekax5oh1Z
Your using Ad King Pro right? Your site is responsive, surely. Implement adverts so their mobile friendly! http://t.co/9ouYGcYRMJ
Invoice King Pro and Ad King Pro both receive some amazing new features that you will want to know about! http://t.co/FBgDllGJan
Follow KingProPlugins on Twitter

Custom image uploader for plugins using the WordPress native functions

There are certain times when building plugins, features and functions in WordPress that you need to allow an image to be uploaded or even just getting the url to an image (or both). You could use a standard form upload and save the file manually, but why create work for yourself? Use the native WordPress uploader to your advantage!

Firstly, setup your fields within your plugin where you need them, something like the following should suffice (be sure to replace ‘your_image_url‘ and ‘your_image_url_button‘ with your own prefixed names):

$image_url = (get_post_meta( $post->ID, 'your_image_url', true )) ? get_post_meta( $post->ID, 'your_image_url', true ) : '';

echo '<input id="your_image_url" type="text" size="36" name="your_image_url" value="'.$image_url.'" />';
echo '<input id="your_image_url_button" class="button" type="button" value="Upload Image" />';

Now this should output something similar to this:

Example uploader

All that is needed now is a little bit of javascript to fire it up. Again, please make sure you change the ‘your_image_url‘ and ‘your_image_url_button‘ fields to match those changed on your form fields:

 var image_custom_uploader;
 jQuery('#your_image_url_button').click(function(e) {
 e.preventDefault();

 //If the uploader object has already been created, reopen the dialog
 if (image_custom_uploader) {
 image_custom_uploader.open();
 return;
 }

 //Extend the wp.media object
 image_custom_uploader = wp.media.frames.file_frame = wp.media({
 title: 'Choose Image',
 button: {
 text: 'Choose Image'
 },
 multiple: false
 });

 //When a file is selected, grab the URL and set it as the text field's value
 image_custom_uploader.on('select', function() {
 attachment = image_custom_uploader.state().get('selection').first().toJSON();
 var url = '';
 url = attachment['url'];
 jQuery('#your_image_url').val(url);
 });

 //Open the uploader dialog
 image_custom_uploader.open();
 });

Have this javascript load in to the admin with your plugin (or you could just include this script on the page that your fields are, however for cleanliness I would recommend putting it into an external file and using the ‘admin_enqueue_scripts‘ action to queue the script into the admin.

Once that is loaded it, give it a go. Upon clicking the “Upload Image” button, you should be met with the standard WordPress uploader we’ve all come to love. Either choose  to upload a new image/file or choose an existing image/file from the media list. Click “Choose Image” and the URL to that file will be placed into the box.

If you require this in the settings area of WordPress, you will find that you need to load in the media files for this to work. A telltale sign that you need this is the following javascript error that is returned in Google Chrome:

Uncaught TypeError: Cannot read property 'frames' of undefined

If you are getting this error, include ‘wp_enqueue_media()‘ in your ‘admin_enqueue_scripts‘ action.

You can also take this a step further if you need to as the uploader returns more than just the url of the image. Within the ‘attachment‘ variable, you have the following details about the image:

  1. alt: “”
  2. author: “1”
  3. caption: “”
  4. compat: Object
    1. item: “”
    2. meta: “”
  5. date: Sat Aug 24 2013 17:07:22 GMT+1000 (EST)
  6. dateFormatted: “August 24, 2013”
  7. description: “”
  8. editLink: “http://yourdomain/wp-admin/post.php?post=72&action=edit”
  9. filename: “filename.png”
  10. height: 759
  11. icon: “http://yourdomain/wp-includes/images/crystal/default.png”
  12. id: 72
  13. link: “http://yourdomain/plugins/invoice-king-pro/filename/”
  14. menuOrder: 0
  15. mime: “image/png”
  16. modified: Sat Aug 24 2013 17:07:22 GMT+1000 (EST)
  17. name: “filename”
  18. nonces: Object
    1. delete: “a8cfae2025”
    2. update: “3b3bb96c34”
    3. __proto__: Object
  19. orientation: “landscape”
  20. sizes: Object
    1. full: Object
      1. height: 759
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename.png”
      4. width: 971
      5. __proto__: Object
    2. medium: Object
      1. height: 234
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename-300×234.png”
      4. width: 300
      5. __proto__: Object
    3. thumbnail: Object
      1. height: 150
      2. orientation: “landscape”
      3. url: “http://yourdomain/wp-content/uploads/2013/08/filename-150×150.png”
      4. width: 150
      5. __proto__: Object
    4. __proto__: Object
  21. status: “inherit”
  22. subtype: “png”
  23. title: “Image Title”
  24. type: “image”
  25. uploadedTo: 13
  26. url: “http://yourdomain/wp-content/uploads/2013/08/filename.png”
  27. width: 971

These fields can be passed into your plugin just the same as the URL is currently, just assign a new field and attach it with jQuery.

4 thoughts on “Custom image uploader for plugins using the WordPress native functions

  1. Hi Uzair,

    You’ll find that $_GET variables only relate to variables within the Address bar. To get the URL for the image that you have linked through to the post of the custom post type that you have set this up for, you would retrieve the details from the $post object.

    For example, if you setup a custom post type of “example_posttype” then when your pulling out the information using WP_QUERY, you will have access to the image upload field you created on that post type.

    If you created a system option, you can grab it using the get_option() function.

Leave a Reply

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