Adding image upload functionality to a widget

  • Hi, I am trying to add the ability for users to upload an image in my widget options but the media upload box won’t open when the button is clicked. Here is my javascript code:

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

});

    Here is my function loading the necessary scripts:

    function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/WP-Simple-Social/wp-simple-social-image.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

    And here is my input field and upload button:

    <input id="upload_image" class="widefat" type="text" size="36" name="upload_image" value="<?php echo esc_url( $image ); ?>" />
<input id="upload_image_button" type="button" value="Upload Image" />
Viewing 4 replies - 1 through 4 (of 4 total)

  • I’m no jQuery expert but I suspect the widget bar is loaded after the document is ready so the click event does not get attached.

    https://api.jquery.com/on/

    Try the following,

    jQuery(document).ready(function($) {
  $(document).on("click", "#upload_image_button", function() { 

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

	tb_show('', 'media-upload.php?type=image&TB_iframe=true');
	return false;
  });
});

    Note – I’ve moved the window.send_to_editor otherwise it breaks the media uploader when editing posts etc.

    Ian.

    I am also having a similar problem. If I use your code Ian, it allows the thickbox window to appear and I can then upload an image etc. however the image url is not send into the widget input box. The thickbox window disappears and thats it.

    Anyone any further ideas?

    The problem is probably due to multiple id’s, i.e. #upload_image on the page.

    If drag one widget to the sidebar then view the page source you will see there are two upload_image id’s and id’s should be unique. One is the widget in the left hand pane, the other in the sidebar.

    That means the line,

    $('#upload_image').val(imgurl);

    fails.

    In the widget code you might need to use something like,

    <input class="my_upload_image_button" type="button" value="Upload">
<input id="<?php echo $this->get_field_id('upload_image'); ?>" .../>

    so each instance of the widget has a unique id.

    In the handler for the click event determine which unique id it is then use that to populate the upload_image field.

    Thanks Ian for your input and that makes perfect sense. The only problem is, is that when you say

    In the handler for the click event determine which unique id it is then use that to populate the upload_image field.

    I am just not sure how to do that with the Javascript. I assume that you have to do this in the javascript function too? I am not good with JS at all.

    If you could help that would be great.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding image upload functionality to a widget’ is closed to new replies.