1

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').enter image description here

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.

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.

  • Can you elaborate a bit more on how to make sure the correct field gets populated? I managed to have three input field, each button click triggers the media uploader, but always the first field clicked on gets populated with the attachment URL. – SPi Apr 20 '14 at 14:12
  • I've added in extra code to show how the next input would work. So the name of the input field would change and the id of the button would change. The ID of the button should be equal to the name of the target field and should work if you follow the rest of the steps of my code. – Steven Jones Apr 20 '14 at 14:39
  • thank you, this seems to make sense, but apparently only one of the two fields gets populated (which puzzles me, because your code makes sense). Please see my edits. – SPi Apr 20 '14 at 15:03
  • I had to remove the custom_uploader.open()p part: see stackoverflow.com/questions/21341245/… – SPi Apr 20 '14 at 15:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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