3

I am working on a small WordPress widget and I am trying to set it up where the user can upload an image. So far, the necessary scripts are loading but when I click the "Media Library Image" button the image uploader doesn't pop up.

Here is my javascript file:

jQuery(document).ready(function($) {

var formfield = null;

$('#upload_image_button').click(function() {
    $('html').addClass('Image');
    formfield = $('#wp-ss-image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});


// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
    var fileurl;

    if (formfield != null) {
        fileurl = $('img',html).attr('src');

        $('#wp-ss-image').val(fileurl);

        tb_remove();

        $('html').removeClass('Image');
        formfield = null;
    } else {
        window.original_send_to_editor(html);
    }
};

});

Here is are my functions to call the scripts:

add_action('admin_print_scripts-widgets.php', 'wp_ss_image_admin_scripts');

function wp_ss_image_admin_scripts() {
    wp_enqueue_script( 'wp-ss-image-upload', plugins_url( '/WP-Simple-Social/wp-simple-social-image.js' ), array( 'jquery','media-upload','thickbox' ) );
}

add_action('admin_print_styles-widgets.php', 'wp_ss_admin_styles');

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

And here is the html to display the input box and image upload button:

<p>Upload Photo: <input id="wp-ss-image" class="widefat" type="text" size="75" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo esc_url( $image ); ?>" />
        <input id="upload_image_button" type="button" value="Media Library Image" class="button-secondary" />

Since all of the necessary files/scripts are loading, could this be a jQuery problem?

If there is any other additional info that would help out please let me know. Thanks for the help.

1 Answer 1

1

I also noticed a typo in the url media-upload.php?type=image&amp&TB_iframe=1. Maybe this is the problem.

Also a working example:

jQuery( 'input[id^=my_field]' ).live( 'click', function($) {

     formfield = $( 'input[id^=my_image]', $(this).closest('.widget') ).attr( 'name' );
     tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=1' );

     return false;
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.