I'm trying to implement a multiple image upload on a frontend form, using the built-in Wordpress Media Uploader.

I managed to have a single image upload, but I can't find out how to have multiple image fields. I'm very new to jQuery, unfortunately. Whenever I use multiple <input> fields, the Upload Image Button only works on the first one. Help is greatly appreciated.

This is my working code for the single image upload, which I try to adjust to allow multiple <input> fields/ image uploads.

html frontend form

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

media-uploader.js

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

    var custom_uploader;

    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});

in functions.php

add_action('wp_enqueue_scripts', 'media_uploader_script');
function media_uploader_script() {
    if (is_page_template('page-item-submission.php')) {
        wp_enqueue_media();
        wp_register_script('media-uploader-js', get_template_directory_uri().'/assets/js/media-uploader.js', array('jquery'));
        wp_enqueue_script('media-uploader-js');
    }
}

Here's a screenshot of what I'm trying to implement (I know that the "Add More" Button is another kind of 'issue').

EDIT:

This is how far I got with Steven Jones help:

media-upload.js

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

    var custom_uploader;

    $('.upload_image_button').click(function(e) {

     var target_input = $(this).attr('id');

        e.preventDefault();


        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=' + target_input + ']').val(attachment.url);
});

        //Open the uploader dialog
        custom_uploader.open();

    });


});

html frontend form

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="upload_image_button" type="button" value="Upload Image" />

However, only one of the two field gets populated with input I choose from the media uploader. Example: I click on the second button (image_2) first, an URL gets populated into that field. Afterwards I click on the first button (image_1): the attachment URL now gets populated into the second field, although it must go into the first field... this doesn't make sense.

I'm trying to implement a multiple image upload on a frontend form, using the built-in Wordpress Media Uploader.

I managed to have a single image upload, but I can't find out how to have multiple image fields. I'm very new to jQuery, unfortunately. Whenever I use multiple <input> fields, the Upload Image Button only works on the first one. Help is greatly appreciated.

This is my working code for the single image upload, which I try to adjust to allow multiple <input> fields/ image uploads.

html frontend form

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

media-uploader.js

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

    var custom_uploader;

    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});

in functions.php

add_action('wp_enqueue_scripts', 'media_uploader_script');
function media_uploader_script() {
    if (is_page_template('page-item-submission.php')) {
        wp_enqueue_media();
        wp_register_script('media-uploader-js', get_template_directory_uri().'/assets/js/media-uploader.js', array('jquery'));
        wp_enqueue_script('media-uploader-js');
    }
}

Here's a screenshot of what I'm trying to implement (I know that the "Add More" Button is another kind of 'issue').

EDIT:

This is how far I got with Steven Jones help:

media-upload.js

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

    var custom_uploader;

    $('.upload_image_button').click(function(e) {

     var target_input = $(this).attr('id');

        e.preventDefault();


        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=' + target_input + ']').val(attachment.url);
});

        //Open the uploader dialog
        custom_uploader.open();

    });


});

html frontend form

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="upload_image_button" type="button" value="Upload Image" />

However, only one of the two field gets populated with input I choose from the media uploader. Example: I click on the second button (image_2) first, an URL gets populated into that field. Afterwards I click on the first button (image_1): the attachment URL now gets populated into the second field, although it must go into the first field... this doesn't make sense.

• images
• jquery
• uploads

1 Answer 1

You can't have two buttons with the same ID (#upload_image_button) as IDs are supposed to be unique.

You should give the buttons a class and give the ID equal to that of the name of the associated input.

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="button upload_image_button" type="button" value="Upload Image" />

Then in your JS you should trigger wp_media by the button's class.

$('.upload_image_button').click(function(e) { 

When the button is clicked you'll then need to get the ID of the button that is clicked

var target_input = $(this).attr('id');

Then when the image is returned from the uploader you'll have to populate the correct input with the value:

custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=' + target_input + ']').val(attachment.url);
});

Hope that helps.