How to use Wordpress Media Upload on multiple buttons?

Question

How to use Wordpress Media Upload on multiple buttons?

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

Follow the HTML code for the button and text field:

<div class="meta-container">
        <div class="label col-2 left">
            <label class="squeeze-label">Imagem Logo:</label>
        </div>
        <div class="col-6">
            <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemLogo]" value="<?php echo $this->data['imagemLogo']; ?>" />
            <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
            <a id="remover_imagem_logo" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
            <p class="description">Imagem que ficará acima da headline.</p>
        </div>
    </div>

    <div class="meta-container">
        <div class="label col-2 left">
            <label class="squeeze-label">Imagem Background:</label>
        </div>
        <div class="col-6">
            <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemBackground]" value="<?php echo $this->data['imagemBackground']; ?>" />
            <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
            <a id="remover_imagem_background" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
            <p class="description">Imagem que ficará no fundo da página. Por padrão será feito upload de uma nova imagem para o Wordpress, caso necessite será possível informar um link externo.</p>
        </div>
    </div>

And the following javascript to make when clicking on the class button "set_pic_button" open the native media uploader of Wordpress and when inserting the selected image, put the URL of the image in the class text field "set_image_url":

$('.definir_imagem_button').click(function(e) 
{
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: {
            text: 'Definir Imagem'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })

    .on('select', function() 
    {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.definir_imagem_url').val(attachment.url);
    })

    .open();

});

Doubt / Problem:

As I have multiple buttons and text field to upload images and insert the URL of the image into its respective text field, I used it as a class, because before that I needed to recreate the javascript code for each upload button, using ID instead of class. Using class gets more organized and I do not need to rewrite the javascript code every time I add a new image upload / upload field.

The problem is that in this case when selecting and uploading the image and setting it, the URL (attachment.url) is passed to all fields with the "set_image_url" class. Obviously I could use an ID instead of a class, but I want it to be done dynamically, without having to add ID every time I create a new image upload field.

In this case, how do I add the URL (attachment.url) to the respective text field, defined by the "set_image_url" class, and not for all that have the same class defined?

javascript jquery upload wordpress

asked by anonymous 08.10.2014 / 20:01

2 answers

Mouse position when moving an SVG object Get value of the week that will start a month

score 1 · Answer 1

Using event.currentTarget you can see which button was clicked and apply attachment.url to the previous element:

$('.definir_imagem_button').click(function(e) {
    e.preventDefault();
    var target = e.currentTarget; // <---- referencia
    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: { text: 'Definir Imagem' },
        multiple: false 
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $(target).prev().val(attachment.url); // <--- usar referencia
    })
    .open();
});

score 0 · Answer 2

In addition to the option mentioned by brasofilo , another option:

    $('.definir_imagem_button').on('click',function(e) {
    e.preventDefault();
    var $var_btm= $(this); // <---- referencia
    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: { text: 'Definir Imagem' },
        multiple: false 
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $var_btm.prev().val(attachment.url); // <--- usar referencia
    })
    .open();
});