Using WP’s ThickBox in a plugin

  • Hello all,

    I’ve been attempting to create a plugin options page which allows the end user to upload images (and eventually other types of files) using the in-built media uploader. I’ve tried following several tutorials (including : https://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/#comment-11610 ) and have nearly got it working perfectly.

    I have managed to get the media uploader to pop up in the thickbox as per ‘usual’ (I’m trying to get the plugin to feel native to WordPress, hence my desire to get it working like this).

    The code worked as expected in version 3, apart from one small thing – when the thickbox opens, the ‘insert into post’ button isn’t present on the ‘From Computer’ tab. If I go ahead and upload something and then switch to the ‘media library’ tab and then click on ‘show’ the ‘insert into post’ button is displayed. However, on the ‘From Computer’ tab only the ‘save all changes’ button appears.

    The reason why I’m needing the ‘insert into post’ button is because I’m hijacking the window.send_to_editor function which is called when someone clicks that button.

    If you follow the link above you’ll see the entire code I’m using and it seems that this used to work prior to version 3.0.

    I’ve tried playing around with the URL that is used to call the thickbox and have found the following things:

    tb_show('Test', 'media-upload.php?type=image&TB_iframe=1');

    When this is clicked, the thickbox opens on the ‘from computer’ tab. Intermittently the ‘choose files’ button doesn’t display and a click on the ‘From Computer’ tab is needed to get this button to display. When that is clicked a file can be uploaded. Once a file is uploaded the information about the image is displayed and at the bottom of that information (where normally, when using the media uploader in a post, there is ‘insert into post’, ‘use as default image’ and ‘delete permanently’ ) there is only an option to ‘delete’. Below that, at the bottom of the iframe is the ‘save all changes’ button.

    tb_show('Test', 'media-upload.php?type=image&tab=library&TB_iframe=true');

    When this code is used the iframe loads on the library tab as you’d expect. The reason I tested this is because of the problems with the seemingly intermittent display of the ‘select files’ button. The same problem as described above persists whereby the ‘insert into post’ button is not displayed.

    tb_show('Test', 'media-upload.php?post_id=9999&type=image&TB_iframe=1');

    Finally, I tried this whereby I noticed that when you’re using the media uploader in the posts screen (normal usage) there is a post_id parameter – so I tried putting in an arbitrary number.

    This loads the thickbox as normal, on the ‘from computer’ tab and functions exactly as the first chunk of code above. The only difference is that, when an image is uploaded, when the information about that image is displayed the ‘use as featured image’ link is now present as well as the ‘delete’ and ‘save all changes’ button below those. However, the ‘insert into post’ link isn’t displayed – much to my dismay ??

    Apologies for the long post, I wanted to be as thorough as possible and explain what I’ve done as clearly as I could. If anyone is able to shed some light(box … har har) as to why the ‘insert into post’ button is not displayed I would be very appreciative.

    Alternatively, if someone could tell me how I can hijack the function that runs when the ‘save all changes’ button is clicked instead, that would do the trick although from a brief look at the code, it looks like that button actually processes the form and doesn’t run a js function.

    I’ve tried injecting some html into the overlay but had absolutely no luck with that at all as I was unable to determine when the thichbox had finished loading (if you run some js on the click handler for the ‘upload image’ button, the thickbox hasn’t loaded so you can’t inject anything into the iframe as it doesn’t exist in the DOM yet)

    Thanks very much in advance for a) reading all my drivel and b) any answers that are forthcoming.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Thread Starter Rich Tape

    (@iamfriendly)

    I’ve done a bit more digging around and found the _insert_into_post_button($type)() function on line 2175 in /wp-admin/includes/media/php. I _think_ it’s because that the first if() function within that is returning false and hence not actually outputting the button.

    Not entirely sure what to do with this information, though ??

    For ease:

    function _insert_into_post_button($type) {
	if ( !post_type_supports(get_post_type($_GET['post_id']), 'editor') )
		return '';

	if ( 'image' == $type )
	return '
		<tr>
			<td></td>
			<td>
				<input type="button" class="button" id="go_button" style="color:#bbb;" onclick="addExtImage.insert()" value="' . esc_attr__('Insert into Post') . '" />
			</td>
		</tr>
	';

	return '
		<tr>
			<td></td>
			<td>
				<input type="submit" class="button" name="insertonlybutton" value="' . esc_attr__('Insert into Post') . '" />
			</td>
		</tr>
	';
}

    Working on adding a ThickBox to a plugin here: https://www.ads-software.com/support/topic/318250?replies=4 as well. Made some progress. Maybe it can help..

    Thread Starter Rich Tape

    (@iamfriendly)

    An absolute ninja friend of mine who is wise in the ways of javascript (amongst many other disciplines) has hacked and scratched away and has come up with this as a replacement for the script.js file in the tutorial from my first post:

    https://pastebin.com/tpwsY1iu

    This ONLY works for the html uploader – i.e. it doesn’t work for the Flash uploader, mainly because the flash uploader doesn’t refresh the page.

    However, this adds the ‘Insert’ button when a user uploads a file and passes the url back to your form when the button is pressed.

    This could possibly be extended by someone with some time finding out what function the Flash uploader calls and then writing some further javascript wrapper functions akin to the one in the file above.

    You could also probably easily adjust it so that the ‘insert’ button is displayed always (i.e. before a file has been uploaded) and this would probably make it work for the flash uploader, too. Hope this helps! And I hope we get to a final conclusion soon!

    Thread Starter Rich Tape

    (@iamfriendly)

    A hack has also been found, so if you don’t mind editing core:

    Just comment out or delete line 1267:

    if ( $send )

    in /wp-admin/includes/media.php

    This should the allow the ‘insert into post’ button to appear when a file is uploaded in the overlay. (This wasn’t found by me but just trying to keep all the info in one place)

    Thanks for the feedback iamfriendly! . Was following https://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/ as well ?? .
    With my hack I cannot use the Flash Uploader yet either, but it does add the link to the text box as well. For me the the fact that the flash uploader does not yet work and that the location in the DataFeedr Random Ads plugin is off – see https://www.ads-software.com/support/topic/318250?replies=4 – are reasons why I am not done just yet.
    Will check https://pastebin.com/tpwsY1iu as soon as I can. I am sure we will work out a separate thickbox uploader that works with the flash uploader. Just a matter of time ??

    I wonder if this might be worth an enhancement ticket in trac? Having some way to specify whether the ‘Insert into post’ (or really insert into [post type singular]) button should / not appear as a part of the arguments of tb_show ?

    Two trac tickets already submitted re: this topic.
    https://core.trac.www.ads-software.com/ticket/13790 and https://core.trac.www.ads-software.com/ticket/13817

    Until they see resolution – icky, yucky, nasty core mod it is.

    Hi, i just submitted a change to the code at

    https://pastebin.com/tpwsY1iu

    which works (for me) with the flash uploader. I had to hijack the default js function which is called after the upload is successful, and add some post-processing which inserts the needed button.

    Also, in the version of the code I submitted, the button gets inserted in the same td as the delete link, just like the “insert into post” button used to, instead of the td before that. And, I changed it so that the button looks like the old insert into post button did, in wordpress style.

    no need for core mod this way!

    Anyway, hope someone gets use out of it.

    Wonderful. It also looks like https://core.trac.www.ads-software.com/ticket/13817 is likely to get included to 3.1 which will give a core solution w/o need for this level of modification.

    Good either way.

    J

    thanks for your code houjenming.

    For me it shows the insert button for the browser uploader, but not the flash uploader. Do you know if something changed in WP 3.01?

    did it stop working? d’oh.

    Well, i haven’t been using that piece of code for a while. I’ll try and take a look at it when i have some time.

    (does anyone know if this kind of functionality is really going to make it into 3.1?)

    This works for me (WP 3.0.1)

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

    My particular case required me to upload videos and populate a field provided by a plugin. This is the working code that I ended up with:

    jQuery(document).ready(function() {
    var pID = jQuery('#post_ID').val();
	var urlregexp = new RegExp("'(.*)'");

	jQuery('#upload_video_button').click(function() {
	 formfield = jQuery('#squeeze_video_rawsrc').attr('name');
        window.send_to_editor = function (html) {
            var videourl = html.match(urlregexp)[1];
            jQuery('#squeeze_video_rawsrc').val(videourl);
            tb_remove();
        }
	 //tb_show('Test', 'media-upload.php?type=image&tab=library&TB_iframe=true');
	 tb_show('Upload Media', 'media-upload.php?post_id=' + pID + '&type=video&TB_iframe=1');
	 return false;
	});

});

    Since the html value is an anchor tag, I use a regular expression to extract the URL, which is the only value I need. I then populate the field in my form rather than the content of the page/post.

    I was using the following code posted by Eliseos (above)

    It seemed to work fine with 3.0.1 – but after an upgrade to 3.0.3 I have the “Insert Into Post” button not showing issue again.

    Anyone having this issue? More importantly, anyone know how to fix it?

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

    I try to use this (https://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/) for my admin page, but I don’t get the button to work at all.

    Any ideas?
    Where am I suppose to put all the different files?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Using WP’s ThickBox in a plugin’ is closed to new replies.