image-uploader-for-plugin

Want to use the awesome media uploader from WordPress in your plugin? Then you’re in the right place. Recently I created a plugin which needed this functionality, and I had to spend considerable amount of time to make it work. So I thought why not write the tutorial for ti, to make it easier for people who would want to use the feature. So here it is.

1st Step

So first of all you need to register the scripts needed for the uploader to work. The scripts should be loaded once the admin page is loaded. So we have use it to load the script and register these. See how it done below. You have to put this code in your admin menu/plugin settings page.


add_action('admin_enqueue_scripts','register_twmm_scripts');
function register_twmm_scripts() {
if (isset($_REQUEST['page']) && $_REQUEST['page'] == 'twmm-settings') {
wp_enqueue_media();
wp_register_script('twmm_script', WP_PLUGIN_URL.'/your-plugin/twmm_script.js', wp_enqueue_script('jquery'));
wp_enqueue_script('twmm_script');
}
}

Explanation:

1st line is simply asking the WordPress to run the function when admin_enqueue_scripts is executed.

The in the function definition check if the page from which the upload media button scripts are requested. This should be your plugin page name from “add_menu_page” or the equivalent. This is to make sure when the upload media button is requested from any other pages, it retains its normal functionality.

2nd Step

Once you do that, you’re all set to enqueue the inbuilt scripts and the one you need for your plugin page. This javascript file should be made available in your plugin directory. The code for the Javascript is as follows. Copy that paste it to a new file named twmm_script.js and save in your plugin directory.


jQuery(document).ready(function($){
var custom_uploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
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
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#upload_image').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});

Explanation:

Just save it in the file and keep it under your plugin directory. That’s all you need to know.

3rd Step:


add_action('admin_init', 'twmm_init');
function twmm_init() {

add_settings_field('upload_image', 'Upload custom image background:', 'twmm_custombgrnd_func', 'twmm-settings.php', 'twmm_page_setting_section');

}

function twmm_custombgrnd_func() {
$options = get_option('twmm_options');
echo '<div>
<label for="upload_image">
<input id="upload_image" type="text" size="36" name="twmm_options[upload_image]" value="'. $options['upload_image'].'" />
<input id="upload_image_button" class="button" type="button" value="Upload Image" />
<br />Enter a URL or upload an image
</label></div>';
}

Explanation:

You would need to add a new settings field for this image uploader. Do that with the function in which you are going to add the html for the image button. Once you upload the image, the variable upload_image will have the URL of the uploaded image and will put inside the text box beside the button.

Final step


register_activation_hook( __FILE__, 'twmm_activate'); //activate plugin options open activation of plugin
register_deactivation_hook(__FILE__, 'twmm_deactivate'); //deactivate plugin options open deactivation of plugin
function twmm_activate() {
$defaults_twmm = array(
'upload_image' => WP_PLUGIN_URL.'/tt-maintenance-mode/templates/images/bg.jpg',
);
$options = wp_parse_args(update_option('twmm_options', $defaults_twmm));
}
function twmm_deactivate() {
delete_option('upload_image');
}

Explanation:

Just upon activation of the plugin, set the default value and upon deactivation of the plugin, delete the option.


 

I hope this clears it up for you. If you have any doubts, feel free to ask about this in the WordPress forums we have.