How to: JQuery multiple wordpress media uploader buttons in the same options page?

Question

I want to call the wordpress media uploader with a button in my theme options page. The thing is that I need three upload media buttons on the same page. I'm trying to do that using jQuery multiple IDs selector. The code is working fine: I click the button and the media uploader is launched, however when I upload anything into the first input field, the media that I just uploaded is passed on to the other input fields in the page. Like they were binded together. Sorry for the stupid question, I dont know much JavaScript. But anyways, how can I fix this??

jQuery(document).ready(function( $) {
var mediaUploader;
$('#upload-button-1, #upload-button-2, #upload-button-3').on('click', function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Upload', 
button: {
    text: 'Upload'
},
multiple: false
});

mediaUploader.on('select', function () {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);
$('.favicon-preview, .gravatar-preview, .thumbnail-preview')
.css('background','url(' + attachment.url + ')');

});

mediaUploader.open();

});
});

Answer 1

What's happening at the moment is that you're assigning the selected media item to all three inputs in the following line:

j('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

In order to pass the value to only one of them, you need to change that line to respond to some kind of marker that's been set in the buttons. In the example below I've set a data attribute in the button which is referenced in the javascript.

So assuming you have this html:

<!-- upload buttons -->
<input type="button" class="upload-button" data-target="input_1" value="Upload button 1" />
<input type="button" class="upload-button" data-target="input_2" value="Upload button 2" />
<input type="button" class="upload-button" data-target="input_3" value="Upload button 3" />

<!-- inputs to receive the value -->
<input type="text" id="input_1" value="" />
<input type="text" id="input_2" value="" />
<input type="text" id="input_3" value="" />

You can now do this in the js:

jQuery(function($) {

    $(document).ready(function () {

            var mediaUploader;

            // we can now use a single class name to reference all upload buttons
            $('.wp-admin').on('click', '.upload-button', function(e) {

                e.preventDefault();                

                // store the element that was clicked for use later
                trigger = $(this);

                if( mediaUploader ){
                    mediaUploader.open();
                    return;
                }

                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Upload', 
                    button: {
                        text: 'Upload'
                    },
                    multiple: false
                });

                mediaUploader.on('select', function() {

                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // we're replacing this line:
                    //$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

                    // assign the value of attachment to an input based on the data-target value
                    // of the button that was clicked to launch the media browser
                    $('#' + trigger.data('target') ).val(attachment.url);

                    $('.favicon-preview, .gravatar-preview, .thumbnail-preview').css('background','url(' + attachment.url + ')');
                });

                mediaUploader.open();

            });            

    });

});

UPDATE

Based on the code you pasted, you can make it much more efficient like this:

function sweetlola_images(){

    $imgs = array(
        'gravatar'  => 'img_1',
        'thumbnail' => 'img_2',
    );

    foreach( $imgs as $name => $id ){

        // get the image
        $url = esc_attr( get_option( $name ) );

        // if there isn't one, set $gravatar as empty string
        $url = $url ? $url : '';

        //upload button
        echo '<input type="button" data-target="' . $id . '"  value="Upload" class="button button-secondary upload-button" />';

        //input text field
        echo '<input type="text" id="' . $id . '" name="' . $name . '" value="' . $url . '" />';

        if( empty( $url ) ){ //if the value is empty this will show a just the upload button
            echo '<input type="button" value="Remove" data-remove_target="' . $id . '" class="button button-secondary" />';
        }

        // note
        echo '<p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; 

    }
}

Put your three image types in the $imgs array, and generate them all with a single function.

Answer 2

I actually have the html inside a php function:

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){ //if the value is empty this will show a just the upload button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload buton
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';//input text field
} else { //otherwise it will show an upload and a remove button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload button
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" /> //input text field
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" /><p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; //remove button
}
}

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" />
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
}
}

function sweetlola_blog_thumbnail(){
$thumbnail = esc_attr( get_option( 'thumbnail_img' ));
if ( empty ($thumbnail) ){
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="" />
<p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="'.$thumbnail.'" />
<input type="button" value="Remove" id="remove-button-3" class="button button-secondary" /><p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
}
}